We Keep Coding

How to increase FPS parallax plugin? - javascript

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.

Related

I am trying to draw a path between points wihtout using canvas or any other librares.
Everything works fine for positive degrees, but it doesn't for negative..
My "points" are 150x150 [px], that's why there is that +75px in left position.
This is my code:
useEffect(() => {
let x1 = spider1.x;
let y1 = spider1.y;
let x2 = spider2.x;
let y2 = spider2.y;
if (x1 > x2) {
let xTmp = x1;
let yTmp = y1;
x1 = x2;
y1 = y2;
x2 = xTmp;
y2 = yTmp;
}
if (x1 === x2) {
const height = Math.abs(y2 - y1).toString();
setStyle({
width: '5px',
left: (x1 + 75).toString() + 'px',
top: `${Math.min(y1, y2) + 75}px`,
height: `${height}px`,
transform: 'rotate(0deg)'
});
} else {
const a = (y2 - y1) / (x2 - x1);
const radians = Math.atan(a);
const degrees = radians * (180 / Math.PI);
setStyle({
width: `${Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))}px`,
left: (x1 + 75).toString() + 'px',
top: `${Math.min(y1, y2) + 75}px`,
height: `5px`,
transform: `rotate(${degrees}deg)`,
transformOrigin: `${degrees > 0 ? '0% 0%' : '100% 100%'}`
});
}
}, [spider1, spider2]);
return <div className='net' style={style} ref={myRef}></div>;
And the net class:
.net {
position: absolute;
background-color: red;
z-index: 90;
}
On the screens we have the same objects, but the degrees on the second one are "-" and the line doesn't connect that two squares because of that

This example works. You will have to compare yours with mine as to what the differences are.
Note: I just wrote it from scratch rather using your example.
Just click "Random position"
var button = document.getElementById("new-points");
button.onclick = function() {
var xy1 = {
m_x : Math.floor((Math.random() * 200) + 1),
m_y : Math.floor((Math.random() * 200) + 1),
};
var xy2 = {
m_x : Math.floor((Math.random() * 200) + 1),
m_y : Math.floor((Math.random() * 200) + 1),
};
var dotA = document.getElementById("dotA");
dotA.style.left = (xy1.m_x - 5) + "px";
dotA.style.top = (xy1.m_y - 5) + "px";
var dotB = document.getElementById("dotB");
dotB.style.left = (xy2.m_x - 5) + "px";
dotB.style.top = (xy2.m_y - 5) + "px";
var line = document.getElementById("line");
var distance = Math.hypot(xy2.m_x - xy1.m_x, xy2.m_y - xy1.m_y);
line.style.width = distance + "px";
line.style.left = xy1.m_x + "px";
line.style.top = xy1.m_y + "px";
var angle = ((Math.atan2(xy1.m_x - xy2.m_x, xy2.m_y - xy1.m_y) + (Math.PI / 2.0)) * 180 / Math.PI);
line.style.transform = "rotate(" + angle + "deg)";
line.style.display = "block";
}
#new-points {
border: 1px solid black;
padding: 5px;
width: 200px;
text-align: center;
}
.dot {
position: absolute;
width: 10px;
height: 10px;
background: blue;
}
#line {
position: absolute;
border-top: solid 1px red;
height: 1px;
max-height: 1px;
transform-origin: 0% 0%;
}
<div id="dotA" class="dot"></div>
<div id="dotB" class="dot"></div>
<div id="line"></div>
<div id="new-points" style="">
Random position
</div>
I've also tried the atan method for the above and it doesn't work. You can try it yourself and see what happens.

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>

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!

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>

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