绳子下拉菜单特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html{ height: 100%; } body{ font-family: Arial; margin: 0px; height: 100%; --color: #2196F3; --bgColor: #424242; color: var(--color); background-color: var(--bgColor); } *{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } #nav{ position: fixed; transform: translateY(-70vh); overflow: visible; } canvas{ display: none; } #nav > #content{ box-sizing: border-box; margin: 0px; padding: 20vh 10px 10vh 10px; height: 70vh; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); background-color: #616161; } #nav > #content > h1{ color: #eee; margin: 0px; text-align: center; } #nav > #content > div{ margin: 30px auto; display: flex; justify-content: center; align-items: center; } #nav > #content a{ margin: 10px; font-size: 20px; } #nav > #rope{ width: 100vw; height: 100vh; display: block; } #nav > #rope > circle{ fill: var(--bgColor); stroke: var(--color); cursor: pointer; -webkit-tap-highlight-color: transparent; } #nav > #rope > path{ stroke: var(--color); } #page{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--textColor); } #page > h1{ font-size: 50px; } </style> </head> <body translate="no"> <div id="nav"> <div id="content"> <h1>Full-Page Navigation</h1> <div> <a data-color="#2196F3" style="color: #2196F3" href="">Blue Page</a> <a data-color="#F44336" style="color: #F44336" href="">Red Page</a> <a data-color="#8BC34A" style="color: #8BC34A" href="">Green Page</a> <a data-color="#FF9800" style="color: #FF9800" href="">Orange Page</a> </div> </div> <svg id="rope" xmlns="http://www.w3.org/2000/svg"> <path fill="transparent" stroke-width="10px" stroke-linejoin="round" /> <circle stroke-width="10px" r="20" id="handle"></circle> </svg> </div> <div id="page"> <h1>Pull</h1> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/matter.min.js"></script> <script> class PhysicsEngine { constructor() { this.navclosedPos = -30; this.navHeight = 50; this.canvasWidth = 500; this.canvasHeight = 600; this.initWorld(); } initWorld() { const engine = Matter.Engine.create(); const render = Matter.Render.create({ element: document.body, engine: engine }); let bodies = this.createBodies(); let constraints = this.createConstraints(); Matter.World.add(engine.world, [...bodies, ...constraints]); Matter.Engine.run(engine); Matter.Render.run(render); } createBodies() { this.nav = Matter.Bodies.rectangle(this.canvasWidth / 2, this.navclosedPos, this.canvasWidth, this.navHeight, { isSensor: true, inertia: Infinity, mass: 0.1 }); this.rope = this.createRope(); this.handle = this.rope.bodies[this.rope.bodies.length - 1]; return [this.nav, this.rope]; } createRope() { const ropeParts = Matter.Body.nextGroup(true); const rope = Matter.Composites.stack(this.canvasWidth / 2, this.navclosedPos, 8, 1, -30, 0, (x, y) => { return Matter.Bodies.circle(x, y, 15, { collisionFilter: { group: ropeParts } }); }); Matter.Composites.chain(rope, 0, 0.2, 0, -0.2, { stiffness: 1, damping: 0.6, length: 3 }); return rope; } createConstraints() { this.fixMenuToTop = Matter.Constraint.create({ bodyA: this.nav, pointA: { x: 0, y: this.navHeight / 2 }, pointB: { x: this.canvasWidth / 2, y: this.navclosedPos }, stiffness: 0.5, damping: 0.1, length: 0 }); this.fixMenuToBottom = Matter.Constraint.create({ bodyA: this.nav, pointA: { x: 0, y: this.navHeight / 2 }, pointB: { x: this.canvasWidth / 2, y: 0 }, stiffness: 0.01, damping: 0.1, length: 0 }); const fixRopeToMenu = Matter.Constraint.create({ bodyA: this.nav, pointA: { x: 0, y: this.navHeight - 20 }, bodyB: this.rope.bodies[0], stiffness: 1, length: 0 }); this.fixMouseToHandle = Matter.Constraint.create({ bodyA: this.handle, pointB: { x: 0, y: 0 }, stiffness: 0.000000000000001, length: 0 }); return [this.fixMenuToTop, this.fixMenuToBottom, fixRopeToMenu, this.fixMouseToHandle]; } grabHandle(x, y) { this.moveHandle(x, y); this.fixMouseToHandle.stiffness = 1; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0