スクロールすることで回転するギャラリー

rotate.mp4

GSAPというライブラリを使って実装

Homepage | GSAP

実装方法

CDNファイルのリンクをHTML上に貼る

スクリーンショット 2024-12-19 125535.png

１行目：gsapのCDNへのリンク ２行目：Observerというテンプレートへのリンク ３行目：作成したJSへのリンク

HTMLの記述

<div class="carousel">
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
      <div class="carousel-image">
        <img src="images/" alt="cat1" />
      </div>
    </div>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js>"></script>

    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/Observer.min.js>"></script>

    <script src="gasp.js"></script>

HTMLの<body>タグの中に記述 画像ファイルのリンクは自分が使いたいものにする

CSSの記述

body {
  font-family: Roboto, sans-serif;
}

.carousel {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform: rotateX(-20deg) translateY(-70px);
  transform-style: preserve-3d;
  perspective: 800px;
  user-select: none;
  cursor: grab;
}

.carousel-image {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  transform: translate3d(0, 0, -10px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transform-origin: 50% 50%;
}

/* 画像のサイズを設定 */
.carousel-image img {
  width: 200px;
  height: 200px;
}

@media (max-width: 600px) {
  .carousel {
    transform: rotateX(-10deg) scale(0.6) translateY(-60px);
  }
}

自分で選んだ画像を使う場合はサイズを指定する必要がある 画像はHTML上で<div>の中に設置した

JSの記述

const images = document.querySelectorAll('.carousel-image');
const radius = 242;
const progress = {
  value: 0,
};
const carousel = document.querySelector('.carousel');

Observer.create({
  target: carousel,
  type: 'wheel,pointer',
  onPress: (self) => {
    carousel.style.cursor = 'grabbing';
  },
  onRelease: (self) => {
    carousel.style.cursor = 'grab';
  },
  onChange: (self) => {
    gsap.killTweensOf(progress);
    const p = self.event.type === 'wheel' ? self.deltaY * -0.0005 : self.deltaX * 0.05;
    gsap.to(progress, {
      duration: 2,
      ease: 'power4.out',
      value: `+=${p}`,
    });
  },
});

const animate = () => {
  images.forEach((image, index) => {
    const theta = index / images.length - progress.value;
    const x = -Math.sin(theta * Math.PI * 2) * radius;
    const y = Math.cos(theta * Math.PI * 2) * radius;
    image.style.transform = `translate3d(${x}px, 0px, ${y}px) rotateY(${360 * -theta}deg)`;
    const c = Math.floor((index / images.length) * 360);
    image.style.background = `hsla(${c}, 90%, 50%, .5)`;
  });
};
gsap.ticker.add(animate);

コピペして使用

これを使ってページ内に自然に組み込むには、まだまだ勉強が必要そう。