前提・実現したいこと
お世話になります。
下記参考サイトをchoromeのデベロッパーツールでスマホ表示もしくは、
スマホ実機でご確認いただきますと、背景画像が横にスライドしながら画像
全体が見えるような動きをしており、その後フェードで画像が切り替わる動きを
実装したいと考えております。
※背景画像手前のロゴや文字部分などは今回含まれません。
また、参考サイトとは違い、フェードの切り替えをします要素が1ページに複数あり、横並びに並んでいる状態です。
■参考サイト
https://hoshinoya.com/
基本のソースコード
html
1<ul class="SlideArea"> 2 3 <li> 4 <div class="imgBox"> 5 <ul class="slide-res"> 6 <li><img src="img/beginningImg_01.jpg"></li> 7 <li><img src="img/beginningImg_02.jpg"></li> 8 <li><img src="img/beginningImg_03.jpg"></li> 9 </ul> 10 </div> 11 </li> 12 13 <li> 14 <div class="imgBox"> 15 <ul class="slide-res"> 16 <li><img src="img/beginningImg_04.jpg"></li> 17 <li><img src="img/beginningImg_05.jpg"></li> 18 <li><img src="img/beginningImg_06.jpg"></li> 19 </ul> 20 </div> 21 </li> 22 23 <li> 24 <div class="imgBox"> 25 <ul class="slide-res"> 26 <li><img src="img/beginningImg_07.jpg"></li> 27 <li><img src="img/beginningImg_08.jpg"></li> 28 <li><img src="img/beginningImg_09.jpg"></li> 29 </ul> 30 </div> 31 </li> 32 33</ul>
css
1.SlideArea { 2 display: -moz-flex; 3 display: -ms-flex; 4 display: -o-flex; 5 display: -webkit-box; 6 display: -ms-flexbox; 7 display: flex; 8 -ms-flex-wrap: wrap; 9 -o-flex-wrap: wrap; 10 flex-wrap: wrap; 11 -webkit-box-pack: justify; 12 -ms-flex-pack: justify; 13 justify-content: space-between; 14} 15 16.SlideArea > li { 17 width: 32%; 18 margin-bottom: 30px; 19} 20 21.imgBox li { 22 overflow: hidden; 23} 24 25.imgBox img { 26 max-width: 120%; 27 position: relative; 28}
JAVASCript
1$(function() { 2 $('.slide-res').slick({ 3 autoplay:true, 4 autoplaySpeed:5000, 5 fade:true, 6 speed:2000, 7 arrows:false, 8 9 }); 10});
試したこと
■フェードの画像切り替え
「slick.js」を使用して、フェードの切り替えを実装しました。
■画像単体の横スライド
- css3の
animation
を使い横にスライドするように指定をしました。 - 上記で不具合があった為、「slick.js」のイベントを使い横スライドを試みました。
試したソースコード
css3のanimation
を使用
css
1@keyframes slide { 2 0% { 3 transform: translateX(0px); 4 -moz-transform: translateX(0px); 5 -webkit-transform: translateX(0px); 6 -o-transform: translateX(0px); 7 -ms-transform: translateX(0px); 8 } 9 10 100% { 11 transform: translateX(-50px); 12 -moz-transform: translateX(-50px); 13 -webkit-transform: translateX(-50px); 14 -o-transform: translateX(-50px); 15 -ms-transform: translateX(-50px); 16 } 17} 18 19.slick-active img { 20 animation-name: slide; 21 animation-duration: 10s; 22 animation-timing-function: linear; 23 animation-fill-mode: forwards; 24 position: relative; 25}
「slick.js」のイベントを使用
JAVASCript
1$(function() { 2 $('.slide-res').slick({ 3 autoplay:true, 4 autoplaySpeed:5000, 5 fade:true, 6 speed:2000, 7 arrows:false, 8 9 }); 10 11 $('.slide-res').on('beforeChange',function(){ 12 $('.slide-res li img').animate({left: '0px'}, 500, 'linear'); 13 }); 14 15 $('.slide-res').on('afterChange',function(){ 16 $('.slide-res li img').animate({left: '-25px'}, 1500, 'linear'); 17 }); 18 19});
発生している問題・エラーメッセージ
■css3を使用した際の不具合
0. IE、FireFoxで画像単体のスライドがカクつきスムーズな動きではありませんでした。
0. スライド表示されている要素に「slick.js」によって付与されるクラスが付いたら画像単体のスライドが始まるようにした為、フェード切り替え時にクラスがハズレ、
画像単体のスライドが元の状態に戻るためフェード切り替えの度にガクッと動いていました。
■「slick.js」のイベントを使った際の不具合
0. IE、FireFoxで画像単体のスライドがカクつきスムーズな動きではありませんでした。
0. イベントにスライドが移動する前beforeChange
と
スライドが完了した後afterChange
がありましたので、jQueryのanimate
を使って、画像単体のスライドを試みましたが、フェード切り替えが行われた時点でイベントが発生しますので、css3の時と同様に画像単体のスライドが元の位置に戻って、フェード切り替えが行われており、フェード切り替え時にガクッとした動きが出てしまいました。
補足情報(FW/ツールのバージョンなど)
css3も「slick.js」も基本同じ不具合が出ております。
参考サイトと同じ方法で出来れば一番良いのですが、何を使用しているのかソースを拝見しても理解が出来ず今回の方法で対応を試みましたがうまく行かない状況です。
希望としましては、参考サイトと同じ方法での実装をしたいと思いますが、その他方法でも問題御座いません。
ご面倒では御座いますが、是非お力添えを頂けますと幸いでございます。
宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/14 02:07