2023年1月15日SHAREポストシェアはてブLINE今回はスライダープラグインの王道『Swiper』にパララックス機能を実装したソースコードを公開いたします。Swiperはオプションが豊富でGSAPと相性が良くGSAPを組み合わせて実装しております。今回使用するスライダーの雛形は以前投稿した記事からご参照ください。非表示1.実装イメージ2.HTML3.CSS4.JavaScript1.実装イメージ実装イメージは以下の通りです。CODEPEN』から全画面表示し1440px以上のデバイスで閲覧することを推奨します。CodePen.コピペしてすぐに実務で実装できるようにしております。注意点としては予め、CDNや公式サイトからプラグインをダウンロードしておきましょう。CDNはコチラバージョン指定してダウンロード必要なファイルは『swiper-bundle.min.css』『swiper-bundle.min.js』の2つです2.HTMLHTMLはコチラの通りになっています。</div></section>3.CSS次にCSSです。なり小なりお仕事の総納品件数は100件以上。営業支援コミュニティCODOLIFEにてコーディング講座の講師を担当。