特效描述:图片对角线 滚动鼠标。js,图片对角线,滚动鼠标图片滚动
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src='js/gsap.min.js'></script> <script src='js/ScrollTrigger.min.js'></script> <script src="js/script.js"></script>
3. HTML代码
<div id="scroll-container"> <div id="container"> <div class="module"> <img src="img/1.jpg" alt="image 1"> <p>Image 1</p> </div> <div class="module"> <img src="img/2.jpg" alt="image 2" /> <p>Image 2</p> </div> <div class="module"> <img src="img/3.jpg" alt="image 3" /> <p>Image 3</p> </div> <div class="module"> <img src="img/4.jpg" alt="image 4" /> <p>Image 4</p> </div> <div class="module"> <img src="img/5.jpg" alt="image 5" /> <p>Image 5</p> </div> <div class="module"> <img src="img/6.jpg" alt="image 6" /> <p>Image 6</p> </div> <div class="module"> <img src="img/7.jpg" alt="image 6" /> <p>Image 7</p> </div> </div> </div>