gsap+ScrollTrigger实现滚动无限幻灯片流效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap+ScrollTrigger实现滚动无限幻灯片流效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background: #111; min-height: 100vh; padding: 0; margin: 0; } .gallery { position: absolute; width: 100%; height: 100vh; overflow: hidden; } .cards { position: absolute; width: 14rem; height: 18rem; top: 40%; left: 50%; transform: translate(-50%, -50%); } .cards li { list-style: none; padding: 0; margin: 0; width: 14rem; height: 18rem; text-align: center; line-height: 18rem; font-size: 2rem; font-family: sans-serif; background-color: #9d7cce; position: absolute; top: 0; left: 0; border-radius: 0.8rem; } .actions { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); } button { display:inline-block; outline: none; border: none; padding: 8px 14px; background: #414141; background-image: -webkit-linear-gradient(top, #575757, #414141); background-image: -moz-linear-gradient(top, #575757, #414141); background-image: -ms-linear-gradient(top, #575757, #414141); background-image: -o-linear-gradient(top, #575757, #414141); background-image: linear-gradient(to bottom, #575757, #414141); text-shadow: 0px 1px 0px #414141; -webkit-box-shadow: 0px 1px 0px 414141; -moz-box-shadow: 0px 1px 0px 414141; box-shadow: 0px 1px 0px 414141; color: #ffffff; text-decoration: none; margin: 0 auto 10px; -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; padding: 12px 25px; font-family: "Signika Negative", sans-serif; text-transform: uppercase; font-weight: 600; cursor: pointer; font-size: 13px; line-height: 18px; } button:hover { background: #57a818; background-image: -webkit-linear-gradient(top, #57a818, #4d9916); background-image: -moz-linear-gradient(top, #57a818, #4d9916); background-image: -ms-linear-gradient(top, #57a818, #4d9916); background-image: -o-linear-gradient(top, #57a818, #4d9916); background-image: linear-gradient(to bottom, #57a818, #4d9916); text-shadow: 0px 1px 0px #32610e; -webkit-box-shadow: 0px 1px 0px fefefe; -moz-box-shadow: 0px 1px 0px fefefe; box-shadow: 0px 1px 0px fefefe; color: #ffffff; text-decoration: none; } button { font-size: 20px; font-weight: 400; } a { color: #88ce02; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="gallery"> <ul class="cards"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> </ul> <div class="actions"> <button class="prev">Prev</button> <button class="next">Next</button> </div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); let iteration = 0; // gets iterated when we scroll all the way to the end or start and wraps around - allows us to smoothly continue the playhead scrubbing in the correct direction. const spacing = 0.1, // spacing of the cards (stagger) snap = gsap.utils.snap(spacing), // we'll use this to snap the playhead on the seamlessLoop cards = gsap.utils.toArray('.cards li'), seamlessLoop = buildSeamlessLoop(cards, spacing), scrub = gsap.to(seamlessLoop, { // we reuse this tween to smoothly scrub the playhead on the seamlessLoop totalT.........完整代码请登录后点击上方下载按钮下载查看
网友评论0