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.
Related
This is what I have:
.s2 {
top: 150px;
left: 20px;
position: absolute;
transition: left 300ms linear;
}
I change the left position dynamically on scroll with JavaScript. At the moment the performance is bad on mobile and even in a desktop browser.
How can I improve this? Is there a better approach for this?
Consider throttling the scroll using requestAnimationFrame
use properties such as translate if you can instead of left or top
Ad translateZ(0) or translate3d(0,0,0) to trigger GPU on mobile (not always guaranteed)
Also since you are animating during scroll, you do not need to use the transition property, unless you have breakpoints/thresholds where you set the property once scroll amount exceeds a certain value.
This question already has an answer here:
constant animation speed CSS
(1 answer)
Closed 4 years ago.
I´m sorry, I have no idea how to explain this, so i'm just going to give an example:
.MovingDiv {
position: fixed
width: 50px;
height: 50px;
background-color: red;
animation: MovingAnimation 5s;
}
#keyframes MovingAnimation {
0% {left: 0px;}
100% {left: 1000px;}
}
When this css code is used, the object moves from the left side of the screen to the right but i noticed that it starts out slow in the beginning, has a normal speed midway and slows down again at the end. Is there a way that I can maybe, with a little Javascript, make the animation "plain" as in have a constant speed from the beginning to the end?
You are not specifying an animation-timing-function. A setting of linear would probably be what you are looking for.
Try transition-timing-function: linear under .movingDiv
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 know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that.
So is there a way to achieve smooth fade in and out animation on mobile with a combination of jquery and css3? or even just one? Thank you.
**EDIT**: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after ('#id').css('display','block') and before ('#id').css('opactity','1'). don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.
You should always try and use CSS3 transitions, instead of jQuery animations. Here I use a CSS3 transition to fade out the .square, and then I wait until the transition has ended to set the display to none.
If you animate an element in jQuery, for example, using fadeOut, you'll see what happens. It basically sets the opacity to 1, and then brings that value down to 0 in tiny increments. This is very inefficient. So it's better to always use CSS3 transitions and animations wherever possible.
Fade out: https://jsfiddle.net/danhaswings/znLL0ws5/1/
Fade in: https://jsfiddle.net/danhaswings/kjgmxa8x/
HTML
<div class="square"></div>
CSS
.square {
width: 100px;
height: 100px;
background-color: red;
transition: opacity 1s ease-in-out;
}
jQuery
var $square = $('.square');
$square.css('opacity', '0');
$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
$(this).css('display', 'none');
});
What sort of phone are you testing on to get such slow / jittery animations? Mine seems to work fine for all of the animations that are supported on mobile browsers.
In any case, you can always try to use css keyframes.
Annoyingly, you cannot animate certain attributes (such as display) but it does allow for quite a lot of things including opacity as shown below.
div {
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.to_hide {
-webkit-animation: hide 5s forwards;
animation: hide 2s forwards;
}
#-webkit-keyframes hide {
from {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
position: absolute;
opacity: 0;
}
}
<div class="to_hide"></div>
<div></div>
Keyframes on MDN
Ultimately, on mobiles you should try to avoid using animations as mobile browsers are not optimized for such things. Your website should degrade gracefully in both size, layout, content and also animations.
Should go smoothly if you use jQuery's fadeIn(), which will fade in an element with
display: none
$element.fadeIn();
function show() {
$("#el").fadeIn();
}
#el {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>
Have a look at this article
You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames.
You should be able to achieve a fade transition combining the opacity and transform properties
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!