gsap+ScrollTrigger+Observer实现鼠标滚动水平图文列表滚动效果代码-html代码-BFW代码库

gsap+ScrollTrigger+Observer实现鼠标滚动水平图文列表滚动效果代码

代码语言：html

代码描述：gsap+ScrollTrigger+Observer实现鼠标滚动水平图文列表滚动效果代码，鼠标悬浮图片还有放大动画。

代码标签： gsap ScrollTrigger Observer 鼠标滚动水平图文列表

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  display:flex;
  align-items:center;
  color:#fff;
  background:#191814;
  overflow-y:hidden;
}

main {
  display:flex;
  align-items:center;
  flex-direction:row;
  position:absolute;
}

.item {
  width:500px;
  height:400px;
  margin:50px;
  display:block;
  position:relative;
}

.thumb {
  width:500px;
  height:250px;
  overflow:hidden;
  background:#f00;
}

.item-info {
  opacity:0.2;
  letter-spacing:0.2px;
}

.thumb, .txt {
  pointer-events: none;
}

.hit {
  background:rgba(0,0,0,0);
  width:540px;
  height:440px;
  position:absolute;
  top:-20px;
  left:-20px;
}
</style>

  
  
</head>

<body translate="no">
  <main style="opacity:0">
  <div class="item">
    <div class="thumb">
      <img src="https://picsum.photos/id/139/1500/500/" width="750" height="250">
    </div>
    <div class="txt">
      <h2 class="item-head">Lorem Ipsum</h2>
      <div class="item-info">
        Sit amet, consectetur adipisci elit<br>sed eiusmod tempor incidunt
      </div>
    </div>
    <div class="hit"></div>
  </div>
</main>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollTrigger.3.12.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Observer.3.11.4.js"></script>
      <script >
// Attempting to recreate Willy Brauner's very attractive horizontal scroll portfolio: https://willybrauner.com/

const main = document.querySelector('main');
const items = [139, 99, 104, 85, 140, 154, 106]; //different image ids

items.forEach((n, i) => {
  let i.........完整代码请登录后点击上方下载按钮下载查看