10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ZOZOAdvent Calendar 2023

Day 15

GSAP ScrollTriggerでスクロールでカードが重なっていくアニメーションを作る

Last updated at Posted at 2023-12-14

完成イメージ

ezgif-4-6448dec915.gif

Codepen

以下のCodepenでも確認できます!

実装

HTML

<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/hbhFnRzzg6ZDmm8YAmxBnQpQIPh.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">WALL-E<span class="card-description__year">(2010)</span></h1>
      <p> <span class="card-description__genre">Animation</span><span class="card-description__genre">Family</span><span class="card-description__genre">Sci-Fi</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/b4Oe15CGLL61Ped0RAS9JpqdmCt.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Dunkirk<span class="card-description__year">(2017)</span></h1>
      <p> <span class="card-description__genre">Action</span><span class="card-description__genre">Drama</span><span class="card-description__genre">History</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/4jeFXQYytChdZYE9JYO7Un87IlW.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Coraline<span class="card-description__year">(2010)</span></h1>
      <p> <span class="card-description__genre">Animation</span><span class="card-description__genre">Family</span><span class="card-description__genre">Fantasy</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/fSRb7vyIP8rQpL0I47P3qUsEKX3.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Deadpool<span class="card-description__year">(2016)</span></h1>
      <p> <span class="card-description__genre">Action</span><span class="card-description__genre">Adventure</span><span class="card-description__genre">Comedy</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/7PurMm0gUOJZ8Uk0oyuZlt1CKfJ.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Pan's Labyrinth<span class="card-description__year">(2006)</span></h1>
      <p> <span class="card-description__genre">Fantasy</span><span class="card-description__genre">Drama</span><span class="card-description__genre">War</span></p>
    </div>
  </div>
</div>
<div class="spacer"></div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #121212;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #000;
}

.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.card-wrapper:nth-of-type(2n) {
  transform: rotate(3deg);
}
.card-wrapper:nth-of-type(2n+1) {
  transform: rotate(-3deg);
}
.card-wrapper:nth-of-type(3n) {
  transform: rotate(0);
}

.card-contents {
  position: relative;
  width: 300px;
  height: 550px;
  background-color: #000;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

img {
  position: absolute;
  width: 100%;
  height: 80%;
  border-radius: 15px 15px 0 0;
  object-fit: cover;
}

.card-description {
  background: linear-gradient(rgba(0, 0, 0, 0), black);
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 100;
  color: #fff;
  text-align: left;
  line-height: 1;
  margin-left: 20px;
}
.card-description__title {
  font-size: 28px;
}
.card-description__year {
  font-size: 11px;
  margin-left: 10px;
}
.card-description__genre {
  padding: 6px 8px;
  margin-right: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  opacity: 0.7;
  font-size: 10px;
  text-transform: uppercase;
}

.spacer {
  width: 100%;
  height: 100vh;
}

JavaScript

※JQueryとGSAPを使ってます

$(function () {
  let cards = gsap.utils.toArray(".card-wrapper");

  let stickDistance = '100px';

  let lastCardST = ScrollTrigger.create({
    trigger: cards[cards.length - 1],
    start: "bottom bottom"
  });

  cards.forEach((card, index) => {

    ScrollTrigger.create({
      trigger: card,
      start: "center center",
      end: () => lastCardST.start + stickDistance,
      pin: true,
      pinSpacing: false,
      ease: "none",
      toggleActions: "restart none none reverse"
    });
  });
});
10
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?