I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)
Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).
Related
I am using Sammy.JS for my routes and I can hide and show my pages with its callback, but the transition isn't good. What I wanted is to show the pages from right to left or when going back, it would be left to right.
var app = Sammy('body', function() {
this.get('#/start', function() {
$('.app_page').hide();
$('#start').show();
});
this.get('#/end', function() {
$('.app_page').hide();
$('#end').show();
});
});
Is there any frameworks or Plugins for this?
I assume that you are looking for something like the android transition between pages, in that case you must know that web is not totally ready for that and although it's possible, but you must consider many problems that happen when animation pages, such as the positioning(you must set the positioning as fixed and that might cause a lot of problem) or the performance of the animation for long and heavy pages.
there is not a mature javascript library that I've encountered and everybody just use their own code cause for different webpages, different css stylings are needed.
the best way to have a nice animation is to keep is simple and light, like a fading effect with a little bit of transform and scaling.
and if you really want to do the animation, it's better that you do it yourself, definitely use css animation(not jquery) and remove the animation after it's done(for performance).
and write a javascript function to check if animation is supported if not do it the old fashion way.
if you need more information let me know.
I did try the page transition in my own javascript framework and it works fine but only after I failed the first 100 time.
I recommended to you to use jquery animation to achieve your goal.
First, you can study css transition(for the page right to left effect.)
Second, you can use jquery animation with .show(), Example
You can combine these tricks to satisfied what you want.
I am trying to combine jQuery and CSS3 to give smooth animations, but I am still finding the animations can be jerky, even on desktop.
I am using the below to move my id from off the side of the page onto the page.
$(id).addClass('active').css({ left: pageWidth })
.animate({left: 0}, 500, function(e){deferred.resolve()})
.css("-webkit-transform", "translate3d(0px,0px,0px)")
.css("-moz-transform", "translate3d(0px,0px,0px)")
.css("-ms-transform", "translate3d(0px,0px,0px)")
.css("-o-transform", "translate3d(0px,0px,0px)")
.css("transform", "translate3d(0px,0px,0px)");
Can anyone give any advice if there is anything further I can do?
Use a plugin/extension like velocity to automatically use CSS animation for you behind the scenes.
We recently used it to avoid stuttering of animations on mobile devices and it improved things a lot.
If you want smoother animations and you can use CSS3 with no restrictions then you can make use of CSS3 Keyframes.
Take a look at this CSS3 animation collection called Animate.css:
http://daneden.github.io/animate.css/
This makes use of CSS3 Keyframes that runs really smooth. You can edit the animations or create new ones depending on what you want to acomplish. With Keyframes you can set the state of the animation at any frame of it so you can make it look as smooth as you want depending on how you build it.
Take a look at this article about Keyframes and if you don't want to use the ones on Animate.css try to modify them or build your own:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
For the animmation you want to get the code is not that hard. You can do this with jQuery animate as well but Keyframes will runs smoother if you work better on the frames.
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.
I was following a tutorial online for animating a background image to give a drop down effect. I was supposed to download a plugin but it seems that that plugin is not available anymore. Is there any other way to make the background animate? I've looked through similar answers but none of them have worked.
Here's the code on jsfiddle: Fiddle-Code
I want the drape.png image in the background to drop down like a curtain. Also what is the latest version of jquery?
thank you
The latest version of jQuery is 1.7.1
This sort of animation is presentational. Consider doing it with CSS3 animations and transitions. You will lose some browser support for the specific effect, but it will not interfere with functionality and will be easier to update and maintain.
Here is a simple example I made for you. Is this the effect you were looking for?
I see a flash website with some eyecathing buttons with flash effect which I want to have with jQuery if possible here is the link of website -> http://www.goodthinking.com.ph/ .. any tips or sample if can this possible done using jquery code.. . thanks in advance.. .
Yes you could build something close, but with less browser support. The puzzle pieces could be stored as background images on <div/> elements, then the divs could be positioned to "fit" as puzzle pieces, yet still be move-able by animating their position properties with a custom jQuery $.animate({}). The noise could be played on :hover with an <audio/> element in browsers that support it, and the flip effect could be achieved using a 3D transform, typically done by adding and removing CSS classes that define webkit animation keyframes.
You should seriously consider, however whether a whizz-bang effect actually helps people find the content on the website, or gets in the way. If you do want the effect and can design it in such a way that it degrades in browsers that don't support the effect, or all of the effects, then you have a cross-browser solution that is not the same everywhere, but doesn't penalize all users either by requiring they have a browser plugin.
Is it possible? Probably yes.
Would I recommend doing it with jQuery or javascript? No.