logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Revolution Responsive Slider for Wordpress


It is almost a must to have a responsive website now that so many people view the web via a cell phone or tablet. But what if you want a slider on your homepage? Will it be responsive? Will the images and text in the slider animation resize to the width of the target device? Will the navigation for the slider be swipe enabled for mobile devices?

If you have a responsive Wordpress site, one resource you might want to consider is the Slider Revolution by Themepunch. Itís reasonably priced at CodeCanyon and easy to install and setup. This jQuery HTML5 and CSS based plugin came preinstalled when I purchased the new Moxie Wordpress theme by ParallelusTM and I really like the results. You can also purchase it as an independent plugin. You can see it in action via the video below.

Besides being responsive, cross browser and SEO readable, it has some very nice features including layers. This slider isnít just a series of image slides, moving into view one after the other. Each slide in the Revolution slide show can have unlimited layers and each layerís content can be individually animated. For example, each text caption is on itís own layer, allowing you to move them on and off the screen independently. Inside the drag and drop layer editor, you can position each design element with your mouse - no coding the CSS - or change the hierarchy of the layers by simply dragging them up or down in the list.

The design elements on each layer have several parameters such as start and end times, CSS transition with jQuery fallback and type of easing. You can create simple animations on a slide such as the one I have in the video below. With a combination of transitions and easing, the train moves on to the screen and stops when it bounces against the app icon.

One feature I really like is that the text captions on each layer can be customized individually with custom CSS, allowing you to design the text weight, color and drop-shadow. Another feature is the ability to embed a YouTubeTM or VimeoTM video on a layer or several layers. The video can be set to automatically play when loaded on the page or when clicked by the viewer. It can play directly within the slider or at full screen.

You have several general design options for the slider such as background color, drop-shadow, type of navigation (thumbnails, bullets or arrows), navigation auto hide and auto pause with mouse hover. You can even use Google Fonts, set the defaults for multiple screen sizes or hide the slider on very small screens.

Finally, you can have more than one slider on your Wordpress site in areas such as the header, sidebars, posts or pages. The Themepunch website has several live previews for the Revolution slider and an in-browser Slider Configurator feature for testing before you buy.

http://themes.themepunch.com/?theme=revolution_wp

http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380

Join us in the Animation forum. | Join us in the Digital Art forum.

|


Add Revolution+Responsive+Slider+for+Wordpress to Twitter Add Revolution+Responsive+Slider+for+Wordpress to Facebook Add Revolution+Responsive+Slider+for+Wordpress to MySpace Add Revolution+Responsive+Slider+for+Wordpress to Del.icio.us Digg Revolution+Responsive+Slider+for+Wordpress Add Revolution+Responsive+Slider+for+Wordpress to Yahoo My Web Add Revolution+Responsive+Slider+for+Wordpress to Google Bookmarks Add Revolution+Responsive+Slider+for+Wordpress to Stumbleupon Add Revolution+Responsive+Slider+for+Wordpress to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Duplicate Background Layers in Motion 5

Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor