here's my question, i'm developing a personal website that has a huge animation in the background, with clouds moving around in an infinite loop.
Everything is done with jquery extended with jquery timers and sprites.
|
First it fills out the cloud starting position matrix (random)
|
it set's the actual position of each cloud.
|
start moving the clouds with .animate() function and start a timer to fire again that animation until the clouds reach the left border.
|
repeat forever :)
Anyway this method consume a "little" memory and CPU, i'm trying to optimize the code,
and i was wondering if there's a method to call a function when the browser switch to a different page, to stop the animation.
Thanks.
Plus, if anyone would help in optimizing code, i will appreciate so much! :)
I'll post the link to the website if anyone could help with that.
Thanks Again
First, make sure you animate a single DOM-element, not a bunch of individual clouds. Put your clouds into a container and move the latter.
Second, take a look at CSS3 transitions. They are much smoother (GPU-accelerated), than JavaScript-based animation. Also, super-easy to learn and use. Just describe a CSS class and add it to your clouds upon initial position setting.
As for the determining if the browser tab is in the background, requestAnimationFrame, used by jQuery as animation ticker which is a 60 FPS ticker, can do that for you automatically.
It appears, jQuery is no longer using requestAnimationFrame (they used to at some point, but then removed it). So, here's an animate function employing requestAnimationFrame (with a setTimeout shim for IE) you can steal ideas from (or just grab the function itself).
You could listen to the window's blur and focus events:
$(window).on('blur', function() {
// window went into background, stop animations here
// ...
});
$(window).on('focus', function() {
// window became active, start animations here
// ...
});
Related
I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features
I see a number of PNGs loaded in the web inspector but I can't determine how its being done.
it’s Matt (co-founder & designer # BugHerd) here :)
Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/
It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.
Happy to answer any other questions you might have about how to implement this on your own site.
Cheers!
Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do.
What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.
So my webpage uses a lot of jquery everywhere, It is a single page javascript application and I pretty much create all the HTML by hand using jquery. I have a lot of divs in which I use draggable and resizable I also use jquery-ui-effects .hide and .show with slide animation to move some divs around.
When I start the application everything works flawlessly but after 10~15 min that the page has been open everything that uses jquery-ui methods gets so slow that it's unusable. When I try to resize one of my divs there is a major slow down when I first mousedown on the corner and after I let go of the click it takes some seconds for the page to become responsive again. Same is true for drag and drop. Calling $().draggable and $().resizable on the divs also takes a lot of time. Strangely the dragging and resizing itself is not slow, only starting/ending it. The longer the page has been open the slower it gets.
All other functionality in the page works just fine even after one hour of the page being open (I even have some basic canvas drawing in place, other jquery but not jquery-ui functionality also works ok). There is no aparent memory leak since the browser never goes over 150mb of memory used.
Some people might say that the problem are my start/stop resize/drag functions.
It's not that because I tried to remove them without any change in speed and also it would not explain the slow down on the animations.
CPU use goes to 100% (I'm using a single core system) when animating, it stays at 0% when not using jquery-ui functions. When profiling the animation function (after the page being open for more than 30 min) I see that there is a method named curCSS (jquery-1.8.1.js line 6672) using 95% of the CPU time. This same function only uses 4.5% if I execute the animation a few seconds after starting the application.
I'm using jquery-1.8.1 and jquery-ui 1.8.22.
I can't post all the code because I don't know what part of it is wrong and the whole code-base is huge. The animation is done this way:
//internal code that prevents updating data on the divs that are part of the animation
var hiding= true;
var showing= true;
containerToHide.$div.hide("slide", {direction: "left"}, 1000, function() {
hiding= false;
if (!showing) { //both animations ended
//internal code to allow update data on div after animation ends
}
});
containerToShow.$div.show("slide", {direction: "right"}, 1000, function() {
showing= false;
if (!hiding) {//both animations ended
//internal code to allow update data on div after animation ends
}
});
I don't think this is the problem though, the animations are pretty standard stuff.
Any hints on what to look for would be greatly appreciated.
After hours of debugging I finally found the culprit. I'm using dojo to create some graphs. Dojo uses SVG to create the graphs, I had some gradient effects on the graphs.
Every time the graph was updated it would clear the old rect tag from the svg tag but it did not clear the lineargradient tag from the defs tag. After a couple of minute I had thousands of lieargradient tags on the graphs which was causing the slowdown when those graphs needed to be re-rendered, since I was sliding the divs that the graphs were inside all the animation would slow down.
I'm trying to find a way to clear the unwanted tags. Preferably through a Dojo method, but if not I will just manually remove them myself.
I'm trying to build a parallax site, which will move few elements while scrolling the site.
But instead of using a scroll event listener I'm using requestAnimationFrame, after reading this post by Paul Irish, and this video which said that scroll listener is a bit buggy. My questions are:
It looks quite smooth in Chrome, but it's flickering badly in Firefox. Did I do something wrong here?
Does my code actually taking up more resources than using normal scroll event listener? I can hear my laptop fan blazing every time I'm playing with this code.
My file is located at http://www.socialbuzz.com.au/index.html, and please scroll to the bottom of the page to see the element that's being manipulated from javascript.
You should have a the scroll event trigger a requestAnimationFrame loop. Do not have requestAnimationFrame triggered by the scroll event itself. You should have something like a var scrolling = true; While this is happening run your requestAnimationFrame loop which references event data from the scroll event. You'll need to debounce the scroll event to turn to loop off once you are finished, it's a chore but the results are worth it. Hope this helps.
You are not performing an animation; that is, you are not modifying your graphics continuously without user interaction. Your manipulation of the page happens only when the user scrolls and does not continue after the user stops scrolling. Therefore, there is no benefit to using requestAnimationFrame, and you should stick to a simple event handler.
The purpose of requestAnimationFrame is to provide optimal behavior for continuous animation; none of its advantages apply here. A looped requestAnimationFrame which does nothing inside the loop, as you currently have, is entirely appropriate if each step of the loop updates the graphics in some way, but since here nothing changes when the user is not scrolling, the loop does nothing but waste CPU time.
An example of when you should use requestAnimationFrame is if you had elements which deliberately lagged behind the scrolling and caught up after a moment. The catch-up animation should be done in a requestAnimationFrame loop which is started from the scroll event handler, and that loop should stop itself when the catch-up finishes.
I have had a similar experience and after much playing around with mouse move listeners and setInterval to increase the frequency of the animation steps, I have gone back to just using onscroll and find that on FF10 and FF 15 it is working great.
Maybe my requirements are not the same as yours - it is an element that tracks the scrollbar so onscroll was the cue to change the position of the box. It lagged behind and was jerky on FF, but worked fine on WebKit and IE. What I found was that onscroll did not fire as often on FF as on Chrome/IE.
When I initially tried this it would be on FF 5 or 6 though. Using a mouse move listener or a frequent interval, I was able to increase the frequency with which my handle scroll function go called - but this actually had the effect of making the positioning appear choppier. Just using onscroll seems to be working for me now on 10 ESR and 15, maybe they fixed something.
Webpage is - http://schnell.dreamhosters.com/spriteanimate.html
Just go to the page and 'View Source' and you'll see all the code.
Right now it's pretty simple. Right arrow key makes X go right, left arrow key makes him go left. He does a running animation in the proper direction and the actual image element moves in the same direction.
The major issue I have with this right now is optimization. If you play around with it a little you'll notice that the running animation isn't always smooth and for the first few seconds it feels very laggy, like it's still loading something. The animation for going left is particularly guilty of this. Another problem is with the .animate() from jQuery. It does a sort of stop-and-go motion and you can tell. The movement of the image element is jerky and not very smooth.
The .animate() from jQuery can be tweaked with easing and such, but I'm not entirely sure if that's the answer and that still leaves me with the occasional running lag or something. So does anyone have any suggestions?
Use image preloading for the sprite images, or better still, use one image as a sprite, and instead of swapping the image file, shift the position of the image file. You need to set the image as a background image and shift the background position to achieve this.
Also, use linear easing, otherwise it will default to swing, which enters and exits slowly.
Have you considered using CSS3 transitions rather than standard jQuery animations. In doing so you'll have dramatically better performance but lose some cross browser compatibility. Here's an example which only works in Chrome but shows the power
http://girliemac.com/sandbox/matrix.html
and more about CSS3 animations
http://css3.bradshawenterprises.com/
I need to smoothly scroll a large amount of text up the screen. Using webkitTransform does this very well, but I would also like to enable the user to change the speed of the scrolling or pause the scrolling based on how fast they're reading. From what I've found, there isn't a way to change the duration of a webkit transition once it has started. Using setInterval and moving the text works, but it gets jumpy and hard to read as the speed increases.
Can anyone recommend a good way to do this that would allow for the user to adjust speed and still give readable text at higher speeds?
I don't know much about modifying currently running CSS3 transformations, but as an alternative solution, I would scroll a large amount of text with JavaScript by using the browser's native scrolling with scrollTop (.scrollTop() if you are using jQuery).
This allows the user to have a familiar interface even without JavaScript, and can be simply implemented with setTimeout() or setInterval(). If the final result is too jumpy, try modifying scrollTop in smaller intervals, but faster. (i.e., instead of adding +100 every 500ms, try adding +10 every 50ms)