gsap Flip实现一个滚动游戏选择角色图片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap结合ScrollTrigger及Flip实现一个滚动游戏选择角色图片切换效果代码,直接滚动鼠标滚轮进行横向图片滚动选择。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); body { padding: 0; margin: 0; height: 600vh; width: 100vw; font-family: "Nunito", sans-serif; background-color: #e34f37; color: white; } h1 { font-family: "longline"; } .slider-section { height: 22vh; bottom: 0; position: fixed; width: 100%; } h1 { font-size: 10vw; } .wheel { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 300vw; height: 300vw; max-width: 2000px; max-height: 2000px; left: 50%; transform: translateX(-50%); } .wheel__card { position: absolute; top: 0; left: 0; width: 6%; max-width: 200px; aspect-ratio: 1 / 1; cursor: pointer; } img { width: 100%; pointer-events: none; z-index: 999; cursor: pointer; } .header { position: fixed; top: 0; left: 0; width: 100%; height: 60vh; display: flex; align-items: center; justify-content: center; cursor: pointer; } .header img { width: 40vw; height: 40vw; max-height: 350px; max-width: 350px; } /* SCROLL DOWN */ .scroll-down { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 0); color: white; font-weight: 400; text-transform: uppercase; font-size: 14px; overflow: visible; } .scroll-down .arrow { position: relative; top: 0px; margin: 0 auto; width: 15px; height: 15px; filter: invert(1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+); background-size: contain; } </style> </head> <body > <div class="header"> <!-- <h1>Spinny Flipz</h1> --> </div> <section class="slider-section"> <div class="wheel"> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" /> </div> <div class="wheel__card"> <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" /> </div> <div class="wheel__card"> <img sr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0