【Swiper】ズームインした後にフェードで切り替わるスライダーの作り方2020.02.08JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、Swiperでズームインした後にフェードで切り替わるスライダーの作り方をご紹介しています。Swiperは、jQueryを必要としないJavaScriptのスライダーライブラリです。高機能でありながらシンプルな設計となっているため、初めて触る方にもとっつきやすいスライダーとなっています。今回は、Swiperで実装することができるフェードエフェクトのスライダーに少し手を加えて、画像がズームした後にフェードで次のスライドに切り替わるスライダーを作っていきたいと思います。本記事ではズームインの後にフェードするスライダーの実装方法を、下記の2パターンご紹介しています。JSでズームインした後にフェードで切り替わるスライダーを実装するキービジュアルはもちろん、商品紹介やギャラリーのように使用することができるのでおすすめです!では、解説していきます。HTMLでスライダーを作成する今回ズームインの後にフェードするスライダーの実装方法を2パターンご紹介していますが、どちらも同じHTMLを使用します。下記のスライダーになります。class="swiper-button-next"></div></div>「前へ・次へ」のナビゲーションがついているだけの簡単なものになりますが、動きを確認するようにご利用いただけれればと思います。CSSのみで実装する方法から見ていきましょう!CSSのみでズームインした後にフェードで切り替わるスライダーを実装する下記は完成した際のデモになります。スライドに表示されている画像がゆっくりとズームインしていき、止まった後にフェードで次のスライドに切り替わります。CodePen.CSSは下記のような記述になっています。「@keyframes」を作成しておき「アクティブスライド」と「1つ前にアクティブだったスライド」に「animation」を指定します。}}後はSwiperで通常通り「fade」のエフェクトを指定したスライダーを指定します。},})上記の「CSS」と「JS」を追記すると、デモのようなスライダーを実装することができます。Swiperでは、現在表示されているアクティブのスライドには「.swiper-slide-active」というクラスが、1つ前にアクティブだったスライドには「.swiper-slide-prev」というクラスが付与されます。(ループを有効にしている場合は「.swiper-slide-duplicate-active」も。)この3つのクラスを利用することで、ズームインだけではなく、他のアニメーションも簡単に追加することができます。色々なアニメーションを追加して、Swiperの可能性を感じていただければ幸いです。JSでズームインした後にフェードで切り替わるスライダーを実装する前項では「CSS」のみを使用してズームインするアニメーションを実装してみましたが、本項ではスライドの切り替えをスクリプトで取得して予め用意しておいたクラスを付与してズームインを再現してみたいと思います。下記が本項でご紹介するスライダーのデモになります。CodePen.前項と同じく、ズームインは「@keyframes」で実現します。アクティブスライドに付与するクラスは「.is-play」として用意しておきます。}}最後にスクリプトでクラスの付け外しを実装します。(詳しくはコメントを記載しています。}});ばばっと書いてみましたがいかがでしょうか。動きはほとんどおなじものですが、主な違いとしては、予めSwiperで用意されているクラス(「.swiper-slide-active」や「.swiper-slide-prev」)を利用するか、予めアニメーションを設定したクラスを追加するだけかの違いになります。最後にいかがでしたでしょうか。Swiperは実務でもプライベートでも大変お世話になっているスライダーライブラリです。スライダーを使用する案件があれば真っ先に検討するほどに愛用しています。カスタマイズも容易で頭の中にあることを実現できる柔軟性がありますので、皆さんもSwiperを使用して新しいスライダーを生み出してみてはいかがでしょうか!以上、Swiperでズームインした後にフェードで切り替わるスライダーの作り方のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。