### 前提・実現したいこと下記のサイトのスライダーはスクロールするとスライダーが出てくるタイミングに合わせてスタンプが出てくる仕組みになっています。 https://testtest.gloomy.jp/ut/ １枚目のスライダーのスタンプはうまくアニメーションしながら出てくるのですが、２周目の１枚目のスライダーが出てくる際に、スタンプがアニメーションせずに出てきます。これをアニメーションしながら出てくるようにしたいです。わかる方いればコメントいただければ嬉しく思います。 ### 発生している問題・エラーメッセージ ``` ２週目の最初のスライダーのスタンプ出現が、アニメーションせずに出現する。 ``` ### 該当のソースコード ```HTML

自動車製造に関する組立
半導体製造装置の
部品梱包・運搬
スマホ・タブレット製造の検査
食品加工・検品

``` ```slick.js/js $(function(){ $(window).scroll(function (){ $(".stamp_01").each(function(){ var imgPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + windowHeight/2){ $(this).addClass("fade_on01"); } }); }); }); $(function(){ $(window).scroll(function (){ $(".stamp_02").each(function(){ var imgPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + windowHeight/2){ $(this).addClass("fade_on02"); } }); }); }); $('.slider_inner').slick({ autoplay:true, autoplaySpeed: 3000, dots:true, speed:1500, arrow:false, centerMode:true, centerPadding:"5%", infinite:false, pauseOnFocus: false, pauseOnHover: false, pauseOnDotsHover: false, /*infinite: false*/ }); ``` ```css .slider_zone .slider_inner .slider_card { width: 625px; padding: 30px; -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; position: relative; } .slider_zone .slider_inner .slick-current .fade_on01 { -webkit-animation-play-state: running; animation-play-state: running; visibility: hidden; } .slider_zone .slider_inner .slick-current .stamp_02 { visibility: hidden; -webkit-animation: sample_anime02 5s paused both; animation: sample_anime02 5s paused both; } @keyframes sample_anime01 { 0% { visibility:hidden; opacity: 0; transform: rotate(-30deg) scale(2.5); } 30% { visibility:visible; opacity: 0.8; transform: rotate(0deg) scale(1); } 100% { visibility:visible; opacity: 1.0; transform: rotate(0deg); } } @keyframes sample_anime02 { 0% { visibility:visible; opacity: 0; transform: rotate(-30deg) scale(2.5); } 30% { visibility:visible; opacity: 0.8; transform: rotate(0deg) scale(1.04); } 100% { visibility:visible; opacity: 1.0; transform: rotate(0deg); } } ``` ### 試したこと slick.jsの書き方がおかしい？とおもい、無駄なオプションコード消しましたが変わらず。また、keyframe animation部分の書き方がおかしい？と思い、visibility部分など消したりしましたが変わらず。わかる方いれば助けていただけますと幸いです。ここにより詳細な情報を記載してください。

自動車製造に関する組立

半導体製造装置の部品梱包・運搬

スマホ・タブレット製造の検査

食品加工・検品

半導体製造装置の
部品梱包・運搬

	@@ -1 +1 @@
1	- スライダーの２周目のアニメーションがおかしい
1	+ slickスライダーの２周目のアニメーションがおかしい

質問編集履歴