Slippry_-_A_responsive_slider_by_booncon_ROCKETS

写真を動画みたいに見せるjQueryプラグインSlippryを使ってみる!

 
どうも、pei(@pei_babo)です。

今や時代は動画ですね。
Youtubeはもちろんのこと、Vineだったり、それらをまとめた動画キュレーションバイラルメディアが活発だったり、あとは動画広告も勢いありますよね。
Webの流れは完全に動画に移行しつつあります。

でもちょっと待って下さい。
動画をやりたいのは山々なんだけど、コストもかかるしな…
写真もまだまだ捨てたもんじゃないぞ、instagramも若い女性を中心に流行ってるじゃないか。

そうです。まだ写真の需要は限りなくあるはずです。
なんせ手軽ですし。
しかし、ただちょっと写真を貼るだけじゃ物足りないな…

 
fcf92e7d5274ba647a7be47cbdc40696_400
「もうちょっとこう、、、あるだろう。」

 

「写真をちょっと動画っぽく見せられれば…」
そんなニーズもあると思います。
今日はそんな時に使いたい、写真画像を動画っぽく動きのついたスライドショーのように見せるjQueryプラグインのSlippryを使ってみました。

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Slippryプラグインの使い方とサンプル

まずは今日紹介する「Slippry」のサイトはこちら。

 

①早速ダウンロード

それでは早速ソースをダウンロードしていきましょう。

まずはサイトトップ右上の「DOWNLOAD」と書かれたところをクリック。

Slippryダウンロード

 
ダウンロードしたファイルで必要なのは

の二つですね。

03_jquery-plugin-circliful-master

 

②コードを書いていこう!

■ CSSとjsの読み込み宣言

コメントにも書きましたがjQueryは各自で別途入れてくださいね。
必ずslippry.min.jsより前でjQueryを読み込んで下さい。

■ HTML

■ javascript処理

ulのid名を指定してslippry()を呼び出します。
オプションを指定しなくても通常良く見る画像のスライダーもすぐ出来ます。
今回は写真画像を動いているように見せたいので「transition: ‘kenburns’」の指定は必須です。
他のオプションに関しては、本サイトのセッティングページを参考にして下さいませ。

 

③デモを見てみよう!

デモを作りましたが、如何でしょうか?
結婚式のプロフィールムービー的なあの感じですね。
写真は風景ですが。
でもただのスライダーよりは動きがあってちょっとかっこ良いですよね。

 

まとめ

写真は動画とはまた違う魅力がありますよね。
動画全盛期になっても写真画像は残りますよね、きっと。

あ!あと言い忘れていましたが、このSlippryプラグインはもちろんレスポンシブデザイン対応です!
言うことなしですね。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA