サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
yarunaramaeni.com
スマホで表示する時だけスライダーで表示したいというご要望があったため、調べたところSlickというプラグインで実現できました。今回はその方法と簡単な解説をさせて頂きたいと思います。 Slickのダウンロードと使用方法についてはこちらから。 function sliderSetting(){ var width = $(window).width(); if(width <= 767){ $('#slider').not('.slick-initialized').slick(); }else{ $('#slider.slick-initialized').slick('unslick'); } } // 初期表示時の実行 sliderSetting(); // リサイズ時の実行 $(window).resize( function() { sliderSetting(); });
PCでパララックスを実装する場合は、background-attachmentを使用することで簡単に実現することができます。 ですが、スマホではbackground-attachmentが効かないので、簡単に実現することができません。 そこで、今回はスマホでもパララックスを実現するための方法をまとめておきたいと思います。 sample 実現方法 HTML .section1~4のclassが付いている要素がありますが、今回はsection1、section3は背景画像がない状態。section2、section4に背景が付くような想定で作成しています。 <div class="wrapper"> <div class="section1 section"> <h2>section1</h2> </div> <div class="section2 section"> <h2>section
このページを最初にブックマークしてみませんか?
『yarunaramaeni.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く