I have a linear scroll animation which allows me too loop vertically through a list of images with the css:
#keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(var(100px));
}
}
.scroll-container {
scroll 10s linear infinite;
}
These containers contain images of varying heights, and thus their starting heights are determined at the start and accessed via container.scrollHeight in Javascript. However, the scrolling animation requires the value of var(100px) to be the height of the container in order for the loop to be seamless. Is there a way to set the value of var(100px) independently for each container using javascript?
Related
Guys I am making a menu bar but I have been stuck in animating or moving it. These are my reletant codes:
function navbar(){
document.getElementById("a").style.marginLeft = "50%";
.
.
.
function navbar2(){
document.getElementById("a").style.marginTop = "-100px";
}
$(document).ready(function(){
$("#a").click(function(){
navbar();
var x = $('#a');
$.when(x.css("margin-left")=="50%").done(function(){
navbar2();
});
});
});
I want my navbar icon to first move margin-left = 50%; and after this when my icon reaches margin-left 50%, move icon to top. But now when I click on icon it starts to go top and right at same time. But I want my icon to first go right then go top.
Can someone please help?
You can do it like this with jQuery, without requiring navbar() and navbar2() :
$("#a").click(function() {
$(this).animate({
margin-left: "50%"
}, "slow")
.animate({
margin-top: "-100px"
}, "slow");
});
jQuery can do animations but CSS can do them better with CSS Keyframes. This is because of CSS being much more performant and can use low-level systems (talk directly to the browser) to do your animations.
Start off by creating a CSS class which has an animation property. With this property you can tell the browser what the animation should be, how long it should take, if it has a delay, and many more options.
Now it's time to create your animation with the #keyframes keyword. After the keyword you specify the name of the animation. Inside the #keyframes block you continue with the steps of the animation. In the example below I've used 0%, 50% and 100% as the steps, or keyframes, of the animation. These numbers indicate the start (0%), the halfway point (50%) and the end (100%).
Within the blocks of the keyframes you specify what you want the style to be at that specific point. So you could say that at the start you don't want any margin, but at 50% you want the margin to be -50% to the left. Then at 100% you want the margin to be both -50% to the left and -100px to the top.
/**
* Define a class with an animation property.
* This specific class uses the navbar-animation animation which
* completes in 3 seconds without delay. It also has a linear easing
* and only runs once. The fill-mode specifies if the last keyframe
* of the animation should persist if the animation is finished.
* Otherwise your element would shoot back to its starting position.
*/
.animation {
animation-name: navbar-animation;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1
animation-fill-mode: forwards;
/* Or in shorthand */
animation: navbar-animation 3s 0s linear 1 forwards;
}
#keyframes navbar-animation {
0% {
/**
* This is the starting position of the animation.
* without any margins.
*/
margin: 0;
}
50% {
/**
* At the halfway point the element should be 50% to
* to the left.
*/
margin: 0 0 0 -50%;
}
100% {
/**
* At the end the animation has to be 50% to the left
* and 100px up.
*/
margin: 0 -100px 0 -50%;
}
}
Because you now have your animation specified in CSS, you don't have to worry anymore about it in your JavaScript, which makes your JS much less complex.
All you have to do now is to add the CSS class you specified above here and add it whenever you've clicked the element that should trigger the animation.
$(document).ready(function() {
// Select the element and store it in a variable so
// you don't have to select it again.
var $a = $('#a');
// Only add a CSS class to the element and let CSS
// handle the animation.
function addAnimation() {
$a.addClass('animation')
}
// Listen for click to call the addAnimation function.
$a.on('click', addAnimation);
});
That should do it to create the animation you want. As a side note I want to add that I encourage you to use the transform property instead of margin to move your elements. transform is meant for this kind of operation without breaking the flow of the document and keeping performance high.
If I have keyframe animation running on an div hover (say, for 3s) and the element hover ends in 2 seconds, the animation abruptly ends and resets the div position. Here's an example, I am rotating a div on hover to 360 degrees in 3 seconds. If I hover out within two seconds, the animation ends abruptly.
I want the animation to reverse from the exact angle it had been rotated to. (See demo below)
How do I prevent the element to reset to its original position and start reversing the animation from the rotated angle, back to its original position.
.box {
width : 160px; height : 160px; background-color : green;
}
.box:hover {
-webkit-animation: move 3s;
}
#-webkit-keyframes move {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
<div class ="box"></div>
I believe it needs to be done with some JS/jQuery using the mouseout event but I don't know exactly how to achieve this.
Help would be appreciated.
Is there a way to use JavaScript or CSS3 to animate an image of a car driving towards a user? To clarify, the car image should animate from the background, with the image smaller and seemingly further away and gradually get larger as it "drives" forward to the foreground of the image? The image will be of the front part of the car and will look like this:
This JavaScript animation will be utilized in an HTML5 banner advertisement so I am hoping to avoid anything that will increase the size of my deliverable substantially. I have been looking online for something similar to this and can't seem to find an example of what I am hoping to accomplish. Any ideas are welcome.
You don't need javascript, you can just use a CSS3 animation. For example, this would work:
#keyframes drive {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.car {
animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite;
}
<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>
Explanation:
First, we define a drive animation. It starts with a CSS3 transform that scales the image to 1/5th the size, then at the end of the animation, to full size. You can use any css property, even width but transform: scale doesn't force a page render, so your animation is faster.
Then, let's break down the animation property on the .car.
drive - this part is self-explanitory, it tells CSS to use the drive key frames
3s - makes the animation last 3 seconds
cubic-bezier(0.02, 0.01, 0.21, 1) - sets the curve for the animation to run, so it scales slower the further along it goes.
infinite causes the animation to repeat infinitely.
This should get you started:
img {
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation:mymove 3s infinite;
position: relative;
}
#keyframes mymove
{
0% {width:10%;}
10% {width:20%;}
20% {width:30%;}
30% {width:40%;}
40% {width:50%;}
50% {width:60%;}
60% {width:70%;}
70% {width:80%;}
80% {width:90%;}
90% {width:100%;}
100% {width:100%;}
}
<img src="https://i.stack.imgur.com/oT3DY.png">
I hope that this question is not too specific so it can relate to others problems...
I have two elements, a child and a parent, with the child element rotating around the parent using CSS animations.
<div class="planet">
<div class="moon"></div>
</div>
The moons animation is set so the moon will load ontop of the planet in the same position, but is pushed out with translateX then roatated, like so:
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
Think of it as a planet with a moon rotating around the planet.
When the user resizes the window the planets height/width will resize, but I also need the moons height/width to resize AND the distance between it and the planet needs to lower.
I have set up an example here... https://codepen.io/anon/pen/mVvYbR
Would this be possible to acheive with just CSS, or would javascript be needed? I will use jQuery if need be, (I am not great at it though) but I would think a pure CSS solution would be cleaner... maybe I'm wrong on that one.
I should also note that the way it is set up currently (with the planet div holding the moon, is so that I can have multiple children (multiple moons). However I also think that this would mean having a massive amount of different animations for moons/planets which need different translateX's... So maybe jQuery is a better solution there...
If I am not clear on anything please let me know.
Thank you!
You can try do it with just css. You can use viewport units so all values will depend on viewport size.
.planet {
width: 10vw;
height: 10vw;
background: url(http://placehold.it/940x940) no-repeat center center;
background-size: contain;
z-index: 1;
}
.moon {
position: absolute;
background: url(http://placehold.it/140x140) no-repeat center center;
background-size: contain;
width: 5vw;
height: 5vw;
-webkit-animation: myOrbit 20s linear infinite;
-moz-animation: myOrbit 20s linear infinite;
-o-animation: myOrbit 20s linear infinite;
animation: myOrbit 20s linear infinite;
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(20vw) rotate(0deg); z-index:1}
to { transform: rotate(360deg) translateX(20vw) rotate(-360deg); z-index:2}
}
Sample -> here
Probably you will need to add some media queries to handle different screen aspect ratios. Current viewport units support -> caniuse.com
I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!
You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!