LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

PARTICLES!

Click / Touch Anywhere

0 Particles
Created by Shawn G.
CSS
html, body {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-family: 'PT Sans', sans-serif;
}

.title {
  font-size: 10vw;
  font-weight: 700;
  text-align: center;
  margin-top: 15%;
  color: #444;
}

.subtitle {
  font-size: 4vw;
  color: #777;
  font-weight: normal;
  text-align: center;
  margin-top: 0;
}

.credit {
  position: absolute;
  bottom: 5px;
  width: 100%;
  display: block;
  text-align: center;
  color: #777;
}
.credit > a {
  color: #777;
}

.particle-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}

.particles > .particle {
  border-radius: 100%;
  background: transparent;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.particles > .particle.smaller {
  width: 5px;
  height: 5px;
}
.particles > .particle.small {
  width: 10px;
  height: 10px;
}
.particles > .particle.normal {
  width: 15px;
  height: 15px;
}
.particles > .particle.big {
  width: 20px;
  height: 20px;
}
.particles > .particle.bigger {
  width: 25px;
  height: 25px;
}
JS
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    sizes = [
      15, 20, 25, 35, 45
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;

function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};

$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});

$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var timer = setInterval(function () {
    $d
    .one('mouseup mouseleave touchend touchcancel touchleave', function () {
      clearInterval( timer );
    })
    createParticle( event );
  }, 1000 / 60)
  
});


function createParticle ( event ) {
  var particle = $('
'), size = sizes[Math.floor(Math.random() * sizes.length)], color = colors[Math.floor(Math.random() * colors.length)], negative = size/2, speedHorz = Math.random() * 10, speedUp = Math.random() * 25, spinVal = 360 * Math.random(), spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1), otime, time = otime = (1 + (.5 * Math.random())) * 1000, top = (mouseY - negative), left = (mouseX - negative), direction = Math.random() <=.5 ? -1 : 1 , life = 10; particle .css({ height: size + 'px', width: size + 'px', top: top + 'px', left: left + 'px', background: color, transform: 'rotate(' + spinVal + 'deg)', webkitTransform: 'rotate(' + spinVal + 'deg)' }) .appendTo( particles ); particleCount++; updateParticleCount(); var particleTimer = setInterval(function () { time = time - life; left = left - (speedHorz * direction); top = top - speedUp; speedUp = Math.min(size, speedUp - 1); spinVal = spinVal + spinSpeed; particle .css({ height: size + 'px', width: size + 'px', top: top + 'px', left: left + 'px', opacity: ((time / otime)/2) + .25, transform: 'rotate(' + spinVal + 'deg)', webkitTransform: 'rotate(' + spinVal + 'deg)' }); if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) { particle.remove(); particleCount--; updateParticleCount(); clearInterval(particleTimer); } }, 1000 / 50); }
Host Instantly Drag and Drop Website Builder

 

Description

Mobile-Friendly particle fountain! Open it on your phone and touch anywhere! Only supports one finger though.
Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID