質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

3135閲覧

フェードでスライドと中の画像を横移動の方法

sakio6

総合スコア47

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

3クリップ

投稿2019/03/06 18:06

前提・実現したいこと

お世話になります。

下記参考サイトを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」を使用して、フェードの切り替えを実装しました。

■画像単体の横スライド

  1. css3のanimationを使い横にスライドするように指定をしました。
  2. 上記で不具合があった為、「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」も基本同じ不具合が出ております。
参考サイトと同じ方法で出来れば一番良いのですが、何を使用しているのかソースを拝見しても理解が出来ず今回の方法で対応を試みましたがうまく行かない状況です。

希望としましては、参考サイトと同じ方法での実装をしたいと思いますが、その他方法でも問題御座いません。
ご面倒では御座いますが、是非お力添えを頂けますと幸いでございます。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

1.に関してだけですが、cssアニメーションは0%と100%以外に途中の段階も書き込んでおくと動きがスムーズになることがありますのでお試しください。

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 50% { 11 transform: translateX(-25px); 12 -moz-transform: translateX(-25px); 13 -webkit-transform: translateX(-25px); 14 -o-transform: translateX(-25px); 15 -ms-transform: translateX(-25px); 16 } 17 18 100% { 19 transform: translateX(-50px); 20 -moz-transform: translateX(-50px); 21 -webkit-transform: translateX(-50px); 22 -o-transform: translateX(-50px); 23 -ms-transform: translateX(-50px); 24 } 25}

投稿2019/03/13 15:15

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakio6

2019/03/14 02:07

cerfweb様 ご回答頂きありがとうございます。 実は、こちらでご質問させて頂いた後、色々調べて、cerfweb様がご回答されたように細かく段階を分けてみたのですが、FireFoxでのカクつきが直りませんでした。 IEは多少スムーズになった印象でした。 ちなみに、試した際は上記よりもう少し細かくして、0%、25%、50%、75%、100%で段階を分けました。 その旨の追記が出来ておらずお手数おかけしました。
guest

0

IEを視野に入れているならjQuery1.12とui1.12で試してみてください

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

uiの有効性

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 3<script> 4$(function(){ 5 $('#d1').animate({'background-Color':'green'},1000); 6 $('#d2').hide().show("slide", {direction: "left"},1000); 7}); 8</script> 9<div id="d1" style="background-Color:red;width:100px;height:100px">hoge</div> 10<div id="d2" style="background-Color:yellow;width:100px;height:100px">fuga</div>

投稿2019/03/07 01:38

編集2019/03/07 05:07
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakio6

2019/03/07 04:45

yambejp様 ご回答頂きありがとうございます。 jQuery UIは、画像単体のスライド実装の為に使用するのでしょうか? jQuery UIを使用した事が無いためどの部分の為にjQuery UIを導入するのか検討が付きません。 無知で大変申し訳ございませんが、ご教示頂けますと幸いです。 宜しくお願い致します。
yambejp

2019/03/07 05:08 編集

> どの部分の為にjQuery UIを導入するのか 横方向のスライドとか、数値以外の変化とかに有効です
sakio6

2019/03/07 05:18

ありがとうございます。 jQuery UIについて調べてみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問