casson Posted April 4, 2020 Share Posted April 4, 2020 Site URL: https://codepen.io/ShawnCG/pen/ZYVada Hi, I have seen this effect which I'd like to incorporate onto one page only in my website (Marquee) https://codepen.io/ShawnCG/pen/ZYVada I don't want the PARTICLES! word, just the effect to happen whenever the mouse is clicked on the page. How and where do I input the code to make it happen? Many thanks for your help :) Link to comment
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 Try adding to Code Block <h1 class='title'>PARTICLES!</h1> <h4 class='subtitle'>Click / Touch Anywhere</h4> <div class='particle-count'> <span class='number'>0</span> Particles </div> <span class='credit'> Created by <a href='https://codepen.io/ShawnCG' target='_blank'>Shawn G.</a> </span> <div class='particles'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> 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 = $('<div class="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 / 60); } </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
casson Posted April 4, 2020 Author Share Posted April 4, 2020 Hi, Thanks for coming back on this. I added a code block on the page and pasted in your code above. When I click within the code block I get some particles in the code block in a straight line but not exploding like in the codepen example, and it doesn't happen anywhere else on the page. Thanks, Link to comment
casson Posted April 4, 2020 Author Share Posted April 4, 2020 I wasn't too clear in my last comment - I can click anywhere on the page but the particles only appear in the same left position in the code block area in a straight line downwards. They don't explode outwards from where the mouse clicks Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.