jQueryスライドショーの2回目は、フェードイン・フェードアウトのみから横からのスライドインへの変更(全3回)

テクニカルWebデザイン(TechWeb)

先々週から3回に分けて行っているjQueryを使ったスライドショー作成。

前回は、単純なフェードイン・フェードアウトだけでの切り替えでしたが、今回は横からのスライドインにしてみます。

1回目の記事はこちら

PR

まずは動作サンプルから

実際は、もう少しゆっくり切り替えますが、サンプルなので1秒で切り替えています。

jQuery

HTML5

CSS3

 

1回目からの変更点

変更点は、22行目から31行目です。

1回目のフェードイン・フェードアウトを作っていないかたは、まず1回目のスライドショーを先に作ってください。

22行目から25行目の追加
右からのスライドインを実現するために、あらかじめマージンで200pxずらしておきます。 ちなみに左からのスライドインにする場合は、-200pxとネガティブマージンを設定してください。

29行目の追加
マージンをゼロにすることで、右にずらした画像が元の位置に戻ろうとすることでスライドインが実現します。

2回目は、これだけです!

1回目の記事はこちら

その他のTechWebTipsはこちら

 

熊本電子ビジネス専門学校のWebデザイナーコースでは
こんなことが出来るようになります!

PR

関連記事