gsap+InertiaPlugin实现视觉差异横向拖拽滚动图片效果代码
代码语言:html
所属分类:拖放
代码描述:gsap+InertiaPlugin实现视觉差异横向拖拽滚动图片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap'); html, body { width:100%; height:100%; background:#111; color:#fff; font-family: 'Rubik', sans-serif; } #carousel { position:relative; width:100%; height:700px; background:#000; overflow:hidden; font-size:0; } #slides { position:absolute; left:50%; width: 100%; height:100%; } #next, #prev { cursor:pointer; position:fixed; top:325px; left:25px; width:50px; height:50px; } #next { left:auto; right:25px; } </style> </head> <body> <div id="carousel"> <div id="slides"></div> <svg id="next" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#fff" stroke-width="2"> <circle fill="rgba(170,170,170,0.24)" cx="25" cy="25" r="20" /> <polyline id="arrow" points="21,15 33,25 21,35"/> </svg> <svg id="prev" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#fff" stroke-width="2"> <circle fill="rgba(170,170,170,0.24)" cx="25" cy="25" r="20" /> <polyline id="arrow" points="29,15 17,25 29,35"/> </svg> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/InertiaPlugin.min.js"></script> <script> let n = 15; let parallax = []; // we'll store the animations in here. let clamp = gsap.utils.clamp(0, 1); let currentX = 0; let snap = gsap.utils.pipe(gsap.utils.snap(450), gsap.utils.clamp(n * -450, 0)); // Set #slides width for draggable bounds gsap.set('#slides', {width:n*450}); // Populate slide boxes for (var i=0; i<n; i++){ var box = document.createElement('div'), img = new Image(), link = document.createElement('a'); gsap.set(box, { width:400, height:600, overflow:'hidden', position:'absolute', top:50, left:i*450, attr:{ class:'box b'+i }, background:'#333' }); gsap.set(img, { position:'absolute', left:-300,//-i*50, attr:{src:'//repo.bfw.wiki/bfwrepo/image/5e83e2a63bb7a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_700,h_600,/quality,q_90'} }); parallax[i] = gsap.to(img, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0