コンポーネント集

スクロールアニメーション23 

<div class="scroll-anim-23" id="js-scroll-anim-23">
    <div class="scroll-anim-23__bg">
        <div class="scroll-anim-23__bg-img"><img src="https://picsum.photos/id/1000/400/400" /></div>
        <div class="scroll-anim-23__bg-img"><img src="https://picsum.photos/id/1001/400/400" /></div>
        <div class="scroll-anim-23__bg-img"><img src="https://picsum.photos/id/1002/400/400" /></div>
        <div class="scroll-anim-23__bg-img"><img src="https://picsum.photos/id/1003/400/400" /></div>
        <div class="scroll-anim-23__bg-img"><img src="https://picsum.photos/id/1004/400/400" /></div>
    </div>
    <div class="scroll-anim-23__items">
        <div class="scroll-anim-23__item">
            <div class="scroll-anim-23__img"><img src="https://picsum.photos/id/1000/400/200" /></div>
            <div class="scroll-anim-23__heading">見出し01</div>
            <div class="scroll-anim-23__content">テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        </div>
        <div class="scroll-anim-23__item">
            <div class="scroll-anim-23__img"><img src="https://picsum.photos/id/1001/400/200" /></div>
            <div class="scroll-anim-23__heading">見出し02</div>
            <div class="scroll-anim-23__content">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        </div>
        <div class="scroll-anim-23__item">
            <div class="scroll-anim-23__img"><img src="https://picsum.photos/id/1002/400/200" /></div>
            <div class="scroll-anim-23__heading">見出し03</div>
            <div class="scroll-anim-23__content">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        </div>
        <div class="scroll-anim-23__item">
            <div class="scroll-anim-23__img"><img src="https://picsum.photos/id/1003/400/200" /></div>
            <div class="scroll-anim-23__heading">見出し04</div>
            <div class="scroll-anim-23__content">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        </div>
        <div class="scroll-anim-23__item">
            <div class="scroll-anim-23__img"><img src="https://picsum.photos/id/1004/400/200" /></div>
            <div class="scroll-anim-23__heading">見出し05</div>
            <div class="scroll-anim-23__content">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        </div>
    </div>
</div>
 
.scroll-anim-23#js-scroll-anim-23
  .scroll-anim-23__bg
    each item in items
      .scroll-anim-23__bg-img
        img(src=item.img)
  .scroll-anim-23__items
    each item in items
      .scroll-anim-23__item
        .scroll-anim-23__img
          img(src=item.spImg)
        .scroll-anim-23__heading #{ item.heading }
        .scroll-anim-23__content !{ item.content }
 
{
  "items": [
    {
      "heading": "見出し01",
      "content": "テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "img": "https://picsum.photos/id/1000/400/400",
      "spImg": "https://picsum.photos/id/1000/400/200"
    },
    {
      "heading": "見出し02",
      "content": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "img": "https://picsum.photos/id/1001/400/400",
      "spImg": "https://picsum.photos/id/1001/400/200"
    },
    {
      "heading": "見出し03",
      "content": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "img": "https://picsum.photos/id/1002/400/400",
      "spImg": "https://picsum.photos/id/1002/400/200"
    },
    {
      "heading": "見出し04",
      "content": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "img": "https://picsum.photos/id/1003/400/400",
      "spImg": "https://picsum.photos/id/1003/400/200"
    },
    {
      "heading": "見出し05",
      "content": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "img": "https://picsum.photos/id/1004/400/400",
      "spImg": "https://picsum.photos/id/1004/400/200"
    }
  ]
}
  • Content: 
    $BLOCK_NAME: '.scroll-anim-23';

// 変数
$duration_default: 0.5s;

#{ $BLOCK_NAME } {
  @include Mq(md) {
    display: flex;
  }

  &__bg {
    position: sticky;
    top: 0;
    display: none;
    @include Mq(md) {
      display: block;
      width: 50%;
      height: 100vh;
    }
  }

  &__bg-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity $duration_default;
    &.is-active {
      opacity: 1;
    }
    & > img {
      width: 100%;
      max-width: 400px;
      height: 100%;
      object-fit: contain;
    }
  }

  &__items {
    @include Mq(md) {
      width: 50%;
    }
  }

  &__item {
    & + & {
      margin-top: 48px;
    }
  }

  &__img {
    max-width: 400px;
    margin: 0 auto 16px;
    @include Mq(md) {
      display: none;
    }
  }

  &__heading {
    font-size: 24px;
  }

  &__content {
    margin-top: 8px;
  }
}
  • URL: /components/raw/scroll-anim23/scroll-anim23.scss
  • Filesystem Path: src/components/scroll-anims/scroll-anim23/scroll-anim23.scss
  • Size: 1.1 KB
  • Content: 
    'use strict';

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

export const scrollAnim23 = () => {
  const anim = new Anim23('js-scroll-anim-23');
  anim.init();
}

class Anim23 {
  el: HTMLElement;
  bgImgEls: NodeListOf<HTMLElement>;
  itemEls: NodeListOf<HTMLElement>;
  constructor(elId: string) {
    this.el = document.getElementById(elId);
    if (!this.el) return;
    this.bgImgEls = this.el.querySelectorAll('.scroll-anim-23__bg-img');
    this.itemEls = this.el.querySelectorAll('.scroll-anim-23__item');
  }

  /**
   * 初期化
   */
  init(): void {
    if (!this.el) return;
    this.scrollHandler();
  }

  /**
   * 表示画像の切り替え
   * @param index 画像の番号
   */
  changeImg(index: number) {
    [...this.bgImgEls].forEach(el => {
      el.classList.remove('is-active');
    });
    this.bgImgEls[index].classList.add('is-active');
  }

  /**
   * スクロール連動のイベント設定
   */
  scrollHandler(): void {
    const self = this;
    [...this.itemEls].forEach((el, index) => {
      ScrollTrigger.create({
        trigger: el,
        start: 'top 70%',
        onEnter() {
          self.changeImg(index);
        },
        onEnterBack() {
          self.changeImg(index);
        },
      });
    });
  }
}
  • URL: /components/raw/scroll-anim23/scroll-anim23.ts
  • Filesystem Path: src/components/scroll-anims/scroll-anim23/scroll-anim23.ts
  • Size: 1.4 KB

No notes defined.