js实现canvas文字气泡合成粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现canvas文字气泡合成粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> body { font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #79a8ae; color: #666; font-size: 16px; line-height: 1.5em; } h1 { color: #111; margin: 0 0 12px 0; font-size: 24px; line-height: 1.5em; } p { margin: 0 0 10x 0; } a { color: #888; text-decoration: none; border-bottom: 1px solid #ccc; } a:hover { border-bottom-color: #888; } body, .overlay { -webkit-perspective: 1000; -webkit-perspective-origin-y: 25%; } .body--ready { /* Ideas background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%); background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%); background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%); background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%); background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%); background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%); background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%); */ background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); } .body--ready .overlay { -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); -moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); -ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); -o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); } .ui { position: absolute; left: 50%; bottom: 5%; width: 300px; margin-left: -150px; } .ui-input { width: 100%; height: 50px; background: none; font-size: 24px; font-weight: bold; color: #fff; text-align: center; border: none; border-bottom: 2px solid white; } .ui-input:focus { outline: none; border: none; border-bottom: 2px solid white; } .ui-return { display: none; position: absolute; top: 20px; right: 0; padding: 3px 2px 0 2px; font-size: 10px; line-height: 10px; color: #fff; border: 1px solid #fff; } .ui--enter .ui-return { display: block; } .ui--wide { width: 76%; margin-left: 12%; left: 0; } .ui--wide .ui-return { right: -20px; } .help { position: absolute; top: 40px; right: 40px; width: 25px; height: 25px; text-align: center; font-size: 13px; line-height: 27px; font-weight: bold; cursor: pointer; background: #fff; color: #79a8ae; opacity: .9; -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); } .help:hover { opacity: 1; } .overlay { position: absolute; top: 50%; left: 50%; width: 550px; height: 490px; margin: -260px 0 0 -275px; opacity: 0; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .overlay--visible { opacity: 1; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .ui-share, .ui-details { opacity: .9; background: #fff; z-index: 2; } .ui-details-content, .ui-share-content { padding: 100px 50px; } .commands { margin: 0; padding: 0; list-style: none; cursor: pointer; } .commands-item { font-size: 12px; line-height: 22px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 20px; background: #fff; margin-top: 1px; color: #333; opacity: .9; -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); } .commands-item--gap { margin-top: 9px; } .commands-item:hover { opacity: 1; } .commands-item:hover .commands-item-action { background: #333; } .commands-item a { display: inline-block; } .commands-item-mode { display: inline-block; margin-left: 3px; font-style: italic; color: #ccc; } .commands-item-title { display: inline-block; width: 150px; } .commands-item-info { display: inline-block; width: 300px; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: normal; color: #aaa; } .commands-item-action { display: inline-block; float: right; margin-top: 3px; text-transform: uppercase; font-size: 10px; line-height: 10px; color: #fff; background: #90c9d1; padding: 5px 10px 4px 10px; border-radius: 3px; } .commands-item:first-child { margin-top: 0; } .twitter-share { position: absolute; top: 4px; right: 20px; } .tabs-labels { margin-bottom: 9px; } .tabs-label { display: inline-block; background: #fff; padding: 10px 20px; font-size: 12px; line-height: 22px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #333; opacity: .5; cursor: pointer; margin-right: 2px; -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); } .tabs-label:hover { opacity: .9; } .tabs-label--active { opacity: .9; } .tabs-panel { display: none; } .tabs-panel--active { display: block; } .tab-panel { position: absolute; top: 0; left: 0; width: 100%; } .touch .ui-input { display: none; } </style> </head> <body class="body--ready"> <canvas class="canvas" width="456" height="744"></canvas> <div class="help">?</div> <div class="ui"> <input class="ui-input" type="text"> <span class="ui-return">↵</span> </div> <div class="overlay"> <div class="tabs"> <div class="tabs-labels"><span class="tabs-label tabs-label--active">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div> <div class="tabs-panels"> <ul class="tabs-panel commands tabs-panel--active"> <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span> |<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li> </ul> <div class="tabs-panel ui-details"> <div class="ui-details-content"> <h1>Shape Shifter</h1> <p> </p> </div> </div> <div class="tabs-panel ui-share"> <div class="ui-share-content"> <h1>Sharing</h1> <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p> <p> </p> </div> </div> </div> </div> </div> <script> /* Shape Shifter ============= A canvas experiment by Kenneth Cachia http://www.kennethcachia.com Updated code ------------ https://github.com/kennethcachia/Shape-Shifter */ var S = { init: function () { var action = window.location.href, i = action.indexOf('?a='); S.Drawing.init('.canvas'); document.body.classList.add('body--ready'); if (i !== -1) { S.UI.simulate(decodeURI(action).substring(i + 3)); } else { S.UI.simulate('Shape|Shifter|Type|to start|#rectangle|#countdown 3||'); } S.Drawing.loop(function () { S.Shape.render(); }); } }; S.Drawing = function () { var canvas, context, renderFn; requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; return { init: function (el) { canvas = document.querySelector(el); context = canvas.getContext('2d'); this.adjustCanvas(); window.addEventListener('resize', function (e) { S.Drawing.adjustCanvas(); }); }, loop: function (fn) { renderFn = !renderFn ? fn : renderFn; this.clearFrame(); renderFn(); requestFrame.call(window, this.loop.bind(this)); }, adjustCanvas: function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, clearFrame: function () { context.clearRect(0, 0, canvas.width, canvas.height); }, getArea: function () { return { w: canvas.width, h: canvas.height }; }, drawCircle: function (p, c) { context.fillStyle = c.render(); context.beginPath(); context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); context.closePath(); context.fill(); } }; }(); S.UI = function () { var input = document.querySelector('.ui-input'), ui = document.querySelector('.ui'), help = document.querySelector('.help'), commands = document.querySelector('.commands'), overlay = document.querySelector('.overlay'), canvas = document.querySelector('.canvas'), interval, isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints), currentAction, resizeTimer, time, maxShapeSize = 30, firstAction = true, sequence = [], cmd = '#'; function formatTime(date) { var h = date.getHours(), m = date.getMinutes(), m = m < 10 ? '0' + m : m; return h + ':' + m; } function getValue(value) { return value && value.split(' ')[1]; } function getAction(value) { value = value && value.split(' ')[0]; return value && value[0] === cmd && value.substring(1); } function timedAction(fn, delay, max, reverse) { clearInterval(interval); currentAction = reverse ? max : 1; fn(currentAction); if (!max || !reverse && currentAction < max || reverse && currentActio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0