ブログ

BLOG 2019.05.31AIブログ , WordPress , ウェブ制作 , サービス・ツール , デザイン

【jQuery】背景画像をスライドさせる

こんにちは!制作部のゆりです。

今回は最近使って便利だったjsを紹介したいと思います!

背景画像をスライドショーで表示できる!「Vegas」

メインビジュアルなど、スライダーの上にテキストを重ねたい時って結構ありますよね。
普通のスライダーだと「position」タグを使わないといけなかったりするので
少し手間になるかと思います、、そんな時にこのjsがとても便利です!

この「vegas」使うと、スクリプト内に画像の場所を入力するだけで、
背景画像のスライダーが出来ちゃいます

スライダーが背景になっているので、
何も考えずに文字を重ねることが可能です!

以下のリンク先が「Vegas」です。
気になった方はダウンロードしてみて下さい(*^^*)
右下の方にDOWNLOADとあります。

http://vegas.jaysalvat.com/

「Vegas」を使う上での注意点

画像がある場所の入力を間違えると表示されないので気を付けてください!

例) ✖ ‘ img/〇〇.png ‘
〇 ‘ ../img/〇〇.png ‘
〇 ‘ http: ~ 〇〇.png ‘

「Vegas」はオプションも充実

「Vegas」は背景画像をスライド式にできるだけでなく、
動きにも変化を付けることが出来たり、overrayを設定出来たりします!

デモはこちら↓

DEMO

シンプルに「フル画面」や「縦スライド」にしたい時にも使えます。
backgroundとしてcssで「レスポンシブ対応」もできるので、
とても活用しやすいのではないでしょうか。

まとめ

だいぶ昔からあるjsみたいですが、
実際に使ってみてとてもやりやすかったので、
これからも文字を重ねる時やフル画面にしたい時などに使っていきたいなと思います!

魅せるメインビジュアル(スライダー)が作れるように
色々と工夫していきたいですね☺

では、ご閲覧ありがとうございました!

Tweet Share RSS

関連記事