###実現したい事下記のサイトを参考にスクロールアニメーションを実装しました。あるスクロールして要素が表示されると、アニメーション付きで表示されます。 https://firstlayout.net/css-animation-of-images/ 参考サイトのようにうまく実装はできたのですが、指定したclass全てに適用となり、 eachで繰り返しているそのclassを保有する全ての要素に対しアニメーションが発生してしまいます。おそらく、thisなどを使い、そのクラスのthis（その要素）に対しという支持が必要かと思いますが、js部分でどのようにすれば良いか把握できずにいます。 ###コード ```view

<% @articles.each do |article| %>

<%= image_tag article.image_name.thumb.url %>

<%= article.title %>

<% end %>

``` ```js $(document).on('turbolinks:load',function() { const image = document.querySelectorAll('.index-left'); const observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.intersectionRatio > 0) { entry.target.classList.add('img-animation'); } else { entry.target.classList.remove('img-animation'); } }); }); Array.prototype.forEach.call(image, function(img) { observer.observe(img); }); })(); ``` ```css .article-img { animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1); overflow: hidden; position: relative; } .article-img:before { animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards; background: #fff; bottom: 0; content: ''; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 1; } @keyframes img-opacity { 0% { opacity: 0; } } @keyframes img-animation { 100% { transform: translateX(100%); } } ``` お分かりの方いましたらご教示お願いします。

	@@ -1 +1 @@
1	- スクロールアニメーションを
1	+ スクロールアニメーションがうまくできない

質問編集履歴