コンポーネント集

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

<ul class="scroll-anim-19" id="js-scroll-anim-19">
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1000/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 1"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1000/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1001/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 2"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1001/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1002/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 3"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1002/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1003/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 4"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1003/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1004/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 5"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1004/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1005/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 6"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1005/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1006/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 7"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1006/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1012/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 8"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1012/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1008/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 9"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1008/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1009/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 10"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1009/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1010/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 11"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1010/400/200" /></a></li>
    <li><a class="scroll-anim-19__item" href="https://picsum.photos/id/1011/800/400" data-lightbox="SCROLL ANIM 19" data-title="Image 12"><img class="scroll-anim-19__img" src="https://picsum.photos/id/1011/400/200" /></a></li>
</ul>
 
ul.scroll-anim-19#js-scroll-anim-19
  each item in items
    li
      a.scroll-anim-19__item(href=item.imgModal, data-lightbox='SCROLL ANIM 19', data-title=item.title)
        img.scroll-anim-19__img(src=item.img)
 
{
  "items": [
    {
      "img": "https://picsum.photos/id/1000/400/200",
      "imgModal": "https://picsum.photos/id/1000/800/400",
      "title": "Image 1"
    },
    {
      "img": "https://picsum.photos/id/1001/400/200",
      "imgModal": "https://picsum.photos/id/1001/800/400",
      "title": "Image 2"
    },
    {
      "img": "https://picsum.photos/id/1002/400/200",
      "imgModal": "https://picsum.photos/id/1002/800/400",
      "title": "Image 3"
    },
    {
      "img": "https://picsum.photos/id/1003/400/200",
      "imgModal": "https://picsum.photos/id/1003/800/400",
      "title": "Image 4"
    },
    {
      "img": "https://picsum.photos/id/1004/400/200",
      "imgModal": "https://picsum.photos/id/1004/800/400",
      "title": "Image 5"
    },
    {
      "img": "https://picsum.photos/id/1005/400/200",
      "imgModal": "https://picsum.photos/id/1005/800/400",
      "title": "Image 6"
    },
    {
      "img": "https://picsum.photos/id/1006/400/200",
      "imgModal": "https://picsum.photos/id/1006/800/400",
      "title": "Image 7"
    },
    {
      "img": "https://picsum.photos/id/1012/400/200",
      "imgModal": "https://picsum.photos/id/1012/800/400",
      "title": "Image 8"
    },
    {
      "img": "https://picsum.photos/id/1008/400/200",
      "imgModal": "https://picsum.photos/id/1008/800/400",
      "title": "Image 9"
    },
    {
      "img": "https://picsum.photos/id/1009/400/200",
      "imgModal": "https://picsum.photos/id/1009/800/400",
      "title": "Image 10"
    },
    {
      "img": "https://picsum.photos/id/1010/400/200",
      "imgModal": "https://picsum.photos/id/1010/800/400",
      "title": "Image 11"
    },
    {
      "img": "https://picsum.photos/id/1011/400/200",
      "imgModal": "https://picsum.photos/id/1011/800/400",
      "title": "Image 12"
    }
  ]
}
  • Content: 
    $BLOCK_NAME: '.scroll-anim-19';

// 変数
$duration_default: 0.7s;

#{ $BLOCK_NAME } {
  display: flex;
  flex-wrap: wrap;

  & > li {
    width: 50%;
    opacity: 0;
    @include Mq(md) {
      width: calc(100% / 3);
    }
    @include Mq(lg) {
      width: 25%;
    }
  }

  &__item {
    display: block;
    overflow: hidden;
  }

  &__img {
    width: 100%;
    filter: grayscale(1);
    transition: all $duration_default;
    @at-root #{ $BLOCK_NAME }__item:hover & {
      filter: grayscale(0);
      transform: scale(1.1);
    }
  }
}
  • URL: /components/raw/scroll-anim19/scroll-anim19.scss
  • Filesystem Path: src/components/scroll-anims/1_20/scroll-anim19/scroll-anim19.scss
  • Size: 578 Bytes
  • Content: 
    'use strict';

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

export const scrollAnim19 = () => {
  const anim = new Anim19('js-scroll-anim-19');
  anim.init();
}

class Anim19 {
  el: HTMLElement;
  constructor(elId: string) {
    this.el = document.getElementById(elId);
    if (!this.el) return;
  }

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

  /**
   * ギャラリー表示
   */
  animate(): void {
    const elWidth = this.el.clientWidth;
    const itemWidth = this.el.children[0].clientWidth - 1;
    const colNum = Math.floor(elWidth / itemWidth);
    const rowNum = Math.ceil(this.el.children.length / colNum);
    gsap.to(this.el.children, {
      duration: 2,
      opacity: 1,
      stagger: {
        grid: [rowNum, colNum],
        each: .1,
      },
    });
  }

  /**
   * スクロール連動のイベント設定
   */
  scrollHandler(): void {
    ScrollTrigger.create({
      trigger: this.el,
      start: 'top 70%',
      onEnter: self => {
        this.animate();
        self.kill();
      },
    });
  }
}
  • URL: /components/raw/scroll-anim19/scroll-anim19.ts
  • Filesystem Path: src/components/scroll-anims/1_20/scroll-anim19/scroll-anim19.ts
  • Size: 1.3 KB

No notes defined.