» »

Эффект блеска при нажатие на кнопку в JS

Эффект блеска при нажатие на кнопку в 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;
  };
  })();

Не думаю, что на официальный или игровой сайт можно такой трюк установить, просто он будет не понятен, здесь изначально специфически все смотрится.

Демонстрация
2019-02-17 Загрузок: 1 Просмотров: 330 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar