今回は、マウスを特定の要素に乗せたら、画像がマウスを追従して表示される機能を実装してみました。JavaScriptを使用し、GSAPでアニメーションをつけています。まずはデモサイトをご覧ください。<a style="color:#ffffff" href="https://ippei-log.conohawing.com/demo/hover-images-stalker/" target="_blank" rel="noopener noreferrer">DEMOサイトはこちら</a><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FvYpMbpM%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DvYpMbpM&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FvYpMbpM&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FvYpMbpM-512.jpg%3Fversion%3D1650717537&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="h7140f5cfa4">GSAP導入</h2><pre><code>/**html**/

 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"&gt;&lt;/script&gt;そ</code></pre><h2 id="hbc3fc5362d">ソースコード一覧</h2><h3 id="hd0e9724409">HTML</h3><pre><code>/**html**/

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;meta name="robots" content="noindex"&gt;
 &lt;title&gt;hover-images-stalker&lt;/title&gt;
 &lt;link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"&gt;
 &lt;link rel="stylesheet" href="css/style.css"&gt;
 &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
 &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
 &lt;link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&amp;family=Zen+Kaku+Gothic+Antique:wght@500;700&amp;display=swap" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;ul id="section"&gt;
 &lt;li class="item"&gt;
 &lt;a href="" class="a"&gt;
 &lt;p&gt;category&lt;/p&gt;
 &lt;div class="text"&gt;
 &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-01&lt;/h2&gt;
 &lt;p&gt;2022.04.18&lt;/p&gt;
 &lt;/div&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li class="item"&gt;
 &lt;a href="" class="a"&gt;
 &lt;p&gt;category&lt;/p&gt;
 &lt;div class="text"&gt;
 &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-02&lt;/h2&gt;
 &lt;p&gt;2022.04.18&lt;/p&gt;
 &lt;/div&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li class="item"&gt;
 &lt;a href="" class="a"&gt;
 &lt;p&gt;category&lt;/p&gt;
 &lt;div class="text"&gt;
 &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-03&lt;/h2&gt;
 &lt;p&gt;2022.04.18&lt;/p&gt;
 &lt;/div&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;li class="item"&gt;
 &lt;a href="" class="a"&gt;
 &lt;p&gt;category&lt;/p&gt;
 &lt;div class="text"&gt;
 &lt;h2&gt;test-ttl-01test-ttl-01test-ttl-04&lt;/h2&gt;
 &lt;p&gt;2022.04.18&lt;/p&gt;
 &lt;/div&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;div class="hover-stalker-img"&gt;&lt;/div&gt;
 &lt;/ul&gt;
&lt;/body&gt;

 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="h20a15eee8c">Scss</h3><pre><code>/**scss**/

/*font-family*/
$family-poppins:'Poppins', sans-serif;
$family-zen-kaku: 'Zen Kaku Gothic Antique', sans-serif;

/*color*/
$gray: rgb(41, 41, 41);
$white: #fff;
$white02:rgba(255, 255, 255, 0.228);
$font-color-ctg: rgb(162, 162, 162);

body {
 font-family: $family-poppins;
 font-family: $family-zen-kaku;
 background-color: $gray;
}

a {
 color: #fff;
 text-decoration: none;
}

li {
 list-style: none;
}

ul {
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 flex-flow: column;
 align-items: center;
 overflow: hidden;
 position: relative;
 li {
 width: 80%;
 margin: 0 auto;
 position: relative;
 z-index: 1;
 a {
 display: flex;
 align-items: center;
 padding: 48px 0;
 position: relative;
 &amp;::before {
 content: "";
 height: 1px;
 width: 100%;
 background-color: $white02;
 display: block;
 position: absolute;
 top: 0;
 }
 &amp;::after {
 content: "";
 height: 2px;
 width: 100%;
 background-color: $white;
 display: block;
 position: absolute;
 top: 0;
 transform: scale(0);
 transform-origin: right center;
 transition: transform 1s cubic-bezier(.19,1,.22,1);
 }
 &gt; p {
 font-size: 16px;
 color: $font-color-ctg;
 margin-right: 5%;
 }
 div {
 h2 {
 font-size: 24px;
 letter-spacing: 0.07em;
 }
 p {
 font-size: 14px;
 color: $font-color-ctg;
 }
 }
 &amp;:hover {
 &amp;::after {
 transform: scale(1);
 transform-origin: left center;
 }
 }
 .hover-img {
 width: 350px;
 height: 350px;
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 z-index: 0;
 opacity: 0;
 img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transform: scale(1.1);
 }
 }
 &amp;.js-active {
 z-index: 2;
 p {
 z-index: 2;
 }
 .text {
 z-index: 2;
 h2 {
 opacity: 1;
 transition: opacity 2s cubic-bezier(.19,1,.22,1);
 }
 }
 }
 }
 }
 .hover-stalker-img {
 position: absolute;
 display: block;
 top: 0;
 left: 0;
 width: 350px;
 height: 350px;
 background-position: 0 0;
 background-size: cover;
 transform: translate(-50%, -50%);
 z-index: 0;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 }
}</code></pre><h3 id="hd148c32f21">JavaScript</h3>コードを部分的に分けて説明します。<pre><code>/**js**/

const wrapper = document.getElementById('section');
wrapper.addEventListener('mouseenter', (e) =&gt; {
 gsap.to(image,{
 opacity: .5,
 visibility: "visible",
 })
})</code></pre>↑「mouseenter」は、マウスが指定した要素内に入った時のアクションを指定します。ここでは、GSAPを使用して、マウスが「#section」に入ったら「image」要素に「opacity: .5;」と「visibility: visible;」を追加します。<pre><code>/**js**/

wrapper.addEventListener('mouseleave', (e) =&gt; {
 gsap.to(image, {
 autoAlpha: 0,
 })
})</code></pre>↑「mouseleave」は、マウスが指定の要素から外に出たら行う動作を指定できます。ここでは、GSAPを使用して、「autoAlpha: 0」で「opacity: 0;」と「visibility: hidden;」を指定しています。<pre><code>/**js**/

const image = document.querySelector('.hover-stalker-img');

wrapper.addEventListener('mousemove', (e) =&gt; {
 gsap.to(image, {
 duration: 2,
 x: e.pageX + 300,
 y: e.pageY - 100,
 ease: "Power4.easeOut",
 })
})</code></pre>↑「mousemove」は、マウスが指定の要素内にある時に行う動作を指定できます。ここでは、「image」要素（マウスを追従する画像）が、少し遅れて追従し、表示位置を少し右上に指定しています。<pre><code>/**js**/

 const items = document.querySelectorAll('.item');
 const imgArr = [
 './images/fashion-01.jpg',
 './images/fashion-02.jpg',
 './images/fashion-04.jpg',
 './images/fashion-13.jpg',
 ];
 items.forEach((item, i) =&gt; {
 item.addEventListener('mouseenter', (e) =&gt; {
 image.style.backgroundImage = `url("${imgArr[i]}")`;
 gsap.set(image, {
 backgroundPosition: "center",
 
 });
 gsap.to(image, {
 repeat: -1,
 ease: "liner",
 });
 })
 })</code></pre>↑最後は、画像を配列に格納してそれぞれの要素にマウスが入ったら取り出す動作を行なっています。「forEach」を使用して、マウスが「.item」に入ったら繰り返し、背景に画像を追加する動作を行なっています。「image.style.backgroundImage =&nbsp;url("${imgArr[i]}");」は、image要素にCSSで背景を設定することを示しています。

JavaScriptとアニメーションライブラリのGSAPを使用してマウスをhoverさせたら、画像が追従する追従アニメーションを実装しました。addEventListenerの「mouseenter」「mouseleave」「mousemove」を使用して、マウスの動作をコントロールします。またgsapを使用することで、簡単にjavascriptを書くことができます。

Javascript

GSAP

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

Locomotive ScrollとGSAPを組み合わせて、スクロールアクションがあるパララックスサイトを実装してみました。locomotive-scrollはparallaxの実装を手助けしてくれるライブラリです。また、数多くのオプションがあるため、アニメーションの幅も広いです。GSAPと併用することで、慣性スクロールや滑らかなアニメーションを実装することができます。

【Locomotive Scroll】と【GSAP】 を使用してパララックスサイトを制作してみた

スクロールアクションを『GSAP』というJavaScriptライブラリの『ScrollTrigger』を使用して実装してみました。スクロールに合わせてテキストや画像が表示されます。まずはデモサイトをご覧ください。<a href="https://ippei-log.conohawing.com/demo/gsap-scrolltrigger/" target="_blank" rel="noopener noreferrer">デモサイトはこちら</a>今回は、スクロールに合わせて、テキストを左から徐々に表示させたり、画像を下からフワッと表示させるアニメーションをかけてみました。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FExoWJzW%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DExoWJzW&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FExoWJzW&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FExoWJzW-512.jpg%3Fversion%3D1648359172&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="h3cb37f0868">アニメーション毎のソースコード テキストが左から右へ徐々に表示される</h2>CSSの「clip-path」を使用して、「GSAP」の「ScrollTrigger」でclassの付け替えを行なっています。HTML<pre><code>/**html**/

&lt;div class="ttl"&gt;
 &lt;h2 class="ttl__clip"&gt;ScrollTrigger&lt;/h2&gt;
 &lt;span class="ttl__clip__line"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>Scss<pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
 @media #{map-get($breakpoint-up,$breakpoint)}{
 @content;
 }
}

$breakpoint-up: (
'bp760':'screen and(max-width:760px)',
)!default;


.ttl {
 display: table;
 margin-left: 5%;
 position: relative;
 &amp;__clip {
 position: relative;
 display: inline-block;
 font-size: clamp(3rem, 4vw ,7rem);
 transition: clip-path .6s cubic-bezier(0.18, 0.06, 0.23, 1) .2s;
 clip-path: inset(0 100% 0 0);
 padding: 0 12px 8px 0;
 &amp;__line {
 height: 2px;
 background-color: #000;
 width: 0;
 display: block;
 opacity: 0;
 position: absolute;
 bottom: 0;
 left: 0;
 &amp;.slid__open {
 width: 100%;
 opacity: 1;
 transition: all .4s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
 }
 }
 &amp;.slid__open {
 clip-path: inset(0);
 }
 }
}</code></pre>JavaScript繰り返し使えるように、「forEach」を使っています。<pre><code>/**js**/

// テキストを徐々に表示させる
gsap.registerPlugin(ScrollTrigger);

const ttl__clips = document.querySelectorAll('.ttl__clip');

ttl__clips.forEach((ttl__clip, index) =&gt; {
 gsap.to(ttl__clip, {
 scrollTrigger: {
 trigger: ttl__clip,
 start: 'top-=300 center+=100',
 end: 'top top-=100',
 }
 });

 ScrollTrigger.create({
 trigger:ttl__clip,
 id: index+1,
 start: 'top center+=300',
 end: 'top top-=100',
 once: true,
 toggleClass: {
 targets: ttl__clip,
 className: 'slid__open',
 },
 });
});

const ttl__clip__lines = document.querySelectorAll('.ttl__clip__line');

ttl__clip__lines.forEach((ttl__clip__line, index) =&gt; {
 gsap.to(ttl__clip__line, {
 scrollTrigger: {
 trigger: ttl__clip__line,
 start: 'top center+=300',
 end: 'top top',
 }
 });

 ScrollTrigger.create({
 trigger:ttl__clip__line,
 id: index+1,
 start: 'top center+=300',
 end: 'top top',
 once: true,
 toggleClass: {
 targets: ttl__clip__line,
 className: 'slid__open',
 },
 });
});</code></pre><h2 id="he118c5a709">テキストがスクロールに合わせて横に動く</h2>スクロールに合わせて左右に横移動します。HTML<pre><code>/**html**/

 &lt;section class="scroll"&gt;
 &lt;div class="scroll__wrap"&gt;
 &lt;p class="scroll__x"&gt;GSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLL&lt;/p&gt;
 &lt;/div&gt;
 &lt;p class="fade__img"&gt;&lt;img src="images/shapelined-_JBKdviweXI-unsplash.jpg" alt=""&gt;&lt;/p&gt;
 &lt;/section&gt;</code></pre>Scss<pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
 @media #{map-get($breakpoint-up,$breakpoint)}{
 @content;
 }
}

$breakpoint-up: (
'bp760':'screen and(max-width:760px)',
)!default;

/*背景テキスト*/
.scroll {
 overflow: hidden;
 padding-top: 20%;
 padding-bottom: 20%;
 &amp;__wrap {
 p {
 font-size: clamp(8rem, 15vw, 16rem);
 font-weight: 900;
 color: #ebe9e9;
 opacity: 0.1;
 -webkit-text-stroke: 1px #000;
 }
 }
}</code></pre>JavaScript<pre><code>/**js**/

// 背景テキストがスクロールに合わせて左へ動く
gsap.fromTo( '.scroll__x', {
 x: "-15.1797px",
},
{
 x: '-1603.18px',
 scrollTrigger: {
 trigger: '.scroll',
 start: 'top center+=300' ,
 end: 'bottom top', 
 scrub: 0.8,
 }
}
);</code></pre><h2 id="hbcb32549b2">背景がスクロールに合わせて左から右へ広がって表示される</h2>HTML<pre><code>/**html**/

&lt;div class="scroll__bg"&gt;
 &lt;span class="scroll__cover"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>Scss<pre><code>/**scss**/

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
 @media #{map-get($breakpoint-up,$breakpoint)}{
 @content;
 }
}

/*背景徐々に表示*/
.scroll__bg {
 position: relative;
 padding: 32px 0 48px;
 display: flex;
 justify-content: space-between;
 @include media(bp760) {
 display: block;
 padding: 15% 0;
 }
 .scroll__cover {
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 background: $color-bg02;
 transform-origin: left;
 width: 100%;
 height: 100%;
 }
 .fade__img {
 width: 50%;
 margin-right: 5%;
 margin-top: 10%;
 @include media(bp760) {
 margin-left: 5%;
 margin-right: 0;
 width: 90%;
 }
 img {
 width: 100%;
 height: auto;
 }
 }
}</code></pre>JavaScript<pre><code>/**js**/

// 背景が徐々に表示
gsap.fromTo('.scroll__cover', {
 x: "0",
 scaleX: 0,
 scaleY: 1,
},
{
 x: '0',
 scaleX: 1,
 scrollTrigger: {
 trigger: '.scroll__bg',
 start: 'top-=350 center+=100',
 end: 'bottom-=400 center+=100',
 scrub: 0.5,
 once: true,
 }
}
)

//下から画像フェードイン
const fadeUps = document.querySelectorAll('.fade__img');

fadeUps.forEach((fadeUp, index) =&gt; {
 gsap.fromTo(fadeUp, {
 autoAlpha: 0,
 y:20,
 },
 {
 autoAlpha: 1,
 y: 0,
 scrollTrigger: {
 trigger: fadeUp,
 start: 'top center+=100',
 end: 'top top',
 // toggleActions: "play pause resume reverse",
 }
 });
 ScrollTrigger.create({
 trigger: fadeUp,
 id: index+1,
 start: 'top center+=100',
 end: 'top top',
 once: true,
 // toggleActions: "play pause resume reverse",
 });
})

// 背景が徐々に表示
gsap.fromTo('.scroll__cover', {
 x: "0",
 scaleX: 0,
 scaleY: 1,
},
{
 x: '0',
 scaleX: 1,
 scrollTrigger: {
 trigger: '.scroll__bg',
 start: 'top-=350 center+=100',
 end: 'bottom-=400 center+=100',
 scrub: 0.5,
 once: true,
 }
}
)

//下から画像フェードイン
const fadeUps = document.querySelectorAll('.fade__img');

fadeUps.forEach((fadeUp, index) =&gt; {
 gsap.fromTo(fadeUp, {
 autoAlpha: 0,
 y:20,
 },
 {
 autoAlpha: 1,
 y: 0,
 scrollTrigger: {
 trigger: fadeUp,
 start: 'top center+=100',
 end: 'top top',
 // toggleActions: "play pause resume reverse",
 }
 });
 ScrollTrigger.create({
 trigger: fadeUp,
 id: index+1,
 start: 'top center+=100',
 end: 'top top',
 once: true,
 // toggleActions: "play pause resume reverse",
 });
})</code></pre><h2 id="h7a1aad4d44">テキストを１文字ずつしたから徐々に表示させる</h2>HTML<pre><code>/**html**/

 &lt;div class="text__up"&gt;
 &lt;span class="text__up__js"&gt;S&lt;/span&gt;
 &lt;span class="text__up__js"&gt;c&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;span class="text__up__js"&gt;o&lt;/span&gt;
 &lt;span class="text__up__js"&gt;l&lt;/span&gt;
 &lt;span class="text__up__js"&gt;l&lt;/span&gt;
 &lt;span class="text__up__js"&gt;T&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;span class="text__up__js"&gt;i&lt;/span&gt;
 &lt;span class="text__up__js"&gt;g&lt;/span&gt;
 &lt;span class="text__up__js"&gt;g&lt;/span&gt;
 &lt;span class="text__up__js"&gt;e&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="text__up text__up__02"&gt;
 &lt;span class="text__up__js"&gt;S&lt;/span&gt;
 &lt;span class="text__up__js"&gt;c&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;span class="text__up__js"&gt;o&lt;/span&gt;
 &lt;span class="text__up__js"&gt;l&lt;/span&gt;
 &lt;span class="text__up__js"&gt;l&lt;/span&gt;
 &lt;span class="text__up__js"&gt;T&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;span class="text__up__js"&gt;i&lt;/span&gt;
 &lt;span class="text__up__js"&gt;g&lt;/span&gt;
 &lt;span class="text__up__js"&gt;g&lt;/span&gt;
 &lt;span class="text__up__js"&gt;e&lt;/span&gt;
 &lt;span class="text__up__js"&gt;r&lt;/span&gt;
 &lt;/div&gt;</code></pre>Scss<pre><code>/**scss**/

//一文字ずつしたから表示
.text__up {
 display: flex;
 justify-content: center;
 margin: 15% auto 16px;
 overflow: hidden;
 span {
 display: block;
 font-size: 3.5rem;
 font-weight: bold;
 letter-spacing: 0.04em;
 }
 &amp;__02 {
 margin: 0 auto 25%;
 span {
 font-size: 1.8rem;
 }
 }
}</code></pre>JavaScript<pre><code>/**js**/

//一文字ずつしたから表示
const text__ups = document.querySelectorAll('.text__up__js');

text__ups.forEach((text__up, i) =&gt; {
 gsap.fromTo(text__up, {
 opacity:0.1,
 y: '110%',
 },
 {
 opacity:1,
 y: 0,
 duration: 0.7,
 delay: i * 0.03,
 scrollTrigger: {
 trigger: '.text__up',
 start: 'top center+=300',
 end: 'top center+=300',
 once: true,
 }
 },
 )
}); </code></pre><h2 id="h406f13db12">画像を下からフワッとスケールしながら表示させる</h2>HTML<pre><code>/**html**/

 &lt;div class="flower"&gt;
 &lt;div class="flower__img flower__img__01 js-fadeup"&gt;
 &lt;img src="images/pink.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="flower__img flower__img__02 js-fadeup"&gt;
 &lt;img src="images/yellow.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="flower__img flower__img__03 js-fadeup"&gt;
 &lt;img src="images/blue.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;div class="grid__img"&gt;
 &lt;div class="grid__img__item grid__img__item__01"&gt;
 &lt;img src="images/hito01.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="grid__img__item grid__img__item__02"&gt;
 &lt;img src="images/hito02.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="grid__img__item grid__img__item__03"&gt;
 &lt;img src="images/hito03.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="grid__img__item grid__img__item__04"&gt;
 &lt;img src="images/hito04.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="grid__img__item grid__img__item__05"&gt;
 &lt;img src="images/hito05.jpg" alt=""&gt;
 &lt;/div&gt;
 &lt;/div&gt;</code></pre>Scss<pre><code>/**scss**/

/*画像が下から表示される*/
.flower {
 padding: 22% 0;
 background-color: $color-white;
 &amp;__img {
 width: 58.04688%;
 position: relative;
 &amp;:nth-child(even) {
 margin: 15% 0 15% auto;
 }
 &amp;__02 {
 width: 41.25%;
 }
 &amp;__03 {
 width: 48.125%;
 margin: {
 left: 8%;
 };
 }
 }
}

.grid__img {
 position: relative;
 display: block;
 background-color: $color-white;
 padding-top: 50%;
 padding-bottom: 20%;
 &amp;__item {
 position: absolute;
 display: block;
 overflow: hidden;
 &amp;::after {
 content: "";
 width: 100%;
 height: 102%;
 background-color: $color-white;
 position: absolute;
 top: 0;
 left: 0;
 transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
 transform: translate3d(0, 0%, 0);
 }
 &amp;.js-after {
 &amp;::after {
 transform: translate3d(0, -102%, 0);
 }
 img {
 opacity: 1;
 transform: scale(1);
 }
 }
 img {
 width: 100%;
 height: 100%;
 display: block;
 opacity: 0;
 transform: scale(1.3);
 transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
 object-fit: cover;
 }
 &amp;__01 {
 top: 0;
 left: 8.28125%;
 width: 25.46875%;
 }
 &amp;__02 {
 width: 42.8125%;
 left: -9.0625%;
 top: 26.25%;
 height: 35%;
 }
 &amp;__03 {
 width: 27.5%;
 left: 35%;
 top: 0;
 height: 74%;
 }
 &amp;__04 {
 width: 25.46875%;
 right: 10.78125%;
 top: 6.58824%;
 }
 &amp;__05 {
 width: 36.4%;
 right: 0;
 top: 33.17647%;
 }
 }
}

.js-fadeup {
 position: relative;
 overflow: hidden;
 &amp;::after {
 content: "";
 width: 100%;
 height: 102%;
 background-color: $color-white;
 position: absolute;
 top: 0;
 left: 0;
 transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
 transform: translate3d(0, 0%, 0);
 }
 &amp;.js-after {
 &amp;::after {
 transform: translate3d(0, -102%, 0);
 }
 img {
 opacity: 1;
 transform: scale(1);
 }
 }
 img {
 width: 100%;
 height: auto;
 display: block;
 opacity: 0;
 transform: scale(1.3);
 transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
 }
 }</code></pre>JavaScript<pre><code>/**js**/

// 画像を下から表示させる
const jsFadeUps = document.querySelectorAll('.js-fadeup');

jsFadeUps.forEach((jsFadeUp, index) =&gt; {
 gsap.to(jsFadeUp, {
 scrollTrigger: {
 trigger: jsFadeUp,
 start: 'top-=200 bottom',
 end: 'bottom top',
 scrub: true,
 }
 });

 ScrollTrigger.create({
 trigger: jsFadeUp,
 start: 'top-=200 bottom',
 end: 'bottom top',
 id: index+1,
 once: true,
 toggleClass: {
 targets: jsFadeUp,
 className: 'js-after',
 }
 })
})

const gridItems = document.querySelectorAll('.grid__img__item');

gridItems.forEach((gridItems, index) =&gt; {
 gsap.to(gridItems, {
 scrollTrigger: {
 trigger: gridItems,
 start: 'top bottom',
 end: 'bottom top',
 scrub: true,
 }
 });

 ScrollTrigger.create({
 trigger: gridItems,
 start: 'top bottom',
 end: 'bottom top',
 id: index+1,
 once: true,
 toggleClass: {
 targets: gridItems,
 className: 'js-after',
 }
 })
})</code></pre>

JavaScriptの軽量アニメーションライブラリのGSAPをしようして、スクロールアニメーションを実装しました。GSAPのScrollTriggerを使用して、スクロールに合わせて、画像がフェードインしたり、テキストがスクロールに合わせて横移動したりするアニメーションを実装しました。

Frontend Engineer Tech Blog

Javascript

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

【Locomotive Scroll】と【GSAP】を使用してパララックスサイトを制作してみた

GSAPのScrollTriggerを使用してスクロールアニメーションを実装してみた

React

GSAP

CSS

jQuery

Javascript

Javascript

【JS | GSAP】マウスを特定の要素に乗せたら、画像が追従する。

【Locomotive Scroll】と【GSAP】 を使用してパララックスサイトを制作してみた

GSAPのScrollTriggerを使用してスクロールアニメーションを実装してみた

React

GSAP

CSS

jQuery

Javascript

【Locomotive Scroll】と【GSAP】を使用してパララックスサイトを制作してみた