Develop Reference

Animate elements with same classes, but individuallly

I am trying to animate elements individually that have the sames classes.
I am a complete jQuery noob, and can't figure out how to achieve that and would please need your help.
Here is the current code I have: (but once I hover on a card/blurb, every single one is animating)
I would like to only target the current element hovered to animate.
Best regards,
Joevin
/*add perspective to row for 3d perspective of child elements*/
.et_pb_blurb {
perspective: 1000px;
}
/*preserve-3d needed for 3d effect on card elements*/
.et_pb_blurb_content {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
/*transition timing function and duration for card elements*/
.et_pb_main_blurb_image,
.et_pb_module_header,
.et_pb_blurb_description,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
/*transform styles for card elements*/
.et_pb_main_blurb_image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et_pb_module_header.transform-3d {
transform: translateZ(150px) !important;
}
.et_pb_blurb_description.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>
This is my script
//Items
var $hoverContainer = $(".et_pb_blurb");
var $mousemoveCard = $(".et_pb_blurb_content");
var $cardImage = $(".et_pb_main_blurb_image");
var $cardHeading = $(".et_pb_module_header");
var $cardInfo = $(".et_pb_blurb_description");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

CSS transform: translateX( to the right );

I want to make a particle system for my home page. Blue little circular dots should go from left to right and then reapear in the left so that it makes a loop.
Image of particles
The code below will generate 150 dots that all have different properties as speed color and size and will apear at random positions when loading the page. Either by looping the animation or by adding new dots I want to continue the animation infinitely.
// ========== JAVASCRIPT ==========
function Dot(){
var colors = [
"#313146",
"#36364f",
"#3d3d5c",
"#404066"
];
var speed = Math.floor(Math.random() * 20) + 2;
this.obj = document.createElement("div");
this.obj.classList.add("dot");
this.obj.style.top = (window.innerHeight * Math.random()) + 'px'; // random Y-position after page load
this.obj.style.left = (window.innerWidth * Math.random()) + 'px'; // random X-position after page load
this.size = Math.floor(Math.random() * 5) + 4; // random size
this.obj.style.height = this.size + 'px';
this.obj.style.width = this.size + 'px';
this.obj.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]; // random color
this.obj.style.animation = `move ${speed}s linear`; // start animation
document.body.appendChild(this.obj);
setTimeout(del, speed*1000, this.obj); // THIS FUNCTION SHOULD BE REMOVED IF ANIMATION GETS A LOOP
function del(element) {
element.parentNode.removeChild(element);
};
};
for(var i = 0 ; i < 151 ; i++ ){ // creating 150 dots
new Dot();
};
// ========== CSS ==========
.dot {
border-radius: 50%;
z-index: -1;
}
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(100vw);
}
}
My problem is that as the dots apear with random positions, and all of them get a transform: translateX(100vw);, they will move out of the screen for a while before being deleted or reapeared at the beginning. My second image shows in red where the dot is moving to, and where it should move to.
image
What I tried allready:
1.
JS:
this.obj.style.animation = `move ${speed}s linear infinite`; added infinite and deleted the code that deletes the dots.
CSS:
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(right);
}
}
<= Does not exist, and couldn't find working code equal to this idea.
This would have been a solution.
2.
Adding a second animation with dots coming from the left when other ones where deleted.
Ended in a gap between the 150 dots of the first animation and the incoming dots of the second animation.
Is there any other possibility of moving the dots from left to right with different properties?
best regards

Since you are setting the position with JS so you can know exactly where each element will appear and use this information to adjust the animation.
Here is a basic example to illustrate:
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
left:var(--x,0px);
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(calc(100vw - var(--x,0px)));
}
}
<div class="dot" style="top:10px;--x:80px;"></div>
<div class="dot" style="top:20px;--x:150px;"></div>
<div class="dot" style="top:100px;--x:350px;"></div>
The variable --x will define left and will get substracted from the 100vw
For better support and since you are using JS, you can get rid of calc() and CSS variables. Simply do a small calculation to find the value of transform.
Here is an example where I am using jQuery for simplicity but you can easily make it a JS-only code:
$('.dot').each(function() {
$(this).css('transform','translateX('+ ($(window).width() - parseInt($(this).css('left')))+'px)');
});
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dot" style="top:10px;left:80px;"></div>
<div class="dot" style="top:20px;left:150px;"></div>
<div class="dot" style="top:100px;left:350px;"></div>
Worth to note that you need to update the value on window resize
Another idea to keep the loop effect is to have the same position and the same animation for all and you adjust the delay to simulate the different position:
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
left:0;
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100vw);
}
}
<div class="dot" style="top:10px;animation-delay:-1s;"></div>
<div class="dot" style="top:20px;animation-delay:-0.1s;animation-duration:1s"></div>
<div class="dot" style="top:100px;animation-delay:-0.5s;animation-duration:4s"></div>
The calculation is easy. If the animation duration is D then a delay of -D/2 will place the element in the center intially. -D*0.1 will place the image at 10% and so on.

I would suggest you to use requestAnimationFrame to animate your particles. Take a look at the following example. I've added the move method to the particle which is called from the animation loop and changing the particle's position. It also checks if the particle has reached the end of the screen and resets its position to -10 in this case.
function Dot(){
var colors = [
"yellow",
"red",
"green",
"black"
];
this.x = window.innerWidth * Math.random();
this.speed = Math.floor(Math.random() * 20) + 2;
this.obj = document.createElement("div");
this.obj.classList.add("dot");
this.obj.style.position = "fixed";
this.obj.style.top = (window.innerHeight * Math.random()) + 'px';
this.obj.style.left = this.x + 'px';
this.size = Math.floor(Math.random() * 5) + 4; // random size
this.obj.style.height = this.size + 'px';
this.obj.style.width = this.size + 'px';
this.obj.style.background = colors[Math.floor(Math.random()*colors.length)]; // random color
document.body.appendChild(this.obj);
this.move = function() {
this.x += this.speed;
if (this.x > window.innerWidth) {
this.x = -10;
}
this.obj.style.left = this.x + 'px';
};
};
var dots = Array.apply(null, Array(150)).map(a => new Dot());
requestAnimationFrame(paint);
function paint() {
requestAnimationFrame(paint);
for (dot of dots) {
dot.move();
}
}
.dot {
border-radius: 50%;
z-index: -1;
}
I also recommend you this great book about particle systems. It shows how to implement forces, interaction and complex behavior.

How Rotate image with css or javascript

I want to know if there is a way to rotate images without using fotoshop, i want to use css or javascript
The result that im looking for is here
The following solution works but i want to rotate my image without hover property , if i remove the hover here the image dont rotate
<style>
#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
</style>
if found the efect that i want here here

Use CSS' rotate, rotateX, rotateY, rotateZ. Little example:
img {
transform: inherit;
transition: all 0.3s;
width: 100px;
}
img:hover {
transform: rotateX(45deg)
rotateY(45deg)
rotateZ(45deg);
}
Fiddle
rotate is 2D transform method and rotateX, rotateY, rotateZ are 3D transform methods.
W3Schools references:
2D transforms
3D transforms

img {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

I think you are looking like following code and Here is the fiddle Link and Other Link
This might help you!!
<img class="image" src="https://www.arxan.com/wp-content/uploads/assets1/images/demo.png" alt="" width="120" height="120">
<style>
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>

Look at this class :
var ImgRotator = {
angle: parseInt(45),
image: {},
src: "",
canvasID: "",
intervalMS: parseInt(500),
jump: parseInt(5),
start_action: function (canvasID, imgSrc, interval, jumgAngle) {
ImgRotator.jump = jumgAngle;
ImgRotator.intervalMS = interval;
ImgRotator.canvasID = canvasID;
ImgRotator.src = imgSrc;
var image = new Image();
var canvas = document.getElementById(ImgRotator.canvasID);
image.onload = function () {
ImgRotator.image = image;
canvas.height = canvas.width = Math.sqrt(image.width * image.width + image.height * image.height);
window.setInterval(ImgRotator.keepRotating, ImgRotator.intervalMS);
//theApp.keepRotating();
};
image.src = ImgRotator.src;
},
keepRotating: function () {
ImgRotator.angle += ImgRotator.jump;
var canvas = document.getElementById(ImgRotator.canvasID);
var ctx = canvas.getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(ImgRotator.angle * Math.PI / 180);
ctx.drawImage(ImgRotator.image, -ImgRotator.image.width / 2, -ImgRotator.image.height / 2);
ctx.restore();
}
}
Usage :
ImgRotator.start_action(canvasID, image_url, intervalInMilliseconds, jumgAngle);
HTML (just provide a canvas where you want to rotate the image):
<canvas id="canva" width="350" height="350"></canvas>

Infact Using CSS and jquery we can do better, I mean rotate the whole body on load
function bodyRotate() {
var angleX = 0, angleY = 0, angleZ = 0;
var incX = -1, incY = -1, incZ = -1;
var xStop = -180, yStop = -180, zStop = -180;
var timerID =
window.setInterval(function () {
angleX += incX; angleY += incY; angleZ += incZ;
var angle = "rotateX(_X_deg) rotateY(_Y_deg) rotateZ(_Z_deg)";
angle = angle.replace("_X_", angleX).replace("_Y_", angleY).replace("_Z_", angleZ)
$("body").css({ "transform": angle });
if (angleX < xStop && angleY < yStop && angleZ < zStop) {
incX *= -1; incY *= -1; incZ *= -1;
}
if (angleX > 0 && angleY > 0 && angleZ > 0) {
window.clearInterval(timerID);
$("body").css({ "transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)" });
}
}, 10);
}
$(document).ready(bodyRotate);

Possible to use translate twice on same element?

I used Javascript to translate via transform a circle from the center of the canvas to the upper left. What I want to do next is call a function that picks random coordinates within the canvas and sends them to translate, so its position can be shifted. Unfortunately this is not working.
Can you only call translate once on an element within CSS? This is the conclusion I'm coming to but I haven't been able to find information in the docs say this type of behavior isn't allowed.
The heart of the matter:
function change_level() {
var level = document.getElementById("level");
level.parentNode.removeChild(level);
var ball = document.getElementById("init_pos");
ball.style.backgroundColor = "orange";
ball.style.borderRadius = "25px";
ball.style.transform = "translate(-600%, -647%)";
setTimeout(ball_movement(ball), 3000);
ball.style.transition = "background-color 2s ease-in, transform 3s ease";
}
function ball_movement(ball) {
var movements = 5;
var x;
var y;
for (var i = 0; i < movements; i++) {
x = getRandomArbitrary(-800, 800);
y = getRandomArbitrary(-800, 800);
ball.style.transform = "translate("+x+", "+y+")";
ball.style.transition = "transform 3s ease";
console.log(x);
}
}
Posted my code on jsfiddle, though my calculations are bigger than the campus in jsfiddle and so don't work properly.
https://jsfiddle.net/2c5gwbcd/

There are a couple of corrections needed to your code:
When setting the transform value within ball_movement, the x and y variables have merely numbers as value but the translate function needs a value with units (percentage, pixels etc). So, add it by appending px or % to the string as appropriate.
In the timeout function call, when you give the first param as ball_movement(ball) the function gets called immediately. You should wrap it within an anonymous function.
Note: In the below snippet, I had reduced the initial value of the translate function and the input for the random number calculation to keep the ball movement within boundaries.
window.onload = function() {
var
html_display = {
0: "Level One",
1: "Level Two",
2: "Level Three",
3: "Level Four",
4: "Level Five"
};
html_key = 0;
//need to take level offscreen, add ball
function change_level() {
var level = document.getElementById("level");
level.parentNode.removeChild(level);
var ball = document.getElementById("init_pos");
ball.style.backgroundColor = "orange";
ball.style.borderRadius = "25px";
ball.style.transform = "translate(-150%, -150%)";
ball.style.transition = "background-color 2s ease-in, transform 3s ease";
setTimeout(function() {
ball_movement(ball);
}, 3000);
}
function ball_movement(ball) {
var movements = 5;
var x;
var y;
for (var i = 0; i < movements; i++) {
x = getRandomArbitrary(-100, 100);
y = getRandomArbitrary(-100, 100);
ball.style.transform = "translate(" + x + "px, " + y + "px)";
ball.style.transition = "transform 3s ease";
}
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function intro_html() {
document.getElementById("level").innerHTML = html_display[html_key];
setTimeout(change_level, 1000);
}
intro_html();
}
body {
position: absolute;
top: 45%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#level {
font-family: helvetica;
font-size: 29px;
position: absolute;
top: 45%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#init_pos {
position: absolute;
top: 44%;
left: 48.17%;
height: 50px;
width: 50px;
}
.container {
height: 700px;
width: 1100px;
top: 45%;
left: 50%;
border: 4px solid black;
overflow: hidden;
}
<div class="container">
<p id="level"></p>
<p id="init_pos"></p>
</div>

jQuery / CSS Animation - Pause in FF and Chrome jumps back and start is not correct

In IE and Safari the pausing and resuming of the progress bar that moves around works lovely however in firefox and chrome when you hit pause it does not pause at the correct time but seems to jump back and then stops and also when you initially start the animation it does not start from the top but a little ahead of itself.
Really keen to get this fixed so its done but cannot work it out, would be great if someone could help me on a solution.
In order to start it click on the big PINK circle
FIDDLE: http://jsfiddle.net/uj4e5cw0/5/ - you will see what i mean when you start to play with it.
JS:
var playing = false;
$(document).ready(function () {
var animation = new TimelineMax();
var svgPaths = $("#ring");
for (var x = 0; x < svgPaths.length; x++) {
var path = svgPaths[x];
var pathDimensions = path.getTotalLength();
var strokeWidth = path.getAttribute("stroke-width");
path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
path.style.strokeDashoffset = (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
//path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
animation.add(TweenMax.to(path.style, 20, {
strokeDashoffset: 0, onUpdate: function () {
var n = document.createTextNode(' ');
document.body.appendChild(n);
document.body.removeChild(n);
}
}), (x > 0) ? "-=0.8" : "");
}
$(document).on('click','#pause', function(e) {
$(svgPaths).attr("class", "paused");
animation.pause();
});
$(document).on('click', '#resume', function (e) {
$(svgPaths).attr("class", "active");
animation.resume();
});
$(document).on('click', '#restart', function (e) {
//$(svgPaths).attr("class", "");
//$(svgPaths).attr("class", "active");
animation.restart();
});
$(document).on('click', '#loader', function (e) {
if (!playing) {
$("svg path").attr("class", "active");
/* $("#circle").attr("class", "active"); */
$("svg path#back").attr("stroke", "#034870");
$("svg path#back").attr("fill", "#FFFFFF");
$("svg path#ring").attr("stroke", "#FF1251");
animation.resume();
playing = true;
} else {
$("svg path").attr("class", "");
/* $("#circle").attr("class", ""); */
animation.pause();
playing = false;
}
});
});

You should never mix JS+CSS animation. Remove the following CSS:
#ring.active {
-webkit-animation: load 20s 1 forwards;
-moz-animation: load 20s 1 forwards;
-o-animation: load 20s 1 forwards;
-ms-animation: load 20s 1 forwards;
animation: load 20s 1 forwards;
-ms-animation-play-state: running;
-o-animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
}
#ring.paused {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}