Эффект блеска при нажатие на кнопку в JS
В представленной кнопке, которая выполнена формате 3D присутствует красивый эффект частиц блеска, где при клике они появляются по сторонам. В этом материале представлен один из материалов, который отлично смотрится на темном фоне, а больше всего под него он строился, в плане эффекта. Сама идея состоит в том, что по умолчанию или при открытии страницы мы видим стандартный вид кнопки, где можно увидеть элементы, которые исполнены в 3D. Так как при просмотре этот эффект действительно выглядит интересным для функций кнопки. Ведь они основном идут для перехода на другую страницу или скачивание файла. А здесь сопровождает красиво исполненный эффект, что можно задавать его размер, как он выстреливает, виде салюта. Плюс в том, что отлично привлекает, ведь если не нажимать на кнопку, то она качается как на волне, что изначально заметно. При проверке на demo странице, где ссылка прописана ниже материала: Приступаем к установке: HTML Код <button id="kemarketing-dalandscap">ZorNet.Ru - сайт для вебмастера</button> <canvas id="svesan" width="478" height="478"></canvas> CSS Код body { margin: 0; overflow: hidden; } #svesan { display: block; } #kemarketing-dalandscap { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; position: absolute; font-size: 23px; text-transform: uppercase; padding: 15px 18px; left: 50%; width: 415px; margin-left: -100px; top: 50%; border-radius: 7px; color: #fbf9f9; text-shadow: -2px -2px 2px rgba(16, 16, 16, 0.8); border: 4px solid transparent; border-bottom-color: rgba(12, 12, 12, 0.35); background: hsla(260, 100%, 50%, 1); cursor: pointer; outline: 0 !important; animation: pulse 3s infinite alternate; transition: background 0.5s, border 0.3s, margin 0.3s; } #kemarketing-dalandscap:hover { background: hsla(220, 100%, 60%, 1); margin-top: -1px; animation: none; } #kemarketing-dalandscap:active { border-bottom-width: 0; margin-top: 3px; } @keyframes pulse { 0% { margin-top: 0px; } 100% { margin-top: 6px; } } JS Код window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); Math.randMinMax = function(min, max, round) { var val = min + (Math.random() * (max - min)); if( round ) val = Math.round( val ); return val; }; Math.TO_RAD = Math.PI/180; Math.getAngle = function( x1, y1, x2, y2 ) { var dx = x1 - x2, dy = y1 - y2; return Math.atan2(dy,dx); }; Math.getDistance = function( x1, y1, x2, y2 ) { var xs = x2 - x1, ys = y2 - y1; xs *= xs; ys *= ys; return Math.sqrt( xs + ys ); }; var FX = {}; (function() { var canvas = document.getElementById('svesan'), ctx = canvas.getContext('2d'), lastUpdate = new Date(), mouseUpdate = new Date(), lastMouse = [], width, height; FX.particles = []; setFullscreen(); document.getElementById('kemarketing-dalandscap').addEventListener('mousedown', buttonEffect); function buttonEffect() { var button = document.getElementById('kemarketing-dalandscap'), height = button.offsetHeight, left = button.offsetLeft, top = button.offsetTop, width = button.offsetWidth, x, y, degree; for(var i=0;i<40;i=i+1) { if( Math.random() < 0.5 ) { y = Math.randMinMax(top, top+height); if( Math.random() < 0.5 ) { x = left; degree = Math.randMinMax(-45,45); } else { x = left + width; degree = Math.randMinMax(135,225); } } else { x = Math.randMinMax(left, left+width); if( Math.random() < 0.5 ) { y = top; degree = Math.randMinMax(45,135); } else { y = top + height; degree = Math.randMinMax(-135, -45); } } createParticle({ x: x, y: y, degree: degree, speed: Math.randMinMax(100, 150), vs: Math.randMinMax(-4,-1) }); } } window.setTimeout(buttonEffect, 100); loop(); window.addEventListener('resize', setFullscreen ); function createParticle( args ) { var options = { x: width/2, y: height/2, color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')', degree: Math.randMinMax(0, 360), speed: Math.randMinMax(300, 350), vd: Math.randMinMax(-90,90), vs: Math.randMinMax(-8,-5) }; for (key in args) { options[key] = args[key]; } FX.particles.push( options ); } function loop() { var thisUpdate = new Date(), delta = (lastUpdate - thisUpdate) / 1000, amount = FX.particles.length, size = 2, i = 0, p; ctx.fillStyle = 'rgba(15,15,15,0.25)'; ctx.fillRect(0,0,width,height); ctx.globalCompositeStyle = 'lighter'; for(;i<amount;i=i+1) { p = FX.particles[ i ]; p.degree += (p.vd * delta); p.speed += (p.vs);// * delta); if( p.speed < 0 ) continue; p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta); p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta); ctx.save(); ctx.translate( p.x, p.y ); ctx.rotate( p.degree * Math.TO_RAD ); ctx.fillStyle = p.color; ctx.fillRect( -size, -size, size*2, size*2 ); ctx.restore(); } lastUpdate = thisUpdate; requestAnimFrame( loop ); } function setFullscreen() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }; })(); Не думаю, что на официальный или игровой сайт можно такой трюк установить, просто он будет не понятен, здесь изначально специфически все смотрится. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |