I'm converting a jQuery-based web application for use on iPad and need to make use of the hardware-accelerated performance of CSS3 animations. I'm already using fadeIn, fadeOut and some positioning animation so ideally I'd like a plugin which overrides these functions to make use of CSS3 without me having to change the core functionality.
I've searched around but can't find anyone that has tackled this problem, so I'm considering writing a plugin myself, but I wanted to make sure someone else hadn't already done it.
Any feedback would be greatly appreciated!
How about checking out http://playground.benbarnett.net/jquery-animate-enhanced/
Related
I'm trying to find a way to replace the flash animaton on this page http://www.autopulsen.se/ into jQuery. I could cut the images out and rotate them with javascript but it would require major changes in code. Basically I want to keep the same look without flash.
Is this possible?
Yes, you can.
Your starting point would be having a look at this site, there are a lot of zoom plugins on there, which is the main feature of that flash menu. Then you would want to chain the JQuery Shake effect, and maybe look at the fade effect.
To achieve the slanted look you will want to use the skew css selector as featured here.
I'll throw in GreenSock Animation Platform:
www.greensock.com/gsap-js
which may be worth a look, especially if there's the option of paying for a commercial license, as that includes a pretty nifty throwProps plugin.
you can use CSS3 animation but this one i think so good and hard to built in css3
anyway
giving you some animation generator
ceaser
CSS3animationGenrator
Css3Maker
and this one for Inspiration
At DesignShack
I've been working on a SharePoint 2010 site that utilizes jQuery. jQuery is used almost everywhere on the site. On an iPad or iPhone the jQuery animations work as they should but I'm not pleased with the performance. Overall jQuery animations are laggy. I've been searching for solutions to this problem and have come up with nothing. Has anyone come across a solution to this problem?
You should use CSS transitions if you want them to be smooth. Javascript animations don't use the device's graphics hardware, while CSS transitions do. This plugin makes it much easier to use the appropriate type of animation for each user's device.
Did you try to play with jQuery animation settings like http://api.jquery.com/jQuery.fx.interval/
I have written a Javascript/jQuery script. Its purpose is to serve as a responsive background image slider.
It is viewable here:
http://new.upserver.co.uk/rbis/
My question is this;
While the code functions correctly, it can be slow/laggy. Especially when additional animation related plugins appear on the same page (i.e. nivoslider).
I have seen many similar sliders that handle chunky images perform effortlessly and am concerned and wondering how this code could be optimised to perform better? the javascript in question is located in file http://new.upserver.co.uk/rbis/rbis.js
Many thanks for all suggestions.
Regards
jQuery animate is rarely the right tool for providing animation. Take a look at this rather contrived example I produced recently: http://css3.bradshawenterprises.com/demos/speed.php.
I would recommend using CSS transitions in normal browsers, and only using the old way of doing it using javascript in old browsers.
A good way to do that is to use something like http://playground.benbarnett.net/jquery-animate-enhanced/, though I have had some issues with that, and instead use my own methods of doing it.
Can anyone give me a light how to develop a site without jquery and javascript.
Currently I have a carousel developed using by jquery cycle plugin, but as we changed the mind that we should implement our site believing 'web for all, using progressive enhancement', sounds good to me but have no idea how i'm gonna modify my exisiting carousel and accordion to run if javascript is disabled.
I have to run those carousel and accordion without javascript or minimal use of javascript. Using only css3 and html5, so if javascript is OFF still users can view. Currently without javascript, accordion breaks, simply it displays all the contents and carousel just stucks!
I'm just looking for some ideas, how to run my existing carousel, accordion without JS.
Thanks in advance.
Waiting for your answers.
Interactivity on websites is delivered through CSS and Javascript. If you disable Javascript, you'll have to do all interactivity with CSS.
CSS3 is certainly able to generate carousels. See http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/ for some examples. Here is (german, but understandable) walk-through for a pure CSS3 carousel: http://webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial
Still, while this is nice and solves the problem for people that don't have Javascript, it creates just as much problems for people with older browsers that don't support CSS3...
Tell your boss that there will always be people that don't have Javascript, don't have CSS3, don't like carousels or even don't have internet. You can't make your site accessible for everybody! Just consider the costs and benefits, and go for some reasonable option!
I myself think that a Javascript with CSS3 fallback works well for most everybody :)
Good luck!
You are going to want to check out css3 transitions, transforms and the :active pseudo class.
transitions: http://www.alistapart.com/articles/understanding-css3-transitions/
transforms: http://24ways.org/2010/intro-to-css-3d-transforms
pseudo classes: http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
You will end up displaying all of the images at once, or displaying one static image in browsers like ie6, if you don't want to use javascript.
I want to make a JavaScript transition that is similar to the one on this website:
http://osc4.template-help.com/wt_32608/index.html#.
Could you please give me some suggestions and show me some libraries that would make it easier
to implement?
Thank you!
I think that you meant "library" rather than "literary".
It looks like this site is using jQuery along with some custom code, although such an effect could be achieved in pure CSS3 (at the cost of some cross browser compatibility).