gsap模仿apple tv实现图片悬浮视觉差异聚焦效果代码
代码语言:html
所属分类:视觉差异
代码描述:gsap模仿apple tv实现图片悬浮视觉差异聚焦效果代码
代码标签: gsap 模仿 apple tv 图片 悬浮 视觉差异 聚焦
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overscroll-behavior: none; cursor: none; transform-style: preserve-3d; } * { margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; display: grid; place-items: center; } .grid { display: flex; flex-wrap: wrap; } .grid__wrap { position: relative; margin: 0 40px; } .grid__button { width: 200px; height: 50px; background-color: indigo; display: grid; place-items: center; color: white; } .grid__area { width: 250px; height: 150px; position: absolute; top: 0; bottom: 0; left: -100%; right: -100%; margin: auto; } .cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; contain: layout size style; } .cursor__pointer { position: absolute; width: 15px; height: 15px; background-color: red; border-radius: 50%; opacity: 0; } .cursor__decoy { position: absolute; } .cursor__decoy span { display: block; width: 10px; height: 10px; background-color: rgba(0,255,0,.6); border-radius: 50%; opacity: 0; } .discography { display: flex; perspective: 350px; } .discography__unit { position: relative; width: 350px; perspective: 300px; } .discography__unit:nth-child(n+2) { margin-left: 80px; } .discography__image { overflow: hidden; box-shadow: 21px 42px 42px rgba(0, 0, 0, .33); } .discography__image img { max-width: 100%; vertical-align: bottom; } .discography__area { position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; width: 130%; height: 130%; margin: auto; } .discography__light { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 50%; height: 50%; margin: auto; filter: blur(36px) brightness(1.05); background-color: hsla(0, 0%, 100%, 0.85); border-radius: 50%; } </style> </head> <body > <div id="container"> <div class="discography"> <div class="discography__unit"> <div class="discography__image"> <img src="//repo.bfw.wiki/bfwrepo/image/625a2405efdde.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt=""> <div class="discography__light"></div> </div> <div class="discography__area"></div> </div> <div class="discography__unit"> <div class="discography__image"> <img src="//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt=""> <div class="discography__light"></div> </div> <div class="discography__area"></div> </div> </div> </div> <div id="cursor" class="cursor"> <div class="cursor__target cursor__pointer"></div> <div class="cursor__target cursor__decoy"><span></span></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script > class Pointer { constructor(dom) { this.el = dom; this.attract = 0.08; //バネ定数 this.friction = 0.9; this.mousePos = { x: 0, y: 0 }; this.position = { x: 0, y: 0 }; this.velocity = { vx: 0, vy: 0 }; this.acceleration = { ax: 0, ay: 0 }; this.goalPos = { //目標座標 x: 0, y: 0 }; this.init(); } init() { window.addEventListener("mousemove", this.mouseMoveFn.bind(this)); } mouseMoveFn(ev) { this.mousePos.x = ev.clientX; this.mousePos.y = ev.clientY; } render() { if (this.el.classList.contains("cursor__pointer")) { this.position.x += (this.mousePos.x - this.position.x) * 0.2; this.position.y += (this.mousePos.y - this.position.y) * 0.2; gsap.set(this.el, { x: this.position.x - 7.5, y: this.position.y - 7.5, force3D: true }); } else { gsap.set(this.el, { x: this.position.x - 5, y: this.position.y - 5, force3D: true }); } }} const lerp = (a, b, n) => (1 - n) * a + n * b; class App { constructor() { this.el = [...document.querySelectorAll(".cursor__target")]; this.hoverAreaEl = [...document.querySelectorAll(".discography__area")]; this.pointers = []; this.bindApplySpring = this.applySpring.bind(this); this.buttonPos = { x: 0, y: 0 }; this.springBetweenCursor = { x: 0, y: 0 }; this.springBetweenButton = { x: 0, y: 0 }; this.animatableProperties = { imageX: { previous: 0, current: 0, amt: 0.08 }, imageY: { previous: 0, current: 0, amt: 0.08 }, shineX: { previous: 0, current: 0, amt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0