[JS]複数の打ち出し画像をスライドのアニメーションで変更するスクリプト

サイトのトップページやプロモーションページに最適な複数の画像をスムーズなアニメーションでスライド表示するスクリプトをSoh Tanakaから紹介します。

デモのキャプチャ

Automatic Image Slider w/ CSS & jQuery
デモページ

画像とコントローラーはdiv要素で実装されており、実装イメージは下記のようになります。

サイトのキャプチャ

実装のイメージ

画像のスライドはコントローラーでの手動操作と自動操作に対応しています。

スクリプトのベースにはjQueryが使用されており、HTML/CSS/JavaScriptのコードも紹介されているのでカスタマイズも可能です。

Inspiration

上記のスクリプトのようなテクニックを使用したサイトのショーケースです。
フレームやコントローラーなどUIをサイトのテーマにあわせるといっそう洗練された印象を与えます。

サイトのキャプチャ

Web Design London

サイトのキャプチャ

Tutorial9

サイトのキャプチャ

Redium

サイトのキャプチャ

Big Spaceship

サイトのキャプチャ

Electric Pulp

sponsors

top of page

©2018 coliss