0

我构建了一个使用 GSAP 的 ScrollTrigger 触发的缩放效果，它工作正常，但我想在滚动时缓慢（擦洗）缩放图像，而不是在输入触发器时为滚动缩放设置动画。

我在这里的评论中找到了一个 javascript 解决方案，但我正在寻找一个 GSAP ScrollTrigger 解决方案，但它很好地说明了我在寻找什么：
Zoom an image on scroll with javascript

这是我到目前为止所拥有的：

gsap.to( ".scrollimgzoom", {
    duration: 3,
    scrollTrigger: {
        trigger: ".scrollimgzoom",
        start: "top 70%",
        end: "top 30%",
    scrub: true,
        toggleClass: "scrollimgzoomin",
        markers: {
            startColor: "red",
            endColor: "red"
        }
    }
})
.animate {
  width:100%;
  height:100vh;
}

.scrollimgzoomcontainer {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.scrollimgzoom {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

.scrollimgzoomin {
  transform: scale(1.2);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>

<section class="animate"></section>

<section class="animate three">
    <div class="container">

        <div class="row">
            
      <div class="col-md-4"></div>
      
            <div class="col-md-4">
                <div class="scrollimgzoomcontainer">
                    <div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
                </div>
            </div>
            
            <div class="col-md-4"></div>

        </div>

    </div>
</section>

<section class="animate"></section>

4

1 回答 1

1

实际上解决方案非常简单（感谢 Zack 在我最初问题的评论中），您可以在这里找到它：

gsap.to( ".scrollimgzoom", {
    scale: 2,
    scrollTrigger: {
        trigger: ".scrollimgzoom",
        start: "top 80%",
        end: "top 10%",
                scrub: true,
        toggleClass: "scrollimgzoomin",
        markers: {
            startColor: "red",
            endColor: "red"
        }
    }
})
.animate {
  width:100%;
  height:100vh;
}

.scrollimgzoomcontainer {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.scrollimgzoom {
  width: 100%;
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>

<section class="animate"></section>

<section class="animate three">
    <div class="container">

        <div class="row">
            
      <div class="col-md-4"></div>
      
            <div class="col-md-4">
                <div class="scrollimgzoomcontainer">
                    <div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
                </div>
            </div>
            
            <div class="col-md-4"></div>

        </div>

    </div>
</section>

<section class="animate"></section>

于 2021-08-17T13:24:18.150 回答