How do I animate my website using jQuery web animation while still keeping it SEO friendly?
If you’re interested in jQuery web animation for your website, check out these 6 cool website animation techniques:
1. jQuery Cycle: http://malsup.com/jquery/cycle/
A great way to display your images!
This useful plugin can be used to create slideshows of images without the need for Flash. You can use this to display a gallery of images and choose the manner you’d like the images to transition. Effects include Shuffle, Zoom, Fade, Turn Down, Curtain, and Scroll.
Boomtown uses this jQuery animation here: www.boomtownig.com
2. jQuery Accordion: http://jqueryui.com/demos/accordion/
Manage your content.
The jQuery Accordion can help you display lots and lots of content in a condensed form that’s still visible to search engines, but doesn’t overload users’ senses.
RCD Technology uses the accordion plugin to successfully manage their content: http://www.rcdtechnology.com
3. Form Validation: http://jquery.malsup.com/form/
Doing client-side form validation is made much easier with the jQuery forms plugin.
Widely regarded as one of the best jQuery plugins, Form Validation involves doing things like checking that all required fields were filled out and, if so, were they filled out to a required specification (e.g. correctly formatted phone numbers or dates), enabling you to get the information you need.
Create a cross-browser multi-level horizontal or vertical navigation.
The jQuery Superfish plugin is great for managing drop down and multi-level navigation. With the Superfish navigation plugin, you’ll be able to showcase and direct visitors to the many webpages your site has to offer.
It’s used for the navigation in the orange top menu of the Boomtown site and blog: www.boomtownig.com
5. Subtle Animation Effects: http://www.rcdtechnology.com/rfid-applications/partners-customers/
Create subtle animation effects for page items and images. (You can view these by mousing over the partner logos).
The creation of these effects for page items adds different movement to images.
6. Or you can use any of the widgets in the jQuery UI to enhance user experience:
We hope these 6 tools will inspire you to explore all that jQuery has to offer—there are numerous other plugins and website animation techniques as well. Learn more about jQuery and what it can do for your website!