今回の記事では、webサイトのメインビジュアルに設置することが多い、超オシャレなスライドショーのサンプルを厳選して紹介していきます。
スライドショーといえば、slickslideやswiperなどが定番のプラグインですよね。
オプションが豊富で汎用性が高いので、普段からお世話になっている人も多いはず。
僕もコーディングを担当するときは大体ここら辺のプラグインを使うことが多いです。
ですが、webサイトの花形であるスライドショーにいつも同じプラグインを使っていて良いんだろうか?
ふとそんな疑問を抱いてしまう人もいるのではないでしょうか。
今回はメジャーなプラグインに囚われず、柔軟な発想でオシャレな動きを実装しているスライドショーをまとめてみました。
コピペで使うもよし、動きのアイディアだけ拝借するも良しです。
中にはブッ飛んだ動きを実装しているものもあるので、いつものスライドショーに飽きてしまっている方は必見ですよ。
それでは下記からどうぞ!
webサイトで使えるオシャレなスライドショー20選【コピペOK】
分割されて上下にスルッと
一枚画像に見えますが、スライド時に分割されるアニメーションが非常に心地良いですね。
ついついスライドさせたくなっちゃいます。
See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.
cssのみ!華麗なフェードイン・フェードアウトで魅せる
cssのanimationプロパティを使用すると、なんとjsを使わずにスライドが実装できます。もちろんループでき、カスタマイズも簡単。もうこれだけで良いのでは
See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.
背景も連動して変わっちゃう
スライドがボケたものが背景に敷かれていて、スライドに連動して背景も変化します。
スライドの色味が鮮やかなほどカッコ良くなりそう。
See the Pen Slick Slideshow with blur effect by Fabio Ottaviani (@supah) on CodePen.
スライド時ちょっとパララックス
スライドの動きと、中の画像の動きをちょっとずらしてあげるだけでこんなにもオシャレになります。
ちなみにswiperだと簡単にパララックスが実装できますよ。
See the Pen Slideshow Parallax with TweenMax by Bruno Carvalho (@bcarvalho) on CodePen.
奥行きのある動きが楽しい
スライド時に奥に動くモーションが思わず目を引きます。ちょっと宇宙を感じますね。
See the Pen Parallax Slideshow by Bruno Carvalho (@bcarvalho) on CodePen.
ロゴにマスクされた画像が美しい
スライド時にロゴにマスクされた画像もスルッと動きます。オシャレですね〜
See the Pen Prism Effect Slider by victor (@vkanet) on CodePen.
テキストが波のように動く
スライド時にテキストがうねっと下から出現します。テキストを一文字ずつ分割し、バラバラにアニメーションして動かしています。
See the Pen Slideshow Vanilla JS w/ CSS Transition by Riley Adair (@RileyAdair) on CodePen.
鳥のポリゴンが可愛い&美しい
ポリゴンがスライド時にバラバラになり、違う鳥になります。
svgのアニメーションとスライドを組み合わせる発想には度肝を抜かれますね。
See the Pen Geometrical Birds – slideshow by Mikael Ainalem (@ainalem) on CodePen.
人の形に画像がマスクされている!
これは初めて見ました。
人の形に画像がマスクされ、スライド時にアップになるモーションが入ります。ユニークでいいですね〜
See the Pen Silhouette zoom slideshow by Mikael Ainalem (@ainalem) on CodePen.
分割のアニメーションが優雅で素敵
バラバラの画像が一つにまとまるアニメーションがとっても優雅です。テキストがスルッと上がってくるアニメーションもマッチしていますね。
See the Pen Split-screen Slideshow by Sean Free (@seanfree) on CodePen.
すだれアニメーションが綺麗
スライド切り替え時に幾つもの長方形が降ってくるようなアニメーションが入ります。
イージングを弄るとより優雅になりそうです。
See the Pen Page Transition Carousel by alphardex (@alphardex) on CodePen.
イラストがゲームのようにループで動く
背景が手前と奥で分割され、ループで動いています。なんかスタッフロールが流れてきそうですね笑
しかもなんとcssのみで実装できます。
See the Pen CSS Parallax Scrolling by GEOX (@GeoxCodes) on CodePen.
上下にパララックス
スライドの動きと背景の動きがズレている大人気のパララックス・アニメーションです。
王道だけどやっぱりカッコいいです。
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.
ちょっと珍しいカードタイプ
画像とその下のテキストが連動して動きます。
めっちゃ細かいんですけどスライドのボタンがニュルッと変わるのが個人的に好きです笑
See the Pen Responsive Blog Card Slider by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
霧のようなアニメーションが超オシャレ
これは初めて見た人もいるんじゃないでしょうか。
ブワッと動物の顔が変わるアニメーションは必見です。
See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.
文字をホバーするとスライドが切り替わる
ホバーすると背景が変わるのがオシャンですね。海外のサイトでちらほら見かけるような気がします。
See the Pen Hover slider (dark/light) – ver 3 by Ivan Grozdic (@ig_design) on CodePen.
「LEARN MORE」を押すと、、
スライド切り替え時に画像、背景、テキストなど細部にふわっとしたアニメーションが入ります。デザイン自体もカッコいいですね!
See the Pen Info Cards by Nathan Taylor (@nathantaylor) on CodePen.
ブワッと円が展開する
左右の矢印をクリックすると円が広がるようなアニメーションが入ります。発想が面白いですね。
See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.
斜線が入るアニメーションが素敵
斜線の入り方が非常にクールです。複雑なアニメーションでも、動かし方次第でサンプルのようにしっかり纏まります。
See the Pen Slider with complex animation and half-collored angled text by Ruslan Pivovarov (@mrspok407) on CodePen.
まとめ
いかがでしたか?
今回はwebサイトで使えるオシャレなスライドショーを厳選して紹介していきました。
スライドショーは一番に人目を引くところであるにも関わらず、技術的な制約が強いため毎回同じプラグインを流用している人も多いはず。
ですが、メンテナンスに目を瞑ることができるのであれば、今回紹介したような個性的なスライドショーでwebサイトに華やかさをプラスしてあげるのも楽しいんじゃないでしょうか。
ぜひ参考にしてみてくださいね。
それでは今回はここら辺で。
doneあなたにはこちらの記事もオススメ
- play_arrow専門職に特化した転職支援はマスメディアン。
- play_arrow【2021年】Photoshop独学におすすめの本10選【デザイナが厳選】
- play_arrow侍エンジニア塾で稼げるフリーランスwebデザイナーになる【無料体験レッスン好評開催中】