Develop Reference

Transition is not working properly in Safari

So I've made a custom cursor for my next website. In Chrome it works as it should but in Safari it's laggy...
I've tried several things like using the webkit stuff but it still doesn't work.
here is the Codepen
html
<div class="cursor"></div>
css
body{
background: #fff;
width: 100%;
height: 100vh;
}
.cursor{
position: fixed;
left: 0px;
top: 0;
width: 25px;
height: 25px;
transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-moz-transition-duration:0.3s;
transition-timing-function: cubic-bezier(.33,.81,.66,.95);
-webkit-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
-moz-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
background-color: #fff;
mix-blend-mode: difference;
border-radius: 50%;
pointer-events: none;
}
js
let cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', moveCursor);
function moveCursor(e) {
let x = e.clientX;
let y = e.clientY;
cursor.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`
}

I've had nothing but trouble with dynamic transform values in safari. It seems they calculate positions in the window space a little different than other browsers. No source on that one, just my own trials and tribulations.
I would suggest you change your approach, and use top and left values.
I tested this in safari and it's miles more responsive.
let cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', moveCursor);
function moveCursor(e) {
let x = e.clientX;
let y = e.clientY;
cursor.style.top = `${y}px`
cursor.style.left = `${x}px`
}
body {
background: #fff;
width: 100%;
height: 100vh;
}
.cursor {
position: fixed;
left: 0px;
top: 0;
width: 25px;
height: 25px;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.33, .81, .66, .95);
background-color: #fff;
mix-blend-mode: difference;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
<div class="cursor"></div>
I kept the translate(-50%, -50%) as a permanent value on the cursor, and only updated top and left with javascript.
As a side note, the vendor prefixes are not really necessary for those properties. No need to add them. https://caniuse.com/css-transitions

The translate calc in you js is forcing the cursor to the center.
The transition delay is too long preventing it for following the cursor.
Codepen: https://codepen.io/diomedefan/pen/RwMaYWe
let cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', moveCursor);
function moveCursor(e) {
let x = e.clientX;
let y = e.clientY;
cursor.style.transform = `translate(calc(${x}px), calc(${y}px))`
}
body{
background: #fff;
width: 100%;
height: 100vh;
}
.cursor{
position: fixed;
left: 0px;
top: 0;
width: 25px;
height: 25px;
transition-duration:0.2s;
-webkit-transition-duration:0.2s;
-ms-transition-duration:0.2s;
-moz-transition-duration:0.2s;
transition-timing-function: cubic-bezier(.33,.81,.66,.95);
-webkit-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
-moz-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
background-color: #fff;
mix-blend-mode: difference;
border-radius: 50%;
pointer-events: none;
}
<div class="cursor"></div>

The answer for my particular case was pretty interesting.
Instead of using css transitions I used a lerp function in javascript:
var mouseX = window.innerWidth / 2,
mouseY = window.innerHeight / 2;
var $ = jQuery
var circle = {
el: $('.cursor'),
x: window.innerWidth / 2,
y: window.innerHeight / 2,
w: 25,
h: 25,
update: function() {
l = this.x - this.w / 2;
t = this.y - this.h / 2;
this.el.css({
'transform': 'translate3d(' + l + 'px, ' + t + 'px, 0)'
});
}
}
$(window).mousemove(function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
})
setInterval(move, 1000 / 60)
function move() {
circle.x = lerp(circle.x, mouseX, 0.1);
circle.y = lerp(circle.y, mouseY, 0.1);
circle.update()
}
function lerp(start, end, amt) {
return (1 - amt) * start + amt * end
}
.cursor {
position: absolute;
width: 25px;
height: 25px;
transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
top: 0;
left: 0;
z-index: 999;
background-color: #fff;
mix-blend-mode: difference;
border-radius: 50%;
pointer-events: none;
}
body {
background: #fff;
}
<div class="cursor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
r

How to change text color when custom cursor is on hover [duplicate]

This question already has answers here:
Invert text color on mouse hover
(2 answers)
Closed 2 years ago.
When red cursor is hover on Works text, i want to change the Works text color black to blue and text will be zoom In on that red cursor area. anyone suggest me how to do this in JavaScript
jQuery(document).ready(function() {
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
$(document).mousemove(function(e){
mouseX = e.pageX - 30;
mouseY = e.pageY - 30;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$(".cursor").css({left: xp +'px', top: yp +'px'});
}, 20);
});
h1{
text-align: center;
font-size: 5rem;
margin-top: 20%;
}
.cursor{
position: absolute;
background: red;
width: 100px;
height: 100px;
border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor">

You should add pointer-events: none; to the cursor, so it doesn't interefer with the element below.
And then add Hover or whatever pseudoclass you need to colorize it.
jQuery(document).ready(function() {
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
$(document).mousemove(function(e){
mouseX = e.pageX - 30;
mouseY = e.pageY - 30;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$(".cursor").css({left: xp +'px', top: yp +'px'});
}, 20);
});
h1{
text-align: center;
font-size: 5rem;
margin-top: 20%;
}
h1:hover {
color: red;
}
.cursor{
position: absolute;
background: red;
width: 100px;
height: 100px;
border-radius: 50px;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor">

Consider the following code example.
jQuery(function($) {
var mouseX = 0,
mouseY = 0,
xp = 0,
yp = 0;
function isOver(e, obj) {
var o = false,
x = e.pageX,
y = e.pageY;
var pos = obj.offset();
pos = {
x1: pos.left,
y1: pos.top,
x2: pos.left + obj.width(),
y2: pos.top + obj.height()
};
if ((x >= pos.x1 && x <= pos.x2) && (y >= pos.y1 && y <= pos.y2)) {
o = true;
}
return o;
}
function moveCursor(evt) {
mouseX = evt.pageX - 30;
mouseY = evt.pageY - 30;
xp += ((mouseX - xp) / 6);
yp += ((mouseY - yp) / 6);
$(".cursor").css({
left: xp + 'px',
top: yp + 'px'
});
if (isOver(evt, $("h1"))) {
$("h1").addClass("blue zoom");
} else {
$("h1").removeClass("blue zoom");
}
}
$(document).mousemove(moveCursor);
});
h1 {
text-align: center;
font-size: 5rem;
margin-top: 20%;
transform: scale(1);
}
.blue {
color: blue;
}
.zoom {
transform: scale(1.25);
}
.cursor {
position: absolute;
background: rgba(255, 0, 0, 0.45);
width: 100px;
height: 100px;
border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor"></div>
It was not clear to me what you mean by "text will be zoom In on that red cursor area." I suspect you can transform the text maybe? At least this way you can trigger the zoom action you want.
This uses basic collision detection to determine if the mouse isOver() a specific element.

Fill in overlapping circle area

I have two circles that intersect and I want to make the intersecting area have a color, even when the two circles are transparent. I thought I could find some way to do this with css mix-blend-mode property but I have had no success with it.
Of course, I could make the circles have color and decrease their opacity, but I want them to be either white or transparent, where only the overlapped area gets background color.
I want the intersecting area to be able to change dynamically because one circle will follow the mouse.
Here is the codepen for that.
I'm not sure where to start on this, if css has some technique or if it will have to be done with jquery.
$(document).mousemove(function(e) {
$('.cursor').eq(0).css({
left: e.pageX - 25,
top: e.pageY - 20
});
// circles
var c1 = $('.cursor');
var c2 = $('.circle');
// radius
var d1 = c1.outerWidth(true)/2;
var d2 = c2.outerWidth(true)/2;
// centers of first circle
var x1 = c1.offset().left + c1.width()/2;
var y1 = c1.offset().top + c1.height()/2;
// centers of second circle
var x2 = c2.offset().left + c2.width()/2;
var y2 = c2.offset().top + c2.height()/2;
var i1 = c2.find('.inter1');
var i2 = c2.find('.inter2');
var o = c1.find('.overlap');
function calc() {
var a = d2;
var b = d1;
var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
var d = (b*b+c*c-a*a)/(2*c);
var h = Math.sqrt((b*b) - (d*d));
if (d < 0 || $.isNumeric(h)) {
c2.css('border-color', 'red');
} else {
c2.css('border-color', 'black');
}
var x3 = (x2-x1)*d/c + (y2-y1)*h/c + x1;
var y3 = (y2-y1)*d/c - (x2-x1)*h/c + y1;
var x4 = (x2-x1)*d/c - (y2-y1)*h/c + x1;
var y4 = (y2-y1)*d/c + (x2-x1)*h/c + y1;
if ($.isNumeric(h)) {
i1.show();
i2.show();
} else {
i1.hide();
i2.hide();
}
i1.offset({ top: y3-5, left: x3-5});
i2.offset({ top: y4-5, left: x4-5});
} calc();
});
body {
background: #fff;
}
.overlap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.cursor {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
pointer-events: none;
z-index: 999;
border: 1px solid black;
outline: 1px solid #c9d3ff;
overflow: none;
}
.circle {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid black;
outline: 1px solid #c9d3ff;
}
.circle::after,
.cursor::after {
display: block;
content: '';
height: 1px;
background: #c9d3ff;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.circle::before,
.cursor::before {
display: block;
content: '';
width: 1px;
background: #c9d3ff;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.inter {
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
</div>
<div class="circle">
<div class="inter1 inter"></div>
<div class="inter2 inter"></div>
<div>

One way you can approach this is by adding a "inner-cursor" circle inside the main circle. Based on mouse movement it will move with the main cursor given the illusion of overlap.
In this case, the background color of the intersecting circles will not matter. Also, you do not have to worry about mix-blend-mode since the inner cursor has a background color and is hidden. It is only viewed if the mouse hovers over the main circle.
See this example:
$(document).mousemove(function(e) {
// elements
let cursor = $('.cursor');
let innerCursor = $('.inner-cursor');
let c2 = $('.circle');
let pos = {
left: e.pageX - 25,
top: e.pageY - 20
};
cursor.css(pos);
innerCursor.css({
left: pos.left - c2.offset().left,
top: pos.top - c2.offset().top
});
// circles
// radius
var d1 = cursor.outerWidth(true) / 2;
var d2 = c2.outerWidth(true) / 2;
// centers of first circle
var x1 = cursor.offset().left + cursor.width() / 2;
var y1 = cursor.offset().top + cursor.height() / 2;
// centers of second circle
var x2 = c2.offset().left + c2.width() / 2;
var y2 = c2.offset().top + c2.height() / 2;
var i1 = c2.find('.inter1');
var i2 = c2.find('.inter2');
var o = cursor.find('.overlap');
function calc() {
var a = d2;
var b = d1;
var c = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
var d = (b * b + c * c - a * a) / (2 * c);
var h = Math.sqrt((b * b) - (d * d));
// console.log(a, b, c, d, h);
if (d < 0 || $.isNumeric(h)) {
c2.css('border-color', 'red');
} else {
c2.css('border-color', 'black');
}
var x3 = (x2 - x1) * d / c + (y2 - y1) * h / c + x1;
var y3 = (y2 - y1) * d / c - (x2 - x1) * h / c + y1;
var x4 = (x2 - x1) * d / c - (y2 - y1) * h / c + x1;
var y4 = (y2 - y1) * d / c + (x2 - x1) * h / c + y1;
if ($.isNumeric(h)) {
i1.show();
i2.show();
} else {
i1.hide();
i2.hide();
}
i1.offset({
top: y3 - 5,
left: x3 - 5
});
i2.offset({
top: y4 - 5,
left: x4 - 5
});
}
calc();
});
body {
background: #fff;
}
.clip {
display: inline-block;
background: blue;
height: 50px;
width: 50px;
border-radius: 50%;
clip-path: ellipse(50px 50px at 50% 0%);
position: absolute;
left: 750px;
top: 40px;
}
.cursor {
left: 750px;
top: 40px;
}
.cursor {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
pointer-events: none;
z-index: 999;
border: 1px solid black;
outline: 1px solid #c9d3ff;
overflow: none;
mix-blend-mode: multiply;
background: rgba(100, 100, 100, 0.1);
}
.circle {
background: rgba(100, 100, 100, 0.1);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid black;
outline: 1px solid #c9d3ff;
overflow: hidden;
}
.circle::after,
.cursor::after {
display: block;
content: '';
height: 1px;
background: #c9d3ff;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.circle::before,
.cursor::before {
display: block;
content: '';
width: 1px;
background: #c9d3ff;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.inter {
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
display: none;
}
.inner-cursor {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
pointer-events: none;
background: green;
left: 50%;
top: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
</div>
<span class="clip"></span>
<div class="circle">
<div class='inner-cursor'></div>
<div class="inter1 inter"></div>
<div class="inter2 inter"></div>
</div>

On easy idea using only CSS is to consider a radial-gradient as background using background-attachement:fixed. You apply this background to the cursor element and you make its dimension/position the same as the fixed element.
All you need to add in your code is:
background:radial-gradient(circle,blue 100px,transparent 100px) fixed no-repeat
I have also optimized the code to remove the line you draw with pseudo element to consider linear-gradient
$(document).mousemove(function(e) {
$('.cursor').eq(0).css({
left: e.pageX - 25,
top: e.pageY - 20
});
// circles
var c1 = $('.cursor');
var c2 = $('.circle');
// radius
var d1 = c1.outerWidth(true)/2;
var d2 = c2.outerWidth(true)/2;
// centers of first circle
var x1 = c1.offset().left + c1.width()/2;
var y1 = c1.offset().top + c1.height()/2;
// centers of second circle
var x2 = c2.offset().left + c2.width()/2;
var y2 = c2.offset().top + c2.height()/2;
var i1 = c2.find('.inter1');
var i2 = c2.find('.inter2');
var o = c1.find('.overlap');
function calc() {
var a = d2;
var b = d1;
var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
var d = (b*b+c*c-a*a)/(2*c);
var h = Math.sqrt((b*b) - (d*d));
if (d < 0 || $.isNumeric(h)) {
c2.css('border-color', 'red');
} else {
c2.css('border-color', 'black');
}
var x3 = (x2-x1)*d/c + (y2-y1)*h/c + x1;
var y3 = (y2-y1)*d/c - (x2-x1)*h/c + y1;
var x4 = (x2-x1)*d/c - (y2-y1)*h/c + x1;
var y4 = (y2-y1)*d/c + (x2-x1)*h/c + y1;
if ($.isNumeric(h)) {
i1.show();
i2.show();
} else {
i1.hide();
i2.hide();
}
i1.offset({ top: y3-5, left: x3-5});
i2.offset({ top: y4-5, left: x4-5});
} calc();
});
body {
background: #fff;
margin:0;
}
*{
box-sizing:border-box;
}
.cursor {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
pointer-events: none;
z-index: 999;
border: 1px solid black;
outline: 1px solid #c9d3ff;
background:
linear-gradient(#c9d3ff,#c9d3ff) center/100% 1px,
linear-gradient(#c9d3ff,#c9d3ff) center/1px 100%,
radial-gradient(circle,blue 100px,transparent 101px) fixed,
yellow;
background-repeat:no-repeat;
}
.circle {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid black;
outline: 1px solid #c9d3ff;
background:
linear-gradient(#c9d3ff,#c9d3ff) center/100% 1px,
linear-gradient(#c9d3ff,#c9d3ff) center/1px 100%,
#f2f2f2;
background-repeat:no-repeat;
}
.inter {
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
</div>
<div class="circle">
<div class="inter1 inter"></div>
<div class="inter2 inter"></div>
<div>
And if the circle is not in the middle you simply adjust the position.
$(document).mousemove(function(e) {
$('.cursor').eq(0).css({
left: e.pageX - 25,
top: e.pageY - 20
});
// circles
var c1 = $('.cursor');
var c2 = $('.circle');
// radius
var d1 = c1.outerWidth(true)/2;
var d2 = c2.outerWidth(true)/2;
// centers of first circle
var x1 = c1.offset().left + c1.width()/2;
var y1 = c1.offset().top + c1.height()/2;
// centers of second circle
var x2 = c2.offset().left + c2.width()/2;
var y2 = c2.offset().top + c2.height()/2;
var i1 = c2.find('.inter1');
var i2 = c2.find('.inter2');
var o = c1.find('.overlap');
function calc() {
var a = d2;
var b = d1;
var c = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
var d = (b*b+c*c-a*a)/(2*c);
var h = Math.sqrt((b*b) - (d*d));
if (d < 0 || $.isNumeric(h)) {
c2.css('border-color', 'red');
} else {
c2.css('border-color', 'black');
}
var x3 = (x2-x1)*d/c + (y2-y1)*h/c + x1;
var y3 = (y2-y1)*d/c - (x2-x1)*h/c + y1;
var x4 = (x2-x1)*d/c - (y2-y1)*h/c + x1;
var y4 = (y2-y1)*d/c + (x2-x1)*h/c + y1;
if ($.isNumeric(h)) {
i1.show();
i2.show();
} else {
i1.hide();
i2.hide();
}
i1.offset({ top: y3-5, left: x3-5});
i2.offset({ top: y4-5, left: x4-5});
} calc();
});
body {
background: #fff;
margin:0;
}
*{
box-sizing:border-box;
}
.cursor {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
pointer-events: none;
z-index: 999;
border: 1px solid black;
outline: 1px solid #c9d3ff;
background:
linear-gradient(#c9d3ff,#c9d3ff) center/100% 1px,
linear-gradient(#c9d3ff,#c9d3ff) center/1px 100%,
radial-gradient(circle at 20% 50%,blue 100px,transparent 101px) fixed
yellow;
background-repeat:no-repeat;
}
.circle {
border-radius: 50%;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid black;
outline: 1px solid #c9d3ff;
background:
linear-gradient(#c9d3ff,#c9d3ff) center/100% 1px,
linear-gradient(#c9d3ff,#c9d3ff) center/1px 100%,
#f2f2f2;
background-repeat:no-repeat;
}
.inter {
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
position: absolute;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
</div>
<div class="circle">
<div class="inter1 inter"></div>
<div class="inter2 inter"></div>
<div>
We basically use the same value of top/left to have the following:
radial-gradient(circle at [left] [top],blue [radius],transparent [radius]);
I add 1px to transparent to avoid the jagged edge

If you feel comfortable with HTML <canvas> element it's probably your best friend for this type of task, I doubt there's a CSS way to achieve what you want.
(If there is a CSS way, it's probably going to be lot more complicated and have much slower perfomance than doing it with canvas anyway)
You can take a look at the code below to be inspired (source and live example)
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body data-rsssl=1>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// draw blue circle inside clipping region
context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
// draw yellow circle inside clipping region
context.beginPath();
context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
// draw red circle inside clipping region
context.beginPath();
context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
/*
* restore() restores the canvas context to its original state
* before we defined the clipping region
*/
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>

Why color balls are not visible while mouse click?

This is the Code I'm testing =>
I followed everything but cant make result as preview, everything is working fine but color balls are not visible i think
pls help me out where i am missing the actual code? i am hitting my head again and again and tryng but no use!
p.s. i tried in local and js fiddle too, not working either -> https://jsfiddle.net/mhLjps6q/
here is
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
sizes = [
15, 20, 25, 35, 45
],
colors = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
'#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
],
mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticleCount () {
$('.particle-count > .number').text(particleCount);
};
$w
.on( 'resize' , function () {
wWidth = $w.width();
wHeight = $w.height();
});
$d
.on( 'mousemove touchmove' , function ( event ) {
event.preventDefault();
event.stopPropagation();
mouseX = event.clientX;
mouseY = event.clientY;
if( !!event.originalEvent.touches ) {
mouseX = event.originalEvent.touches[0].clientX;
mouseY = event.originalEvent.touches[0].clientY;
}
})
.on( 'mousedown touchstart' , function( event ) {
if( event.target === credit.get(0) ){
return;
}
mouseX = event.clientX;
mouseY = event.clientY;
if( !!event.originalEvent.touches ) {
mouseX = event.originalEvent.touches[0].clientX;
mouseY = event.originalEvent.touches[0].clientY;
}
var timer = setInterval(function () {
$d
.one('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
})
createParticle( event );
}, 1000 / 60)
});
function createParticle ( event ) {
var particle = $('<div class="particle"/>'),
size = sizes[Math.floor(Math.random() * sizes.length)],
color = colors[Math.floor(Math.random() * colors.length)],
negative = size/2,
speedHorz = Math.random() * 10,
speedUp = Math.random() * 25,
spinVal = 360 * Math.random(),
spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
otime,
time = otime = (1 + (.5 * Math.random())) * 1000,
top = (mouseY - negative),
left = (mouseX - negative),
direction = Math.random() <=.5 ? -1 : 1 ,
life = 10;
particle
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles );
particleCount++;
updateParticleCount();
var particleTimer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
opacity: ((time / otime)/2) + .25,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
particle.remove();
particleCount--;
updateParticleCount();
clearInterval(particleTimer);
}
}, 1000 / 50);
}
html, body {
background: #fff;
width: 100%;
height: 100%;
overflow: hidden;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'PT Sans', sans-serif;
}
.title {
font-size: 10vw;
font-weight: 700;
text-align: center;
margin-top: 15%;
color: #444;
}
.subtitle {
font-size: 4vw;
color: #777;
font-weight: normal;
text-align: center;
margin-top: 0;
}
.credit {
position: absolute;
bottom: 5px;
width: 100%;
display: block;
text-align: center;
color: #777;
}
.credit > a {
color: #777;
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
border-radius: 100%;
background: transparent;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles > .particle.smaller {
width: 5px;
height: 5px;
}
.particles > .particle.small {
width: 10px;
height: 10px;
}
.particles > .particle.normal {
width: 15px;
height: 15px;
}
.particles > .particle.big {
width: 20px;
height: 20px;
}
.particles > .particle.bigger {
width: 25px;
height: 25px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1 class='title'>PARTICLES!</h1>
<h4 class='subtitle'>Click / Touch Anywhere</h4>
<div class='particle-count'>
<span class='number'>0</span>
Particles
</div>
<span class='credit'>
Created by
<a href='https://twitter.com/Shawn_Sauce' target='_blank'>Shawn G.</a>
</span>
<div class='particles'></div>
`

Found the error why it is not working on your localhost and JSFiddle .
You Should start your JS code with $(document).ready(function()
Use my code and try to run it on your localhost and JSFiddle, it will work.
<html>
<head>
<title>PARTICLES</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
sizes = [
15, 20, 25, 35, 45
],
colors = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
'#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
],
mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticleCount () {
$('.particle-count > .number').text(particleCount);
};
$w
.on( 'resize' , function () {
wWidth = $w.width();
wHeight = $w.height();
});
$d
.on( 'mousemove touchmove' , function ( event ) {
event.preventDefault();
event.stopPropagation();
mouseX = event.clientX;
mouseY = event.clientY;
if( !!event.originalEvent.touches ) {
mouseX = event.originalEvent.touches[0].clientX;
mouseY = event.originalEvent.touches[0].clientY;
}
})
.on( 'mousedown touchstart' , function( event ) {
if( event.target === credit.get(0) ){
return;
}
mouseX = event.clientX;
mouseY = event.clientY;
if( !!event.originalEvent.touches ) {
mouseX = event.originalEvent.touches[0].clientX;
mouseY = event.originalEvent.touches[0].clientY;
}
var timer = setInterval(function () {
$d
.one('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
})
createParticle( event );
}, 1000 / 60)
});
function createParticle ( event ) {
var particle = $('<div class="particle"/>'),
size = sizes[Math.floor(Math.random() * sizes.length)],
color = colors[Math.floor(Math.random() * colors.length)],
negative = size/2,
speedHorz = Math.random() * 10,
speedUp = Math.random() * 25,
spinVal = 360 * Math.random(),
spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
otime,
time = otime = (1 + (.5 * Math.random())) * 1000,
top = (mouseY - negative),
left = (mouseX - negative),
direction = Math.random() <=.5 ? -1 : 1 ,
life = 10;
particle
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
background: color,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
})
.appendTo( particles );
particleCount++;
updateParticleCount();
var particleTimer = setInterval(function () {
time = time - life;
left = left - (speedHorz * direction);
top = top - speedUp;
speedUp = Math.min(size, speedUp - 1);
spinVal = spinVal + spinSpeed;
particle
.css({
height: size + 'px',
width: size + 'px',
top: top + 'px',
left: left + 'px',
opacity: ((time / otime)/2) + .25,
transform: 'rotate(' + spinVal + 'deg)',
webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
particle.remove();
particleCount--;
updateParticleCount();
clearInterval(particleTimer);
}
}, 1000 / 50);
}
});
</script>
<style>
html, body {
background: #fff;
width: 100%;
height: 100%;
overflow: hidden;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'PT Sans', sans-serif;
}
.title {
font-size: 10vw;
font-weight: 700;
text-align: center;
margin-top: 15%;
color: #444;
}
.subtitle {
font-size: 4vw;
color: #777;
font-weight: normal;
text-align: center;
margin-top: 0;
}
.credit {
position: absolute;
bottom: 5px;
width: 100%;
display: block;
text-align: center;
color: #777;
}
.credit > a {
color: #777;
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
border-radius: 100%;
background: transparent;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles > .particle.smaller {
width: 5px;
height: 5px;
}
.particles > .particle.small {
width: 10px;
height: 10px;
}
.particles > .particle.normal {
width: 15px;
height: 15px;
}
.particles > .particle.big {
width: 20px;
height: 20px;
}
.particles > .particle.bigger {
width: 25px;
height: 25px;
}
</style>
</head>
<body>
<h1 class='title'>PARTICLES!</h1>
<h4 class='subtitle'>Click / Touch Anywhere</h4>
<div class='particle-count'>
<span class='number'>0</span>
Particles
</div>
<span class='credit'>
Created by
<a href='https://twitter.com/Shawn_Sauce' target='_blank'>Shawn G.</a>
</span>
<div class='particles'></div>
</body>
</html>

Why is my 3d cube not rotating as expected?

I'm doing a 3d dice that rotates when you swipe its face. The problem is that it is acting really weird on some cases. For example, if you run the snippet and swipe left two times then swipe down, it does a crazy rotation...
Here is the code:
$(function() {
var X = 0,
Y = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate(what) {
switch (what) {
case "X":
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
break;
case "Y":
$(".cube").css("transform", "rotateY(" + Y +"deg) rotateX(" + X + "deg)");
break;
}
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
Y -= 90;
rotate("Y");
});
$(".thirdDimension").on("swiperight", function(e){
Y += 90;
rotate("Y");
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate("X");
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate("X");
});
});
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
}
.tableContainer, .vcenter {
height: 100%;
width: 100%;
}
.tableContainer {
display: table;
}
.vcenter {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.thirdDimension {
perspective: 500px;
perspective-origin: 50% 100px;
}
.cube {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 30px black;
font-size: 72pt;
padding-top: 35px;
text-align: center;
background-color: black;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.up {
transform: rotateX(90deg) translateY(-100px);
transform-origin: top center;
}
.down {
transform: rotateX(-90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube {
-webkit-transition: .3s all linear;
cursor: pointer;
}
.cube div:after {
display: block;
position: absolute;
width: 100px;
height: 100px;
content: "";
border: 1px solid;
}
.front:after {
top: 0;
right: 0;
background-color: green;
}
.back:after {
bottom: 0;
right: 0;
background-color: blue;
}
.right:after {
top: 0;
left: 0;
background-color: red;
}
.left:after {
bottom: 0;
left: 0;
background-color: DarkOrange;
}
.up:after {
right: 0;
bottom: 0;
background-color: white;
}
.down:after {
bottom: 0;
left: 0;
background-color: yellow;
}
#debug {
position: fixed;
background-color: cyan;
overflow: auto;
height: 50px;
width: 100%;
}
/*
.cube {
animation: linear 5s rotate infinite;
}
#-webkit-keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(720deg);
}
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id='debug'></div>
<div class='tableContainer'>
<div class='vcenter'>
<div class='thirdDimension'>
<div class='cube'>
<div class='up'></div>
<div class='front'></div>
<div class='right'></div>
<div class='left'></div>
<div class='back'></div>
<div class='down'></div>
</div>
</div>
</div>
</div>
EDIT: This link: http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/ says that the order of the rotations matter. I changed my code slightly but it keeps rotating unexpectedly...

First: Settings the transform different ways for either "X" or "Y" was causing the massive spinning. I changed them both to:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
If believe you wish for the cube to always spin in the direction of the swipe. Continue reading if so or if not , all you needed to change was the above code.
Second: When you spin the cube you are changing the orientation. The x-axis is never messed up but the y-axis and z-axis are switching without you really noticing.
Now you can to add rotateZ to the mix:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
I have changed the code here in this CodePen to provide an example. I have not completed it because I have revealed the issue, but do not have the time to perfect it.
$(function() {
var X = 0,
Y = 0,
Z = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate() {
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
//Y -= 90;
check(-90);
rotate();
});
$(".thirdDimension").on("swiperight", function(e){
//Y += 90;
check(90);
rotate();
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate();
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate();
});
function check(num) {
var temp = Math.abs(X % 360);
switch (temp) {
case 0:
console.log(temp);
Y += num;
break;
case 90:
console.log(temp);
Z -= num
break;
case 180:
console.log(temp);
Y -= num;
break;
case 270:
console.log(temp);
Z -= num;
break;
}
}
});
You need to check the y-axis (Math.abs(Y % 360))) and possibly the z-axis and rotate either the y-axis and z-axis (+- 90) accordingly.
This mostly works, but needs fine tuning in determining the correct axis to rotate. Good luck.

Your problem is more how you have conceptualized rotation than any coding mistakes.
If you rotateY(90), then rotateX(90) - then by the time you get to rotateX(90), your X axis has rotated by 90 degrees, so it is no longer left to right, but into/out of screen. So your thing will look like it's doing a 2d rotate in that particular instance.
And to take it further, if the user now swipes left to right, they are actually swiping along the Z axis, and you need to rotate Z.
To fix this, you need to keep track of the rotation you have done and map the user interface to the cube in a more dynamic way. Swiping left to right doesn't always mean rotate Y, it means rotate along the axis that is currently oriented left to right.
I suggest you find a rubik's cube or similar, and label the sides per axis (e.g. Red side is X axis), simulate the swiping, and then that should make things more clear, as you'll see those axis move around the cube.