<p>今回は、マウスを特定の要素に乗せたら、画像がマウスを追従して表示される機能を実装してみました。JavaScriptを使用し、GSAPでアニメーションをつけています。</p><p>まずはデモサイトをご覧ください。</p><p><a style="color:#ffffff" href="https://ippei-log.conohawing.com/demo/hover-images-stalker/" target="_blank" rel="noopener noreferrer">DEMOサイトはこちら</a></p><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><p><br></p><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><p>コードを部分的に分けて説明します。</p><pre><code>/**js**/

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

wrapper.addEventListener('mouseleave', (e) =&gt; {
  gsap.to(image, {
    autoAlpha: 0,
  })
})</code></pre><p>↑<strong style="color:#353535">「mouseleave」</strong>は、マウスが指定の要素から外に出たら行う動作を指定できます。ここでは、GSAPを使用して、<strong style="color:#353535">「autoAlpha: 0」</strong>で「opacity: 0;」と「visibility: hidden;」を指定しています。</p><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><p>↑<strong>「mousemove」</strong>は、マウスが指定の要素内にある時に行う動作を指定できます。ここでは、「image」要素（マウスを追従する画像）が、少し遅れて追従し、表示位置を少し右上に指定しています。</p><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><p>↑最後は、画像を配列に格納してそれぞれの要素にマウスが入ったら取り出す動作を行なっています。「forEach」を使用して、マウスが「.item」に入ったら繰り返し、背景に画像を追加する動作を行なっています。<strong style="color:#353535">「image.style.backgroundImage =&nbsp;</strong><strong>url("${imgArr[i]}")</strong><strong style="color:#353535">;」</strong>は、image要素にCSSで背景を設定することを示しています<span style="color:#353535">。</span></p>

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

Javascript

GSAP

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

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

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

<p>スクロールアクションを『GSAP』というJavaScriptライブラリの『ScrollTrigger』を使用して実装してみました。スクロールに合わせてテキストや画像が表示されます。</p><p>まずはデモサイトをご覧ください。</p><p><a href="https://ippei-log.conohawing.com/demo/gsap-scrolltrigger/" target="_blank" rel="noopener noreferrer">デモサイトはこちら</a></p><p>今回は、スクロールに合わせて、テキストを左から徐々に表示させたり、画像を下からフワッと表示させるアニメーションをかけてみました。</p><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><p><br></p><h2 id="h3cb37f0868">アニメーション毎のソースコード<br>テキストが左から右へ徐々に表示される</h2><p>CSSの「clip-path」を使用して、「GSAP」の「ScrollTrigger」でclassの付け替えを行なっています。</p><p><strong style="color:#353535">HTML</strong></p><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><p><strong>Scss</strong></p><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><p><strong>JavaScript</strong></p><p>繰り返し使えるように、「forEach」を使っています。</p><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><p>スクロールに合わせて左右に横移動します。</p><p><strong style="color:#353535;background-color:#ffffff">HTML</strong></p><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><p><strong>Scss</strong></p><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><p><strong>JavaScript</strong></p><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><p><strong>HTML</strong></p><pre><code>/**html**/

&lt;div class="scroll__bg"&gt;
    &lt;span class="scroll__cover"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre><p><strong>Scss</strong></p><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><p><strong>JavaScript</strong></p><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><p><strong>HTML</strong></p><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><p><strong>Scss</strong></p><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><p><strong>JavaScript</strong></p><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><p><strong>HTML</strong></p><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><p><strong>Scss</strong></p><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><p><strong>JavaScript</strong></p><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><p><br></p>

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

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

Web制作で使用する頻度が高い実装をjQueryを使わずに、素のJavaScriptで実装してみました。しょーごログさんのものを参考にさせてもらいましたので、アクセシビリティなども考慮したものとなっています。

JavaScriptでWeb制作でよく使用するパーツを実装してみた

<p>完成イメージ</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FxxPjBKr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DxxPjBKr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr-512.jpg%3Fversion%3D1645581725&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><p><br></p><p>今回は【anime.js】について、ローディング画面でSVG画像の線画アニメーションを実装しながら学習していきます。</p><h2 id="h8c604f82e7">anime.jsの使い方</h2><p><span style="font-size: 1.5em">CDN</span></p><pre><code>/**html**/

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"&gt;&lt;/script&gt;</code></pre><p><a href="https://cdnjs.com/libraries/animejs" target="_blank" rel="noopener noreferrer">CDNのサイトはこちら</a></p><p><span style="font-size: 1.5em">ファイルをダウンロードして使う</span></p><p>GitHubの「Code」の「Download Zip」よりダウンロードします。</p><p>解凍し、anime.min.jsを使用します。</p><p><a href="https://github.com/juliangarnier/anime/" target="_blank" rel="noopener noreferrer">GitHubページはこちら</a></p><h2 id="h5c5564d5f4">基本的なコードの書き方</h2><p>まずは、HTMLでアニメーションをつけたいものを書きます。</p><pre><code>/**html**/

&lt;div id="anime-js"&gt;&lt;/div&gt;</code></pre><p>次にCSSで装飾します。</p><pre><code>/**css**/

#anime-js {
&nbsp;width: 200px;
&nbsp;height: 200px;
&nbsp;background-color: #000;
}</code></pre><p>最後にJavascriptでanime.jsを実装します。</p><p><a href="https://tr.you84815.space/animejs/index.html" target="_blank" rel="noopener noreferrer">anime.js-にほんご</a></p><pre><code>/**js**/

anime({
//このなかにパラメーターを記述していきます。
});</code></pre><h2 id="hfe85b22d67">SVG画像で線画アニメーションローディング画面を実装する</h2><p>ローディング画面でSVG画像を使用して、徐々にロゴの線が見えてきて表示されるアニメーションになります。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fembed%2Fpreview%2FxxPjBKr%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DxxPjBKr&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr&image=https%3A%2F%2Fshots.codepen.io%2Fippei-shimizu%2Fpen%2FxxPjBKr-512.jpg%3Fversion%3D1645581725&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><p>〜参考にしたサイト〜</p><ul><li><a href="https://raccoonico.com/animejs-linedraw/" target="_blank" rel="noopener noreferrer">anime.jsを使ってSVGロゴを線画アニメーションで表示する方法</a></li><li><a href="http://smile-design.bz/news_blog/2016/03/05/anai024/" target="_blank" rel="noopener noreferrer">アニメーション終了後にサイトを表示させる方法</a></li><li><a href="https://tr.you84815.space/animejs/" target="_blank" rel="noopener noreferrer">anime.js - にほんご。</a></li></ul><p>最後にソースコードを載せておきます。</p><h3 id="hd0e9724409">HTML</h3><pre><code>/**html**/

&lt;body&gt;
&nbsp; &lt;div class="loading__svg" id="loading"&gt;
&lt;!--お好きなSVG画像をのせてください（SVG画像の作り方は上記の参考URLに掲載されています）--&gt;
&nbsp; &nbsp; &lt;svg version="1.1" id="svg__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514 112" style="enable-background:new 0 0 514 112;" xml:space="preserve"&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-01" class="fill" style="fill:#3A3A3A;" d="M100.978,58.535c0-8.891,5.927-19.797,21.514-19.797
	c13.039,0,20.981,8.001,20.981,18.848c0,11.556-8.12,20.625-21.455,20.625C107.141,78.21,100.978,67.483,100.978,58.535z
	 M135.767,59.482c0-10.729-6.163-18.077-14.817-18.077c-5.809,0-12.328,2.964-12.328,15.41c0,10.312,5.631,18.61,15.468,18.61
	C127.708,75.425,135.767,73.943,135.767,59.482z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-02" class="fill" style="fill:#3A3A3A;" d="M160.146,40.455c0-1.126,0.178-1.836,0.77-1.836c0.534,0,1.007,0.592,1.897,1.482
	c0.948,0.829,7.882,8.001,16.358,15.943c3.852,3.673,10.49,10.43,11.438,11.26l-0.474-21.93c-0.06-3.021-0.475-4.029-1.897-4.562
	c-0.77-0.238-1.956-0.238-2.667-0.297c-0.652,0-0.889-0.297-0.889-0.594c0-0.415,0.593-0.474,1.304-0.474
	c2.608,0,5.275,0.177,6.579,0.177c0.652,0,2.785-0.177,5.274-0.177c0.652,0,1.126,0.12,1.126,0.535c0,0.295-0.237,0.533-0.888,0.533
	c-0.534,0.059-0.948,0.059-1.482,0.179c-1.541,0.415-2.015,1.421-2.074,4.265c-0.237,7.586-0.356,20.803-0.534,31.353
	c0,1.364-0.296,1.838-0.77,1.838c-0.652,0-1.422-0.651-2.548-1.659c-3.319-3.025-9.661-9.127-14.58-13.87
	c-5.216-4.86-11.024-11.024-12.447-12.506l0.534,20.566c0.118,3.854,0.711,5.098,1.778,5.452c0.889,0.297,1.897,0.297,2.786,0.358
	c0.534,0,0.889,0.177,0.889,0.474c0,0.415-0.475,0.592-1.186,0.592c-3.082,0-5.156-0.177-6.519-0.177
	c-0.652,0-3.378,0.177-5.927,0.177c-0.652,0-1.126-0.057-1.126-0.533c0-0.297,0.296-0.533,0.829-0.533
	c0.652-0.061,1.541-0.061,2.252-0.238c1.482-0.415,1.719-1.718,1.778-6.104C159.849,59.482,160.146,47.094,160.146,40.455z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-03" class="fill" style="fill:#3A3A3A;" d="M217.518,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
	c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
	c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
	c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
	c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
	c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
	c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
	c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
	c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
	c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
	c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
	c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
	c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
	c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
	c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
	c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-04" class="fill" style="fill:#3A3A3A;" d="M254.471,76.907c-0.829-0.356-1.007-0.711-1.007-1.72c0-3.023,0.178-5.985,0.237-6.875
	c0.06-0.829,0.238-1.305,0.652-1.305c0.474,0,0.534,0.417,0.593,0.831c0.059,0.652,0.059,1.541,0.356,2.37
	c1.066,3.852,4.327,5.454,7.704,5.454c4.741,0,6.876-2.905,6.876-5.513c0-2.37-0.711-4.623-5.097-7.822l-2.489-1.898
	c-5.868-4.444-7.764-7.822-7.764-11.971c0-5.572,4.8-9.721,12.209-9.721c2.371,0,3.793,0.297,5.275,0.535
	c0.829,0.118,1.541,0.297,2.133,0.354c0.475,0.061,0.593,0.297,0.593,0.652c0,0.831-0.237,2.252-0.237,6.283
	c0,1.126-0.178,1.541-0.593,1.541c-0.356,0-0.534-0.356-0.593-1.008c-0.06-0.651-0.415-2.073-1.186-3.2
	c-0.888-1.364-2.548-2.667-5.927-2.667c-3.911,0-6.163,2.134-6.163,5.037c0,2.193,1.066,4.149,5.334,7.054l1.66,1.126
	c6.638,4.505,8.771,8.001,8.771,12.802c0,3.082-1.304,6.578-5.097,8.948c-2.667,1.6-5.69,2.015-8.416,2.015
	C259.095,78.21,256.723,77.854,254.471,76.907z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-05" class="fill" style="fill:#3A3A3A;" d="M293.552,54.03c0-7.706,0-8.891-0.118-10.55c-0.119-1.661-0.652-2.49-1.779-2.728
	c-0.534-0.118-1.185-0.177-1.837-0.236c-0.534,0-0.83-0.179-0.83-0.594c0-0.297,0.356-0.474,1.186-0.474
	c2.073,0,5.63,0.177,6.934,0.177c1.185,0,4.682-0.177,6.697-0.177c0.711,0,1.008,0.177,1.008,0.474c0,0.415-0.297,0.594-0.83,0.594
	c-0.533,0.059-0.77,0.059-1.363,0.179c-1.422,0.236-1.838,1.124-1.956,2.844c-0.178,1.6-0.178,2.785-0.178,10.491v8.889
	c0,4.742,0.059,8.593,0.296,10.727c0.119,1.364,0.534,2.431,2.074,2.608c0.77,0.177,1.482,0.177,2.252,0.238
	c0.652,0,0.889,0.297,0.889,0.533c0,0.356-0.415,0.533-1.007,0.533c-3.497,0-6.876-0.177-8.12-0.177
	c-1.007,0-4.564,0.177-6.638,0.177c-0.711,0-1.067-0.177-1.067-0.533c0-0.236,0.237-0.533,0.889-0.533
	c0.711-0.061,1.126-0.061,1.6-0.179c1.008-0.236,1.482-1.126,1.601-2.549c0.296-2.132,0.296-5.926,0.296-10.845V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-06" class="fill" style="fill:#3A3A3A;" d="M338.576,62.919c0,4.505,0,8.475,0.237,10.668c0.178,1.364,0.474,2.49,2.074,2.667
	c0.71,0.12,1.778,0.177,2.548,0.238c0.593,0,0.889,0.236,0.889,0.474c0,0.356-0.356,0.592-1.067,0.592
	c-3.437,0-7.053-0.177-8.357-0.177c-1.185,0-4.8,0.177-6.816,0.177c-0.711,0-1.066-0.236-1.066-0.592
	c0-0.238,0.237-0.474,0.888-0.474c0.711-0.061,1.304-0.061,1.779-0.179c1.126-0.236,1.422-1.303,1.6-2.785
	c0.237-2.134,0.237-5.928,0.237-10.609V42.413c-1.956,0-5.868,0-8.238,0.177c-3.023,0.238-3.912,0.476-4.624,1.779
	c-0.355,0.652-0.474,1.067-0.711,1.661c-0.119,0.354-0.297,0.592-0.593,0.592c-0.356,0-0.475-0.297-0.475-0.888
	c0.059-1.067,1.007-5.277,1.126-5.928c0.119-0.711,0.297-1.067,0.593-1.067c0.415,0,0.889,0.474,2.193,0.592
	c1.422,0.179,3.555,0.297,5.334,0.297h20.98c1.66,0,2.786-0.177,3.556-0.297c0.77-0.118,1.186-0.236,1.482-0.236
	c0.356,0,0.415,0.297,0.415,1.185c0,1.008-0.237,4.682-0.237,5.986c-0.059,0.533-0.178,0.829-0.534,0.829
	c-0.415,0-0.474-0.297-0.534-1.008c0-0.177-0.059-0.415-0.059-0.651c-0.119-1.364-1.363-2.728-5.749-2.785
	c-1.423-0.12-3.615-0.179-6.875-0.238V62.919z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-07" class="fill" style="fill:#3A3A3A;" d="M370.135,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
	c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
	c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
	c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
	c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
	c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
	c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
	c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
	c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
	c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
	c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
	c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
	c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
	c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
	c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
	c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" /&gt;
&nbsp; &nbsp; &nbsp; &lt;path id="logo-08_00000084499578657878502800000017466474858017815451_" class="fill" style="fill:#3A3A3A;" d="M408,78v-9h9v9H408z" /&gt;
&nbsp; &nbsp; &lt;/svg&gt;
&nbsp; &lt;/div&gt;


&nbsp; &lt;div class="main" id="loadingOut"&gt;
&nbsp; &nbsp; &lt;p&gt;ローディング後に表示されるページ&lt;/p&gt;
&nbsp; &lt;/div&gt;
&lt;/body&gt;</code></pre><h2 id="hb704ab42a8">SCSS</h2><pre><code>/**scss**/

.loading__svg {
&nbsp; background-color: #fcfcfc;
&nbsp; width: 100%;
&nbsp; height: 100vh;
&nbsp; position: relative;
&nbsp; #svg__logo {
&nbsp; &nbsp; position: absolute;
&nbsp; &nbsp; top: 50%;
&nbsp; &nbsp; left: 50%;
&nbsp; &nbsp; transform: translate(-50%, -50%);
&nbsp; &nbsp; width: 60%;
&nbsp; &nbsp; min-width: 200px;
&nbsp; &nbsp; height: auto;
&nbsp; }
&nbsp; #loading__svg,
&nbsp; .fill {
&nbsp; &nbsp; fill: transparent;
&nbsp; &nbsp; stroke-width: 1px;
&nbsp; &nbsp; stroke: #3a3a3a;
&nbsp; }
}


#loadingOut {
&nbsp; width: 100%;
&nbsp; text-align: center;
&nbsp; height: 100vh;
&nbsp; background-color: #000;
&nbsp; p {
&nbsp; &nbsp; padding-top: 50vh;
&nbsp; &nbsp; font-size: 16px;
&nbsp; &nbsp; color: #fff;
&nbsp; &nbsp; margin: 0;
&nbsp; }
}</code></pre><h2 id="hd148c32f21">JavaScript</h2><pre><code>/**js**/

const logo = document.getElementById("svg__logo");//定数にid:svg__logoを定義します

window.onload = function () {&nbsp; &nbsp; &nbsp;//画面を読み込み後にアニメーションを始める
&nbsp; let timeline = anime.timeline({&nbsp; &nbsp;//timelineは、複数のアニメーションを同期させることができる。デフォルトでは、前のアニメーションが終了次第次のアニメーションが始まる&nbsp;
&nbsp; &nbsp; targets: ".fill",&nbsp; &nbsp; &nbsp; //アニメーションをかける要素を指定
&nbsp; &nbsp; direction: "normal",&nbsp; &nbsp;//アニメーションの方向を指定
&nbsp; &nbsp; loop: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //アニメーションをループさせるかどうか
&nbsp; });
&nbsp; //線画のアニメーション
&nbsp; timeline.add({
&nbsp; &nbsp; strokeDashoffset: [anime.setDashoffset, 0],&nbsp; &nbsp; //svg画像に線画アニメーションを指定する
&nbsp; &nbsp; easing: "easeInOutSine",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//アニメーションスピードの緩急
&nbsp; &nbsp; fill: ["transparent", "transparent"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; duration: 400,
&nbsp; &nbsp; delay: function (el, i) {
&nbsp; &nbsp; &nbsp; return i * 250;
&nbsp; &nbsp; }
&nbsp; });
&nbsp; //塗りつぶしアニメーション
&nbsp; timeline.add(
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; easing: "easeInOutSine",
&nbsp; &nbsp; &nbsp; fill: ["transparent", "#3a3a3a"],
&nbsp; &nbsp; &nbsp; duration: 700
&nbsp; &nbsp; },
&nbsp; &nbsp; "-=200"
&nbsp; );
};


//ローディング画面を〜秒後にフェードアウトさせる
$(function () {
&nbsp; $("#loadingOut").css("display", "none");//ローディング後に表示されるページの消しておきます


&nbsp; setTimeout(function () {
&nbsp; &nbsp; $("#loading").fadeOut();
&nbsp; }, 2600); //2.6秒後にローディング画面をフェードアウトさせます
});


//ローディング終了後にページを表示させる
$(function () {
&nbsp; $("#loadingOut").css({ opacity: "0" });　//ローディング後に表示させるページを見えなくしておきます
&nbsp; setTimeout(function () {
&nbsp; &nbsp; $("#loadingOut").css("display", "block");
&nbsp; &nbsp; $("#loadingOut").stop().animate({ opacity: "1" }, 1000);
&nbsp; }, 2600); //ローディング終了後にページを表示させる
});</code></pre><p><br></p>

anime.jsを使用した、SVG画像の線画アニメーションをローディング画面と一緒に実装しました。anime.jsは軽量なアニメーションライブラリです。また、SVG画像の線画アニメーションもアレンジを加えることで沢山の種類のアニメーションを実装することができます。

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

<p>モーダルウィンドウ内で画像のスライドショーを実装する【Colorbox】についてまとめました。</p><p>Colorboxはモーダルウィンドウを簡単に実装できるプラグインになります。</p><p>まずは、簡単なデモを作りました。</p><p><a href="https://ippei-log.conohawing.com/demo/demo-colorbox/" target="_blank" rel="noopener noreferrer">デモページはこちら</a></p><h2 id="hb04428dbc6">公式サイトからファイルをダウンロードする</h2><p>Colorboxの公式サイトから必要なファイルを一式ダウンロードします。</p><p>そして、今回はその中から</p><p><strong>・jquery.colorbox-min.js</strong></p><p><strong>・colorbox.css</strong></p><p>を制作中のディレクトリ内へ配置します。</p><p><a href="https://www.jacklmoore.com/colorbox/" target="_blank" rel="noopener noreferrer">Colorbox公式サイトはこちら</a></p><h2 id="h1ccf1bfca3">各ファイル読み込み</h2><p>jQueryを使用するので、CDNで読み込んでいます。</p><p>&lt;link rel="stylesheet" href="css/colorbox.css"&gt;</p><pre><code>//***html***//

&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;</code></pre><h2 id="hd0e9724409">HTML</h2><p>aタグのhrefにモーダルで表示させたい画像のパスを記入します。また、aタグにclassを指定しそのクラスにオプションをつけていきます。このクラスごとにモーダル内でスライドショーに出る画像が決まります。</p><pre><code>/**html**/

&lt;body&gt;
&nbsp;&lt;div class="gallery_area"&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/luca-bravo-VowIFDxogG4-unsplash.jpg"&gt;&lt;img src="images/luca-bravo-VowIFDxogG4-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg"&gt;&lt;img src="images/sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/srinivasan-venkataraman-9NmYCjfBGp0-unsplash.jpg"&gt;&lt;img src="images/srinivasan-venkataraman-9NmYCjfBGp0-unsplash.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&gt;&lt;a class="group1" href="images/staircase-g0f6d8865e_640.jpg"&gt;&lt;img src="images/staircase-g0f6d8865e_640.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp;&lt;/div&gt;
&lt;/body&gt;</code></pre><h2 id="hd148c32f21">JavaScript</h2><p>先ほどaタグにつけたクラスに対して、Colorboxのオプションをつけていきます。今回は、レスポンシブに対応するために、</p><p>・maxWidth:"90%", maxHeight:"90%"</p><p>画像をクリックしてモーダルが表示させるまでの時間を、</p><p>・speed:100</p><p>モーダルを固定するために、</p><p>・fixed:true</p><p>を使用しています。</p><p><a href="https://cly7796.net/blog/javascript/plugin-jquery-colorbox/" target="_blank" rel="noopener noreferrer">その他オプションはこちら</a></p><pre><code>//**モーダルウィンドウ**//
$(document).ready(function(){
&nbsp;$(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%",speed:100,fixed:true});
&nbsp;});</code></pre><h2 id="hc0b6caf95e">colorbox.css</h2><p>既存のCSSをかなりアレンジしてあります。ダウンロードしたファイル内のimagesファイルにある画像を使用すれば、矢印やクローズアイコンなどはそのまま使用可能です。</p><p>今回は、自分で制作したアイコンを使用しています。</p><pre><code>/*
&nbsp;&nbsp;Colorbox Core Style:
&nbsp;&nbsp;The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;background-color:#000000e3;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*&nbsp;
&nbsp;&nbsp;User Style:
&nbsp;&nbsp;Change the following styles to modify the appearance of Colorbox.&nbsp;They are
&nbsp;&nbsp;ordered &amp; tabbed in a way that represents the nesting of the generated HTML.
*/
#colorbox{outline:0;}
&nbsp;&nbsp;&nbsp;&nbsp;.cboxIframe{background:#fff;}
#cboxCurrent{display:none;}

&nbsp;&nbsp;&nbsp;&nbsp;/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
&nbsp;&nbsp;&nbsp;&nbsp;#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
&nbsp;&nbsp;&nbsp;&nbsp;#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

&nbsp;&nbsp;&nbsp;&nbsp;#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious {
	position: absolute;
	top: 50%;
	left:-80px;
	transform: translatey(-50%);
	width: 55px;
	height: 90px;
	background-image: url(../images/yazirushi.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#cboxNext {
	position: absolute;
	top: 50%;
	right:-80px;
	transform: translatey(-50%) rotate(180deg);
	width: 55px;
	height: 90px;
	background-image: url(../images/yazirushi.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#cboxClose {
	position: absolute;
	top: 0;
	right:-80px;
	width: 60px;
	height: 60px;
	background-image: url(../images/close.png);
	background-position: center;
	background-repeat:no-repeat;
	background-size: 75%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

/*
&nbsp;The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
&nbsp;when an alpha filter (opacity change) is set on the element or ancestor element.&nbsp;This style is not applied to or needed in IE9.
&nbsp;See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
&nbsp;&nbsp;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media screen and (max-width: 1000px) {
	#cboxPrevious {
		left:0px;
	}
	#cboxNext,#cboxClose {
		right: 0px;
	}
	#cboxClose {
		top: -65px;
	}&nbsp;
}</code></pre><p><br></p><p><br></p><p><br></p><p><br></p>

モーダルウィンドウ内で画像のスライドショーを実装する【Colorbox】についてまとめました。
Colorboxはモーダルウィンドウを簡単に実装できるプラグインになります。

Frontend Engineer Tech Blog

Javascript

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

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

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

JavaScriptでWeb制作でよく使用するパーツを実装してみた

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

【Colorbox】モーダルウィンドウ内で画像のスライドショーを実装できる

React

GSAP

CSS

jQuery

Javascript

Javascript

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

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

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

JavaScriptでWeb制作でよく使用するパーツを実装してみた

【anime.js】 SVG画像で線画アニメーションローディング画面を実装する

【Colorbox】モーダルウィンドウ内で画像のスライドショーを実装できる

React

GSAP

CSS

jQuery

Javascript

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