I'm making a mobile website and I'm using javascript to animate things around? Is this recommended or should I use CSS3 transitions?
If so how can I implement a simple CSS3 transition that will move divA down 20px when divA is clicked?
Thanks.
You need to use a combination of javascript and CSS. CSS for the animations and javascript to trigger them.
Take a look at this jQuery plugin: http://ricostacruz.com/jquery.transit/
I've been using it recently and it is very useful, especially for callbacks.
Hope that helps :)
Please do not use jQuery + a plugin just to move down a div on a mobile device.
CSS3 transitions and animations are very well supported on mobile devices, on some of them even hardware accelerated.
Here is a simple script that does what you need:
http://jsfiddle.net/3Sd4U/
Related
I need a custom page slide transition for my new PhoneGap Project, Please help me to how to create a custom page slide transition using html5, css3 and javascript
Thanks advance..
I would recommend PageSlider by Christopher Conraets (an Adobe employee and strong proponent of PhoneGap - check out this talk by him about good rules for PhoneGap development if you're interested).
I'm using this at the moment. It feels good and is very easy to work with.
Check out this plugin pagingSlider.
Features
slide to pages with touch swipes
auto switch to pages by clicking menu item
animated mobile pagebrowser
integrated touch events with QuoJS
**
shafi plz use
**
transform translate3d 3d in css3
to translate the pages left to rigth and rigth to left
example
You can use Jquery Mobile transitions :
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
IScroll4 is a good tool for you。 http://cubiq.org/iscroll-4
3D transformations do not work in android browsers under version 3.0. Is there any way I can flip an image in this environment?
The flip effect should be similar to this: http://desandro.github.com/3dtransforms/examples/card-02-slide-flip.html.
Also, I can't use jQuery, just pure JS to achieve this.
Thanks in advance.
Why not use that? There's no jquery in there, just pure css3. http://desandro.github.com/3dtransforms/docs/card-flip.html
If you'll be using images, you just need to set images as a background with a fixed width and height.
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I'm looking to build an animated accordion which will work well on mobile devices.
I already built one using -webkit-transition: height 200ms ease; but it was sluggish at best when viewed on a mobile device.
Now I'm thinking Pure JS or a hardware accelerated webkit transform3d solution. What do you think? Has anyone seen an example of this working perfectly on a mobile device?
jQuery Mobile has an accordion but it's not animated: http://jquerymobile.com/test/docs/content/content-collapsible-set.html
I think that's honestly the best approach, start with a simple show/hide style accordian without animations, then use progressive enhancement to add transitions via the CSS transformations for modern mobile browsers that support them
Wonder if JQuery can do something like http://ikt.co.id/
look at the flash right side... does it posible? and someone can send me a guide or script sample?
thanks guys!
You might want to take a look at the perspective CSS3 property for the start bit. But that is only currently supported by webkit browsers, such as Safari and Chrome.
From then on, using jQuery's hover event to both stop the perspective and then to shift the padding of each element.