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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

3310閲覧

slickスライダーの2周目のアニメーションがおかしい

youngmandesu

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/03/14 02:12

編集2022/03/16 11:24

前提・実現したいこと

下記のサイトのスライダーはスクロールするとスライダーが出てくるタイミングに合わせてスタンプが出てくる仕組みになっています。
https://testtest.gloomy.jp/ut/

1枚目のスライダーのスタンプはうまくアニメーションしながら出てくるのですが、2周目の1枚目のスライダーが出てくる際に、スタンプがアニメーションせずに出てきます。これをアニメーションしながら出てくるようにしたいです。

わかる方いればコメントいただければ嬉しく思います。

発生している問題・エラーメッセージ

2週目の最初のスライダーのスタンプ出現が、アニメーションせずに出現する。

該当のソースコード

HTML

1 <ul class="slider_inner" id="js-slider"> 2 3 <li class="slider_card first-slider-card"> 4 <h2 class="job-ttl">自動車製造に関する組立</h2> 5 <div class="text-flex"> 6 <img class="work_place_image" src="images/job/job_img01@2x.png" loading="lazy" alt="仕事場風景"> 7 <img class="salary_image" src="images/job/salary01@1.5x.png" loading="lazy" alt="給与"> 8 </div> 9 <img class="stamp_image stamp_01" src="images/stamp_slider01@1.5x.png" loading="lazy" alt="高収入スタンプ"> 10 </li> 11 12 <li class="slider_card socond_slider_card"> 13 <h2 class="job-ttl">半導体製造装置の<br>部品梱包・運搬</h2> 14 <div class="text-flex"> 15 <img class="work_place_image" src="images/job/job_img02@2x.png" loading="lazy" alt="仕事場風景"> 16 <img class="salary_image" src="images/job/salary01@1.5x.png" loading="lazy" alt="給与"> 17 </div> 18 <img class="stamp_image stamp_02" src="images/stamp_slider02@1.5x.png" loading="lazy" alt="高収入スタンプ"> 19 </li> 20 21 <li class="slider_card"> 22 <h2 class="job-ttl">スマホ・タブレット製造の検査</h2> 23 <div class="text-flex"> 24 <img class="work_place_image" src="images/job/job_img03@2x.png" loading="lazy" alt="仕事場風景"> 25 <div class="slider_texts"> 26 <img class="salary_image" src="images/job/salary02@1.5x.png" loading="lazy" alt="給与"> 27 </div> 28 </div> 29 <img class="stamp_image stamp_03" src="images/stamp_slider03@1.5x.png" loading="lazy" alt="高収入スタンプ"> 30 </li> 31 32 <li class="slider_card"> 33 <h2 class="job-ttl">食品加工・検品</h2> 34 <div class="text-flex"> 35 <img class="work_place_image" src="images/job/job_img04@2x.png" loading="lazy" alt="仕事場風景"> 36 <div class="slider_texts"> 37 <img class="salary_image" src="images/job/salary03@1.5x.png" loading="lazy" alt="給与"> 38 </div> 39 </div> 40 <img class="stamp_image stamp_04" src="images/stamp_slider04@1.5x.png" loading="lazy" alt="高収入スタンプ"> 41 </li> 42 43 </ul> 44

slick.js/js

1 2 3$(function(){ 4 $(window).scroll(function (){ 5 $(".stamp_01").each(function(){ 6 var imgPos = $(this).offset().top; 7 var scroll = $(window).scrollTop(); 8 var windowHeight = $(window).height(); 9 if (scroll > imgPos - windowHeight + windowHeight/2){ 10 $(this).addClass("fade_on01"); 11 } 12 }); 13 }); 14}); 15 16$(function(){ 17 $(window).scroll(function (){ 18 $(".stamp_02").each(function(){ 19 var imgPos = $(this).offset().top; 20 var scroll = $(window).scrollTop(); 21 var windowHeight = $(window).height(); 22 if (scroll > imgPos - windowHeight + windowHeight/2){ 23 $(this).addClass("fade_on02"); 24 } 25 }); 26 }); 27}); 28 29$('.slider_inner').slick({ 30 autoplay:true, 31 autoplaySpeed: 3000, 32 dots:true, 33 speed:1500, 34 arrow:false, 35 centerMode:true, 36 centerPadding:"5%", 37 infinite:false, 38 pauseOnFocus: false, 39 pauseOnHover: false, 40 pauseOnDotsHover: false, 41 /*infinite: false*/ 42}); 43

css

1 2<!--スタンプアニメーションcss--> 3 4.slider_zone .slider_inner .slider_card { 5 width: 625px; 6 padding: 30px; 7 -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); 8 box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); 9 margin-right: 20px; 10 margin-left: 20px; 11 margin-top: 20px; 12 margin-bottom: 20px; 13 position: relative; 14 15} 16 17.slider_zone .slider_inner .slick-current .fade_on01 { 18 -webkit-animation-play-state: running; 19 animation-play-state: running; 20 visibility: hidden; 21} 22 23.slider_zone .slider_inner .slick-current .stamp_02 { 24 visibility: hidden; 25 -webkit-animation: sample_anime02 5s paused both; 26 animation: sample_anime02 5s paused both; 27} 28 29 30 @keyframes sample_anime01 { 31 0% { 32 visibility:hidden; 33 opacity: 0; 34 transform: rotate(-30deg) scale(2.5); 35 } 36 30% { 37 visibility:visible; 38 opacity: 0.8; 39 transform: rotate(0deg) scale(1); 40 } 41 100% { 42 visibility:visible; 43 opacity: 1.0; 44 transform: rotate(0deg); 45 } 46 } 47 48 49 @keyframes sample_anime02 { 50 0% { 51 visibility:visible; 52 opacity: 0; 53 transform: rotate(-30deg) scale(2.5); 54 } 55 30% { 56 visibility:visible; 57 opacity: 0.8; 58 transform: rotate(0deg) scale(1.04); 59 } 60 100% { 61 visibility:visible; 62 opacity: 1.0; 63 transform: rotate(0deg); 64 } 65 }

試したこと

slick.jsの書き方がおかしい?とおもい、無駄なオプションコード消しましたが変わらず。
また、keyframe animation部分の書き方がおかしい?と思い、visibility部分など消したりしましたが変わらず。

わかる方いれば助けていただけますと幸いです。

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ループ時に表示されているスライダーは.slick-currentではないようです。
こちらが参考になりそうです。

slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく - Qiita

投稿2022/03/16 02:24

Lhankor_Mhy

総合スコア35871

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問