CSS linear animation across screen - javascript

I have a car which im moving to the right of the screen. (the car needs to start from left infinity and go out of the screen on the right).
But the animation repeats just once and stops.
<div class="car-right">
<img class="car-right-image"src="/assets/car-right.png" alt="">
</div>
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
}
.transit-right {
-webkit-transform: translate(1920px,0);
-webkit-transition: all 30s ease-in-out;
transition: all 30s ease-in-out;
z-index: 10;
}
$(function() {
return $('.car-right-image').addClass("transit-right");
});
What am i doing wrong here ? ... how do i make the car keep coming from the left infinity and dissapear to the right ? ...
I know i gotta do something with keyframes and the infinite atrribute.
But cant seem to get it ...
Any help is highly appreciated, thanks.
Regards
-Skykog

jQuery solution, here's a FIDDLE
.car-right-image {
position: absolute;
width: 260px;
left: -260px;
}
$(function() {
setInterval(function() {
$('.car-right-image').animate({ left: $(window).width() + 'px' }, 3000, 'linear', function() {
$(this).css({ left: - $(this).width() + 'px' });
});
}, 10);
});

You need to use CSS Animations not transitions.
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
background-color: red;
animation-duration: 4s;
animation-name: goRight;
animation-iteration-count: infinite;
}
#keyframes goRight {
from {
transform: translate(0,0);
}
to {
transform: translate(1920px,0);
}
}
There is no need for jQuery for this.
Here is a demo running at a 4 seconds interval: http://jsfiddle.net/NrLy8/1/

Related

Setting element to visible does not run css animation

I have the following html code
var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){
a = document.getElementById("notification");
a.style.visibility = "visible";
});
#notification {
position: fixed;
z-index: 101;
bottom: 0;
transform: translateY(calc(100% + 10px));
left: 10vw;
right: 10vw;
text-align: center;
height: 20vh;
overflow: hidden;
background-color: #ededed;
color: #000;
}
#keyframes slideUp {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
#notification {
animation: slideUp 2.5s ease forwards;
}
<button id="openNotification">
Open notification
</button>
<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>
The CSS for this div contains "transform" code to make the notification slide up the screen...
When I run the following code in a setTimeout function the notification simply appears on the screen and does not slide up as it should.
a = document.getElementById("notification");
a.style.visibility = "visible";
How do I fix this?
On further testing I can see that the animation code seems to be running from the moment the code is loaded. I assume I need to somehow change this behaviour so the animation code is kicked off by the setTimout function or in this case the button click. Any examples on how to do this?
The animation takes place but as it only lasts a short time, by the time you come to push the button it has finished, and you then make the thing visible.
Instead we remove the animation from the initial state of the element and add it (by adding a class in this case) only when you click the button.
Note: if you want this to be repeatable you will have to include sensing the animationend event and removing the slide class at that point. Otherwise the system will think it's done the animation and needn't do it again.
var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){
a = document.getElementById("notification");
a.style.visibility = "visible";
a.classList.add('slide');
});
#notification {
position: fixed;
z-index: 101;
bottom: 0;
transform: translateY(calc(100% + 10px));
left: 10vw;
right: 10vw;
text-align: center;
height: 20vh;
overflow: hidden;
background-color: #ededed;
color: #000;
}
#keyframes slideUp {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
#notification.slide {
animation: slideUp 2.5s ease forwards;
}
<button id="openNotification">
Open notification
</button>
<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>

Create "bobblehead" animation jquery

A bobblehead effect would be a "U" animation shape in my mind with slightly shorter stems.
I've tried using various arcs/semi-circles to create a bobblehead effect but nothing is working correctly.
I must use transform with translate due to it being an SVG. I am also using animejs but I cannot see a method to achieve this on that library either. jQuery animation steps seems the most simple?
This is the effect I'm looking to achieve:
[![enter image description here][1]][1]
Using this code:
function loopBobble() {
var end = 180;
$({
counter: 0
}).animate({
counter: end
},{
duration: 1000,
easing: "swing",
step: function(t, fx) {
var a = t / 60; // from degrees to radians
var x = Math.cos(a) * 10;
var y = Math.sin(a) * 10;
$('#bobble').attr('style', 'transform: translateX(' + x + 'px) translateY(' + y + 'px);');
if (t == end) {
loopBobble();
}
}
});
}
loopBobble();
The best I am able to achieve with the creepy face is this result:
[![enter image description here][2]][2]
Is my approach correct? I would have assumed a "U" shape animation would be built into animejs or jquery. I cannot find much online. I am no mathematician
How about css only?
.head {
background-color: #FA0;
border-radius: 50%;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
position: absolute;
animation-name: xOffset;
animation-duration: 1s;
animation:
xOffset 1s ease-in-out infinite,
yOffset .5s ease-in-out infinite;
}
#keyframes xOffset {
50% { left: 50px; }
100% { left: 0px; }
}
#keyframes yOffset {
50% { top: 25px; }
100% { top: 0px; }
}
<div class="head"></div>
transform: translate-Version
You'll have to add a wrapper in your csv to apply separated easing-times on x and y. Otherwise different easing-times are not possible using transform since transform is animated as a whole.
.head {
background-color: #FA0;
border-radius: 50%;
width: 100px;
height: 100px;
animation-name: xOffset;
animation-duration: 1s;
animation: xOffset 1s ease-in-out infinite;
}
.wrapper {
animation: yOffset .5s ease-in-out infinite;
}
#keyframes xOffset {
50% { transform: translateX(50px); }
100% { transform: translateX(0px); }
}
#keyframes yOffset {
50% { transform: translateY(25px); }
100% { transform: translateY(0px); }
}
<div class="wrapper">
<div class="head"></div>
</div>

What is the JavaScript equivalent of the following jQuery code?

I want to make spinning wheel but instead of rotating wheel i want to rotate the pointer. I have the following jQuery code snippet which rotates a pointer but I don't know how to convert this jQuery snippet into JavaScript.
jQuery code:
$( document ).ready(function() {
var startJP = (164) + (360 * 3);
$('.jackpot-pointer').animate({ transform: startJP }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
},
duration:6000
},'linear');
});
i want to do something like this
https://i.stack.imgur.com/0KArr.gif
Here is a simple example, that shows how you could solve it with vanilla JS and CSS by using CSS animations which can be toggled on and off via JS.
var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');
stage.addEventListener('click', function () {
rot.classList.toggle('animated');
});
#stage {
position: relative;
height: 100px;
background-color: #000;
}
#rotating {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
background-color: #c00;
animation: rotate linear 6s;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 50% 50%;
}
#rotating.animated {
animation-play-state: running;
}
#keyframes rotate {
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
<div id="stage">
<div id="rotating"></div>
</div>
Depending on which browsers you want/have to support, you might have to add vendor prefixes in the CSS code.

ReactCssTransitionGroup, tuning down opacity and then slide it up

Hi dear stackOverFlow friends!
My question for the day is:
I have a header that is wrapped in a ReactCssTransitionGroup tag,
right now I'm tuning the opacity down and sliding it up at the same time, but I want to tune down the opacity to 0 and then slide it up so it doesn't show.
Here is my code now:
CSS:
.headTransition-enter {
opacity: 0.01;
height: 0px;
}
.headTransition-enter.headTransition-enter-active {
opacity: 1;
transition: 500ms ease-in;
height: 520px;
}
.headTransition-leave {
opacity: 1;
height: 520px;
}
.headTransition-leave.headTransition-leave-active {
opacity: 0.01;
transition: 500ms ease-in;
height: 0px;
}
the component:
<ReactCSSTransitionGroup
transitionName="headTransition"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{!this.props.tabClicked && <Header/>}
</ReactCSSTransitionGroup>
Very grateful for answers!

animate element without using jquery animate()

I need to move a element from one offset position to another with animation.
for which i was using
function getOffset(el) {
el = el[0].getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
var _anchorElemPos = getOffset($element)
_animationElement.animate(_targetAnimPos); /*_targetAnimPos is the position where the element has to move.*/
It is working absolutely fine.But now I want the animation without jquery animate() function .
Any help would be appreciated.
Try CSS3 animations. for moving you can use keyframes in CSS3
I hope this can help you.
HTML
<div id="movingObj"></div>
CSS3
#movingObj{
background-color:red;
width: 100px;
height: 100px;
position: absolute;
left: 0px;
-webkit-animation: moving 3s forwards;
animation: moving 3s forwards;
}
#-webkit-keyframes moving {
from {left: 0px;}
to {left: 400px;}
}
#keyframe moving{
from {left: 0px;}
to {left: 400px;}
}

Categories