matter实现鼠标点击喷射箭头自由落地运动动画效果代码
代码语言:html
所属分类:动画
代码描述:matter实现鼠标点击喷射箭头自由落地运动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { min-height:100vh; min-width:100vw; display:flex; flex-direction:column; align-items:center; justify-items:center; align-content:center; justify-content:center; background:white; font-family:"Montserrat",sans-serif; font-size:1.5em; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } #besideMouse { z-index:10; top:-1000px; position:fixed; font-weight:bold; font-size:1rem; text-align:center; opacity:.75; transform-origin:left center; transform:rotate(33deg); pointer-events:none; transition:opacity .5s } #besideMouse.hidden { opacity:.2 } h1 { color:rgba(0,0,0,0.75); text-stroke:5px black; padding:0; pointer-events:none } h1 span.struck { color:rgba(0,0,0,0.95) } hr { color:rgba(0,0,0,0.75); border:0; border-top:1px solid; background:0 } p { color:rgba(0,0,0,0.45) } a { color:#F7ACCF; text-decoration:none } a span.struck { color:#CB8DAA } .smaller { font-size:.65em } em { opacity:.5 } .aside { margin-top:2rem } .aside a { color:#5DD9C1 } .aside span.struck { color:#33776A } #world { position:fixed; top:0; left:0; height:100vh; width:100vw; pointer-events:none } .title .wrapNode { display:inline } .title span { line-height:.5em; display:inline-block; transform:translateY(0); transition:transform .15s,color .25s } .title span.struck { transform:translateY(0.2em) } </style> </head> <body> <div id="world"></div> <p id="besideMouse">click<br>me!</p> <div class="wrapper"> <h1> <div class="title">Eric D'Addio</div><small class="title">Creative Developer</small></h1> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script> <script> const cursorSprite = "https://image.flaticon.com/icons/png/128/587/587376.png"; // module aliases var Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies, Body = Matter.Body; // create an engine var engine = Engine.create(); // create a renderer var canvas = document.getElementById("world"); var render = Render.create({ element: canvas, engine: engine, options: { width: canvas.offsetWidth, height: canvas.offsetHeight, background: "transparent", wireframes: false, showAngleIndicator: false } }); const offset = -50, w = 5; let bounds = [ [offset, offset, w, canvas.offsetHeight * 2.5], [canvas.offsetWidth - offset, -w, w, canvas.offsetHeight * 2.5], [offset, canvas.offsetHeight - offset, canvas.offsetWidth * 2.5, w]]. map(bound => { return Bodies.rectangle(...bound); }); bounds.forEach(bound => { bound.label = "bound"; Body.setStatic(bound, true); // has to be set in post for collision detection to work }); /** Get letters as boxes */ function wrapTextNode(textNode) { let wrapNode = document.createElement("div"); wrapNode.classList.add("wrapNode"); let newTextNode = document.createTextNode(textNode.textContent); wrapNode.appendChild(newTextNode); textNode.parentNode.replaceChild(wrapNode, textNode); } (function () { let id = 0; document.querySelectorAll(".title").forEach(title => { title.childNodes.forEach(node => { if (node.nodeType == Node.TEXT_NODE) { wrapTextNode(node); } }); title.childNodes.forEach(node => { let newHTML = ""; let putty = node.innerHTML; putty.split("").forEach(l => { if (l == " &quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0