We Keep Coding

How to draw operators sign like +, -, x, % on fountain blocks? - javascript

This is particle fountain system. I just want to ask that how to draw some operators on the releasing fountain blocks, like +, -, ×, % etc. Also, it will be okay if we can draw only single operator. But I really need it to be drawn on fountain blocks. Like the circles and squares coming out on click, I need operators/letters/numerics to be drawn on the blocks.
//-------------------------------- For Squares-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
maxTime = 10,
sizes = [
75
],
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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
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 = ((12 * 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);
}
//-------------------------------- For Circles-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles2 = $('.particles2'),
particle2Count = 0,
maxTime = 10,
sizes = [
75
],
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 updateParticle2Count () {
$('.particle2-count > .number').text(particle2Count);
};
$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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle2( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle2 ( event ) {
var particle2 = $('<div class="particle2"/>'),
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 = ((12 * 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;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles2 );
particle2Count++;
updateParticle2Count();
var particle2Timer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle2
.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 ) {
particle2.remove();
particle2Count--;
updateParticle2Count();
clearInterval(particle2Timer);
}
}, 1000 / 50);
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
background: #000;
border-radius: 20%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(img/plus.ico);
}
.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;
}
.particles {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/**-----------------------------------------------------------------**/
.particle2-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles2 > .particle2 {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles2 > .particle2.small {
width: 10px;
height: 10px;
}
.particles2 > .particle2.normal {
width: 15px;
height: 15px;
}
.particles2 > .particle2.big {
width: 20px;
height: 20px;
}
.particles2 > .particle2.bigger {
width: 25px;
height: 25px;
}
.particles2 {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
Click for particles
<div class="particles">
</div>
<div class="particles2">
</div>
</body>
</html>

Each of your particles is its own div, and you can put text in a div. This code gets a symbol randomly from a string of symbols and displays the symbol in the particle. Obviously you can change the style and position of the symbol within its particle using css.
//-------------------------------- For Squares-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
maxTime = 10,
sizes = [
75
],
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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle ( event ) {
var particle = $('<div class="particle">' + getSymbol() + '</div>'),
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 = ((12 * 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);
}
//-------------------------------- For Circles-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles2 = $('.particles2'),
particle2Count = 0,
maxTime = 10,
sizes = [
75
],
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 updateParticle2Count () {
$('.particle2-count > .number').text(particle2Count);
};
$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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle2( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle2 ( event ) {
var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
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 = ((12 * 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;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles2 );
particle2Count++;
updateParticle2Count();
var particle2Timer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle2
.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 ) {
particle2.remove();
particle2Count--;
updateParticle2Count();
clearInterval(particle2Timer);
}
}, 1000 / 50);
}
function getSymbol() {
var symbols = "ABCD+=-";
return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
background: #000;
border-radius: 20%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(img/plus.ico);
}
.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;
}
.particles {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
font: 48pt Serif;
text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles2 > .particle2 {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles2 > .particle2.small {
width: 10px;
height: 10px;
}
.particles2 > .particle2.normal {
width: 15px;
height: 15px;
}
.particles2 > .particle2.big {
width: 20px;
height: 20px;
}
.particles2 > .particle2.bigger {
width: 25px;
height: 25px;
}
.particles2 {
background: #000;
border-radius: 100%;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
font: 48pt Serif;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
Click
<div class="particles">
</div>
<div class="particles2">
</div>
</body>
</html>

Related

I've put together a simple jQuery script to create a radial gradient that follows the mouse with a delay, but since it's in a mousemove function, when the mouse stops moving the gradient doesn't catch up. Is there a simple way to make the gradient catch up with the mouse when the mouse stops without writing a function that's constantly running?
var xPos = 0;
var yPos = 0;
var dX = 0;
var dY = 0;
var repeater;
$(document).mousemove(function(event) {
windowWidth = $(window).width();
windowHeight = $(window).height();
mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
mouseYpercentage = Math.round(event.pageY / windowHeight * 100);
dX = mouseXpercentage - xPos;
dY = mouseYpercentage - yPos;
xPos += (dX / 50);
yPos += (dY / 50);
$('.rgradient').css('background', 'radial-gradient(at ' + xPos + '% ' + yPos + '%, #e6e6e6, #1e1e1e)');
});
.rgradient {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #1e1e1e;
background: radial-gradient( at center, #e6e6e6 #1e1e1e);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rgradient"></div>

You can use requestAnimationFrame(), as it only runs once for each frame:
var xPos = 0;
var yPos = 0;
var dX = 0;
var dY = 0;
var mouseRaf = null;
var gradMoveRaf = null;
$(document).mousemove(function(event) {
if (!mouseRaf) {
mouseRaf = requestAnimationFrame(function() {
windowWidth = $(window).width();
windowHeight = $(window).height();
mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
mouseYpercentage = Math.round(event.pageY / windowHeight * 100);
dX = mouseXpercentage - xPos;
dY = mouseYpercentage - yPos;
mouseRaf = null;
});
}
if (!gradMoveRaf) {
gradMoveRaf = requestAnimationFrame(gradMove);
}
});
function gradMove() {
xPos += (dX / 50);
yPos += (dY / 50);
$('.rgradient').css('background', 'radial-gradient(at ' + xPos + '% ' + yPos + '%, #e6e6e6, #1e1e1e)');
var absX = Math.abs(mouseXpercentage - xPos);
var absY = Math.abs(mouseYpercentage - yPos);
if (absX < 1 && absY < 1) {
gradMoveRaf = null;
console.log("stop");
} else {
gradMoveRaf = requestAnimationFrame(gradMove);
console.log("repeat");
}
}
.rgradient {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #1e1e1e;
background: radial-gradient(at center, #e6e6e6 #1e1e1e);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rgradient"></div>

How to limit particle to release from only one object/position/file instead of clicking anywhere on the screen? As we click anywhere on the screen and the fountain works but my goal is to restrict fountain work by clicking on a particular position/object on the screen. For example, let's assume a place or a 150X150px image on the center of the screen and the fountain should work only when I click on the image and nowhere else. I will appreciate the help.
//-------------------------------- For Squares-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
maxTime = 10,
sizes = [
75
],
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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle ( event ) {
var particle = $('<div class="particle">' + getSymbol() + '</div>'),
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 = ((12 * 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) + 1.0,
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);
}
//-------------------------------- For Circles-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles2 = $('.particles2'),
particle2Count = 0,
maxTime = 10,
sizes = [
75
],
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 updateParticle2Count () {
$('.particle2-count > .number').text(particle2Count);
};
$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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle2( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$d.
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle2 ( event ) {
var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
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 = ((12 * 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;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles2 );
particle2Count++;
updateParticle2Count();
var particle2Timer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
opacity: ((time / otime)/2) + 1.0,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
particle2.remove();
particle2Count--;
updateParticle2Count();
clearInterval(particle2Timer);
}
}, 1000 / 50);
}
function getSymbol() {
var symbols = "12X34Y5Z+x=-%";
return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
background: #000;
border-radius: 20%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.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;
}
.particles {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles2 > .particle2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.particles2 > .particle2.small {
width: 10px;
height: 10px;
}
.particles2 > .particle2.normal {
width: 15px;
height: 15px;
}
.particles2 > .particle2.big {
width: 20px;
height: 20px;
}
.particles2 > .particle2.bigger {
width: 25px;
height: 25px;
}
.particles2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
Click for particles
<div class="particles">
</div>
<div class="particles2">
</div>
</body>
</html>

you are invoking the "on()" function over the whole document. In order to restrict it to an particular object use $("tag") for an an element instead of $document.
//-------------------------------- For Squares-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
maxTime = 10,
sizes = [
75
],
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();
});
$("p")
.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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$("p").
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle ( event ) {
var particle = $('<div class="particle">' + getSymbol() + '</div>'),
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 = ((12 * 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) + 1.0,
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);
}
//-------------------------------- For Circles-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles2 = $('.particles2'),
particle2Count = 0,
maxTime = 10,
sizes = [
75
],
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 updateParticle2Count () {
$('.particle2-count > .number').text(particle2Count);
};
$w
.on( 'resize' , function () {
wWidth = $w.width();
wHeight = $w.height();
});
$("p")
.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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle2( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$("p").
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle2 ( event ) {
var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
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 = ((12 * 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;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles2 );
particle2Count++;
updateParticle2Count();
var particle2Timer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
opacity: ((time / otime)/2) + 1.0,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
particle2.remove();
particle2Count--;
updateParticle2Count();
clearInterval(particle2Timer);
}
}, 1000 / 50);
}
function getSymbol() {
var symbols = "12X34Y5Z+x=-%";
return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
background: #000;
border-radius: 20%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.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;
}
.particles {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles2 > .particle2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.particles2 > .particle2.small {
width: 10px;
height: 10px;
}
.particles2 > .particle2.normal {
width: 15px;
height: 15px;
}
.particles2 > .particle2.big {
width: 20px;
height: 20px;
}
.particles2 > .particle2.bigger {
width: 25px;
height: 25px;
}
.particles2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p>Click for particles</p>
<div class="particles">
</div>
<div class="particles2">
</div>
</body>
</html>

I want to stop those particles at the bottom of screen or prevent them to fall forever below the screen. Code requires to settle all the particles collected at the bottom of screen. Please run the demo below and 'click the particle' text. when the particles are generated they are required to be collected at the bottom.
//-------------------------------- For Squares-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
maxTime = 10,
sizes = [
75
],
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();
});
$("p")
.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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$("p").
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle ( event ) {
var particle = $('<div class="particle">' + getSymbol() + '</div>'),
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 = ((12 * 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) + 1.0,
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);
}
//-------------------------------- For Circles-------------
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles2 = $('.particles2'),
particle2Count = 0,
maxTime = 10,
sizes = [
75
],
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 updateParticle2Count () {
$('.particle2-count > .number').text(particle2Count);
};
$w
.on( 'resize' , function () {
wWidth = $w.width();
wHeight = $w.height();
});
$("p")
.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 counter = 0;
var timer = setInterval(function () {
if (counter < maxTime) {
createParticle2( event );
} else {
clearInterval( timer );
counter = 0;
}
counter++;
}, 1000 / 20);
$("p").
on('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
});
});
function createParticle2 ( event ) {
var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
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 = ((12 * 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;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles2 );
particle2Count++;
updateParticle2Count();
var particle2Timer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle2
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
opacity: ((time / otime)/2) + 1.0,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
particle2.remove();
particle2Count--;
updateParticle2Count();
clearInterval(particle2Timer);
}
}, 1000 / 50);
}
function getSymbol() {
var symbols = "12X34Y5Z+x=-%";
return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
background: #000;
border-radius: 20%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.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;
}
.particles {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles2 > .particle2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
color: white;
}
.particles2 > .particle2.small {
width: 10px;
height: 10px;
}
.particles2 > .particle2.normal {
width: 15px;
height: 15px;
}
.particles2 > .particle2.big {
width: 20px;
height: 20px;
}
.particles2 > .particle2.bigger {
width: 25px;
height: 25px;
}
.particles2 {
background: #000;
border-radius: 100%;
position: absolute;
background-repeat: no-repeat;
font-family: 'Roboto Slab', serif;
font-size: 48px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p>Click for particles</p>
<div class="particles">
</div>
<div class="particles2">
</div>
</body>
</html>
I hope you guys can easily fix this
Thanks!

To make something "bounce" when it reaches the bottom of the frame you should check if it is below the bottom of the screen if so reverse the velocity of the particle, dampen its rebound velocity by multiplying it by a number less than one and set its height to be the bottom of the screen- this helps with stutter. For instance:
if (top + size > wHeight) {
speedUp = -0.7 * speedUp; // rebounds with 0.7 times the velocity
top = wHeight - size;
}
JSFiddle example.
Hope this helps!

In the script, the picture is very slow.
$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";
var x = (e.pageX * -1 / 40),
y = (e.pageY * -1 / 25);
$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
$(".holiday-face_parallax .holiday-face__item_5").each(function(i, el) {
var x = (e.pageX * -1 / 40), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_4").each(function(i, el) {
var x = (e.pageX * -1 / 30), y = (e.pageY * -1 / 20);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_3").each(function(i, el) {
var x = (e.pageX * -1 / 40), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_2").each(function(i, el) {
var x = (e.pageX * -1 / 25), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_1").each(function(i, el) {
var x = (e.pageX * -1 / 20), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
});
.holiday-face {
bottom: 0;
left: 0;
min-height: 540px;
min-width: 875px;
right: 0;
top: 0;
z-index: -1;
}
.holiday-face_parallax .holiday-face__item_5 {
background-image: url("../img/header-bg-ley2.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_4 {
width: 100%;
height: 600px;
background-image: url("../img/header-bg-ley3.png");
}
.holiday-face_parallax .holiday-face__item_3 {
background-image: url("../img/header-bg-ley4.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_2 {
background-image: url("../img/header-bg-ley5.png");
width: 100%;
height: 600px;
}
.holiday-face_parallax .holiday-face__item_1 {
background-image: url("../img/header-bg-ley1.png");
width: 100%;
height: 600px;
}
.holiday-face-words__link {
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
.holiday-face-words {
background: none no-repeat scroll center top rgba(0, 0, 0, 0);
height: 69px;
left: 0px;
position: absolute;
right: 0px;
top: 0%;
width:100%;
}
.b-page_holiday-face .holiday-face_parallax .holiday-face__item {
opacity: 1;
}
.holiday-face__item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
left: 0;
margin: 0px 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.1s ease 0s;
}
<div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="20" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div>
<div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="20" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div>
$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";
var x = (e.pageX * -1 / 40),
y = (e.pageY * -1 / 25);
$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
$(".holiday-face_parallax .holiday-face__item_5").each(function(i, el) {
var x = (e.pageX * -1 / 40), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_4").each(function(i, el) {
var x = (e.pageX * -1 / 30), y = (e.pageY * -1 / 20);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_3").each(function(i, el) {
var x = (e.pageX * -1 / 40), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_2").each(function(i, el) {
var x = (e.pageX * -1 / 25), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
$(".holiday-face_parallax .holiday-face__item_1").each(function(i, el) {
var x = (e.pageX * -1 / 20), y = (e.pageY * -1 / 25);
$(this).css('background-position', x + 'px ' + y + 'px');
});
});

It looks like the values of
var x = (e.pageX * -1 / 30), y = (e.pageY * -1 / 20);
define the speed of the parallax. Your example does not work correctly, so I cannot test this out for sure.
Try changing the values of these assignments. A smaller value should make it go slower, where a larger value will make it faster.
To make it very slow, for example, try
var x = (e.pageX * -1 / 3000), y = (e.pageY * -1 / 2000);
Looks like each function gets its own speeds, so you can choose how fast or slow you want each photo to go.

I'm trying to make a box follow the cursor on mousemove. However, it should stop following the mouse if
the user clicks the box
the user's mouse leaves the surrounding div
Here's what the current setup looks like:
$(function() {
$(document).mousemove(function(e) {
// assign the co-ords as vars so
var vert = e.pageY;
var horz = e.pageX;
// get co -ords for the center of the box
centx = Math.ceil($('div').width() / 2);
centy = Math.ceil($('div').height() / 2);
// checking to see if the cursor is outside the boudries of the box and stoping the circle moving past them
if (e.pageY + 53 > Math.ceil($('div').height())) var vert = Math.ceil($('div').height() - 47);
if (e.pageY - 53 < 0) vert = 53;
if (e.pageX + 53 > Math.ceil($('div').width())) var horz = Math.ceil($('div').width() - 47);
if (e.pageX - 53 < 0) horz = 53;
// work out the distance between the cursor and the center of box
disx = horz - centx;
disy = vert - centy;
// work out the scale of the shadow
sx = -disx * 0.1;
sy = -disy * 0.1;
// work out the shadow blur
b = (Math.abs(sx) + Math.abs(sy)) * 0.5;
//apply the css
$('p').css({
'top': vert - 53,
'left': horz - 53,
'-webkit-box-shadow': '#a0a0a0 ' + sx + 'px ' + sy + 'px ' + b + 'px, inset ' + sx + 'px ' + sy + 'px ' + b + 'px #e3e3e3'
});
});
});
body {
padding: 0px;
}
div {
position: relative;
width: 400px;
height: 400px;
background-color: #f0f0f0;
}
p {
background-color: orange;
height: 100px;
width: 100px;
position: absolute;
top: 100px;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
<p>set the location</p>
</div>
fiddle

edit
To restrict movement once the box is clicked, just use a helper variable:
var cond = false;
$(yourElement).click(function () {
cond = true;
})
Then, in the body of your mousemove function:
if (cond) return false;
You should check whether the mouse is within the div using Element.getBoundingClientRect:
var boundary = document.getElementById("theDiv").getBoundingClientRect()
var vert = e.pageY;
var horz = e.pageX;
if (boundary.top <= vert && vert <= boundary.bottom &&
boundary.left <= horz && horz <= boundary.right) {
/* the rest of your code */
}
Element.getBoundingClientRect returns an object like this:
{
bottom: 408,
height: 400,
left: 8,
right: 408,
top: 8,
width: 400,
}
If you want to use jQuery, you can instead use
var left = $(item).offset().left
, top = $(item).offset().top
, right = left + $(item).width()
, bottom = top + $(item).height()
;
and set up a similar if condition.
demo:
$(function() {
var cond = false;
$("#theDiv").click(function () {
cond = true;
})
$(document).mousemove(function(e) {
if (cond) return false;
var boundary = document.getElementById("theDiv").getBoundingClientRect()
// assign the co-ords as vars so
var vert = e.pageY;
var horz = e.pageX;
if (boundary.top <= vert && vert <= boundary.bottom && boundary.left <= horz && horz <= boundary.right) {
// get co -ords for the center of the box
centx = Math.ceil($('div').width() / 2);
centy = Math.ceil($('div').height() / 2);
// checking to see if the cursor is outside the boudries of the box and stoping the circle moving past them
if (e.pageY + 53 > Math.ceil($('div').height())) var vert = Math.ceil($('div').height() - 47);
if (e.pageY - 53 < 0) vert = 53;
if (e.pageX + 53 > Math.ceil($('div').width())) var horz = Math.ceil($('div').width() - 47);
if (e.pageX - 53 < 0) horz = 53;
// work out the distance between the cursor and the center of box
disx = horz - centx;
disy = vert - centy;
// work out the scale of the shadow
sx = -disx * 0.1;
sy = -disy * 0.1;
// work out the shadow blur
b = (Math.abs(sx) + Math.abs(sy)) * 0.5;
//apply the css
$('p').css({
'top': vert - 53,
'left': horz - 53,
'-webkit-box-shadow': '#a0a0a0 ' + sx + 'px ' + sy + 'px ' + b + 'px, inset ' + sx + 'px ' + sy + 'px ' + b + 'px #e3e3e3'
});
}
});
});
body {
padding: 0px;
}
div {
position: relative;
width: 400px;
height: 400px;
background-color: #f0f0f0;
}
p {
background-color: orange;
height: 100px;
width: 100px;
position: absolute;
top: 100px;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theDiv">
<p>set the location</p>
</div>
fiddle