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.
Related
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.
Let's say I have a simple and linear CSS animation like this
#keyframes move {
0% {top: 0;}
100% {top: -10000px;}
}
Which loops infinitly, and uses 10 steps:
.move {
animation: move 1s steps(10, end) infinite;
animation-play-state: running;
}
And it has a second animation which makes it go for 60 seconds
.sixty_seconds {animation-duration: 60s;}
How can I use javascript to start the animation halfway through its iteration? Is there a way to start a specific animation at a specific percent through its iteration? I need this starting point to be programmable, as it could start at 30% one time, or 77.32% the next.
I'm sure the answer is right under my nose, but I can't seem to find anything that gets it to use these existing animations starting at a specific point.
Thank you very much.
i'm working on a project where i need a semi-transparent div to slideover the entire page at a certain point. i have a version working currently, but it's not as smooth as i'd like it to be.
http://jsfiddle.net/27e310e8/
jQuery from above example:
var windowWidth = $(window).innerWidth();
var windowHeight = $(window).innerHeight();
function blackOut() {
$('#fail-screen').css({
"width": windowWidth + "px",
"height": windowHeight + "px"
});
$('#fail-screen').delay(1000).animate({
top: '0px'
}, 1000, 'linear');
}
$(document).ready(function () {
blackOut(windowWidth, windowHeight);
});
as you can see i'm getting the innerWidth and height to set the "fail-screen" div, as setting it to 100% wasn't working well. i'm using jQuery to animate the top position of the "fail-screen" div.
again, i'm just looking to refactor this code and improve overall presentation and performance. i'm open to using animation/physic libraries if anyone knows of any that would be good to use here.
appreciate any suggestions.
As #Jason has mentioned, I strongly recommend using CSS transforms instead of fiddling with the offsets. That is being not only are CSS transforms offloaded to the GPU (intelligently determined by the browser as of when needed, but you can also force it), but it allows for subpixel rendering. Paul Irish published a rather good write-up on this topic back in 2012.
Also, your code is slightly problematic in the sense that it fails to handle viewport resize events. In fact, a more straightforward solution would simply be using position: fixed, and then playing around with CSS transform to bring the element into view after a delay.
See updated fiddle here: http://jsfiddle.net/teddyrised/27e310e8/2/
For the JS, we simply use the .css() method. The delay, animation duration and even the timing function can be easily done via CSS.
The new JS is rather straightforward: we set the transform of #fail-screen so that we move it back to its original vertical position. jQuery automagically prefixes the transform property ;)
$(document).ready(function () {
$('#fail-screen').css({
'transform': 'translateY(0)'
});
});
For the CSS, we initially set a vertical translation (translateY) of -100%, which means we push the element upwards by its own height. Using fixed positioning and declaring all four offsets as 0, we can force the element to fill the viewport without any advanced hack of listening to window resize events via JS. Remember that you will have to add vendor prefixes to the transform property to maximize cross-browser compatibility.
CSS can also handle transition delay, duration and even the timing function, i.e. transition: [property] [duration] [timing-function] [delay]; Since in your jQuery code you have set both duration and delay to be 500ms, it should be transition: all 0.5s linear 0.5s. However, the linear timing function doesn't look good — perhaps using ease-in-out would be better, or even a custom cubic-bezier curve, perhaps?
Also, I recommend moving the opacity to the background-color value, simply because if you set an opacity on the element itself, all child nodes will be rendered at 0.6 opacity, too... it might be something that you do not want to achieve.
#fail-screen{
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.6); /* Moved opacity to background-color */
position: fixed; /* Use fixed positioning */
z-index: 303;
/* Use CSS transform to move the element up by its own height */
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
/* CSS transition */
transition: all .5s ease-in-out .5s;
}
How can I make a simple javascript animation to scroll a div (#MyDiv) from say 300px to - 300px over 15 seconds, pause for 15 seconds, then replay, and keep doing this on an endless loop?
I tried with css using multiple methods but its just not smooth enough for my needs.
My experience is that CSS3 animations are almost always more smooth than animations done by Javascript libraries.
Here's a way to do it without any Javascript, with CSS3 animations:
#scrollingContent
{
animation: scroll 30s linear 0s infinite normal;
-webkit-animation: scroll 30s linear 0s infinite normal;
}
#keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
#-webkit-keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
Working demo: http://jsfiddle.net/nj9yfk7b/
And here's an alternative way to do it with native Javascript and CSS3 transitions:
Working demo and code: http://jsfiddle.net/yfk7330j/
In this case, the transitions are triggered by Javascript by setting and un-setting a certain class name on the element that should be scrolling.
The transition version allows for better control with Javascript, while the animation version just does it's looping thing infinitely.
I tried to keep the code clean as possible, but please let me know if it needs any clarification.
Maybe the functions ScrollBy and SetInterval can help you:
http://www.w3schools.com/jsref/met_win_scrollby.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
You can use the intervals to jump every x ms y pixels, and then wait 15 seconds after you have reached an amount of pixels.
Also, I've seen this JQuery plugin, maybe it can also help (though I haven't researched it properly though):
Scrolld.js
Rememberer that people here won't write the code for you, but will happily help you pass through specific problems.
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!