Development

5 Sliding Content Techniques, Examples & jQuery How to’s

August 12th, 2009

The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways.

Today we would like to focus on sliding effects and how i can change the structure of a page in a truly unique and creative way. There are many transition effects that can be used to slide different contents, such as fading, horizontal sliding, vertical sliding, the list goes on. Try to pick the transition that best captures the style of your website.

In this article we’d like to present 5 smart techniques for sliding and scrolling content using the power of CSS and the beauty of jQuery.

– “Sliding Verticaly” with Button Controls

Share Point Artist has taken a truly unique approach to the “My Work” area. What they have created is an animated SlideShow showing their recent work with a nice hover effect for the “Previous” & the “Next” buttons.

The navigation options, the “Previous” & the “Next” buttons are slightly animated yet creating an appropriate atmosphere. Once one of these buttons is clicked, the content area slides vertically — showing the image of their recent work, with the description of each project in one <li> tag.

jQuery animation

HOW TO:

ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some beatiful effects.

jQuery animation

View DemoDownload Files

– “Sliding Horizontally” with Button Controls

Over the last couple of years we have noticed a strong trend toward sliding horizontal panels or menus also known as Carousels. Creamy CSS uses a similar effect, once one of the navigation options at the left and right is clicked, a group of images in one <div> tag slides Horizontally.

jQuery animation

HOW TO:

jCarousel (Riding carousels with jQuery) –

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

jQuery animation

View DemoDownload Files

Moving Boxes

The big difference in this slider is that there are buttons to change panels and the panels zoom in and out when user click on the buttons at the left and right.

jQuery animation

View DemoDownload Files

– Scrolling Content

It seems to have become a common practice to automatically scroll smoothly to any id or named anchor on the current page when clicking on a same-page link. For instance, CharlieGentle uses an interesting design approach to scroll smoothly to certain parts of the page.

Initially the visitors see only “Web” panel, when one of the menu buttons is clicked, further panels is displayed. The arrows at the right and left of the site always allows users to scroll to the next or previous panel.

jQuery animation

Another great example of smooth scrolling can be seen at DesigninSocial, when one of the menu buttons is clicked, different panel is displayed.

jQuery animation

HOW TO:

jQuery.ScrollTo

Ariel Flesler has written an excellent ScrollTo plugin that lets you scroll with many configuration options to customize the animation and also the final position.

jQuery animation

View DemoDownload Files

MetaLabDesign uses another interesting approach to scroll smoothly in a visually-appealing manner. The advantage of using scrollable compared to “normal” browser scrolling is that you don’t see the browser’s default scrollbars, and you can perform scrolling in much more visually sophisticated ways.

jQuery animation

HOW TO:

Scrollable

The purpose of this library is to make it extremely easy to add scrolling functionality to a website. The main design goals of this library are to provide visual customization functionality and programmability.

jQuery animation

View DemoDownload Files

– Sliding Boxes and Captions

yaypaul uses an interesting design approach to show the title of each project when the mouse is moved over each project image.

jQuery animation

Slice Machine has a great example of showing and hiding content by sliding boxes or panes on hover event.

jQuery animation

HOW TO:

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Set up the default starting point for the caption box. If you want it fully hidden initially, you will want the distance from the top or left to match the height or width of the window (.boxgrid), depending on which direction it will be sliding. You can also have it partially visible initially, as .caption .boxcaption illustrates.

jQuery animation

View DemoDownload Files

– Sliding Panels

Atlanticbt does a great job of grouping different links in one organized section, appears with a nice slide effect.

jQuery animation

HOW TO:

Sliding Login Panel built with jQuery

In this tutorial, we will see how to create a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker way.

jQuery animation

View DemoDownload Files

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

Sort by:   newest | oldest | most voted
dlv
Guest
7 years 1 month ago

excellent post! i love “Share Point Artist”, “yaypaul” and “DesigninSocial”… they are great!
Thanks for this writting, easy to read and really helpful !

adeux

Stephen Bateman
Guest
7 years 1 month ago

Wow I would’ve loved this post yesterday while I dug around for sliding stuff :P but regardless of timing, the content is splendid.

Charlotte
Guest
Charlotte
7 years 1 month ago

Just getting into jquery at the moment, so this is great encouragement, thanks!

Peter Lehto
Guest
7 years 1 month ago

Great post!

I’ve been getting into jquery more and more. Bookmarked!

bineet chaubey
Guest
7 years 1 month ago

amazing post .i appreciate for this great post .
i am a beginner in jquery. and this time i am trying to learn jquery.so this post is helpful for me .

ajeet
Guest
ajeet
5 years 2 months ago

ya man this post is very useful

Moto Equipement
Guest
7 years 1 month ago

Very nice idea, i hope to have the time to introduce these techniques on my website. Jquery is so great

Joh nThomas
Guest
Joh nThomas
7 years 1 month ago

Wow, makes prefect sense to me dude!

RT
http://www.anon-web-tools.net.tc

Ahmed
Guest
7 years 1 month ago

i used slider panel before its nice but need some time to edit it to work in your site

MetaLabDesign also have cool slider

Kaan
Guest
Kaan
7 years 1 month ago

Really good list. Thanks

dM
Guest
7 years 1 month ago
Hovsep S.
Guest
7 years 1 month ago

Good stuff guys, keep up the good work.

Pelfusion
Guest
7 years 1 month ago

good work…thanks for sharing

webmasterdubai
Guest
7 years 1 month ago

really nice and important post. all jquery sliding stuff under one umbrella

ryan web pontefract
Guest
7 years 1 month ago

Great list, I love that you actually take the time to compile this based on real world examples. I am definitley going to be using this!

mamdouh
Guest
7 years 1 month ago

thanks for that post

Deanna
Guest
7 years 1 month ago

Love this list! Thank you! Anyone know if you can use jQuery for sliders with mouse control? Meaning, if I hover to the right it scrolls.

Website Design Sydney
Guest
7 years 1 month ago

Hey, Its really nice techniques for Sliding content. thanks for sharing..

Piyush Agarwal
Guest
7 years 1 month ago

Loved this post. It would prove very helpful.

Alexandre Broggio ( Brasil )
Guest
7 years 1 month ago

Muito interessante obrigado

skyred
Guest
7 years 1 month ago

Great Tutorial!! I followed Sliding Boxes and Captions with jQuery tutorial and made this http://greatbrewers.com/beer-sommelier

Joe Wolfe
Guest
7 years 1 month ago

I could have used this article a few weeks ago when I was searching endlessly for the right sliding content code to use on my portfolio site. I ended up using a MooTools library over Jquery, but I like some of the things posted above a little better.

gigi
Guest
7 years 1 month ago

Fantastic work!
It’s a great post but more important it’s very usefull!!!

Thanks

Yasmine
Guest
Yasmine
7 years 1 month ago

Awesome, I love it
Thanks for posting

ebx
Guest
ebx
7 years 30 days ago

super duper helpful……mooochas gracias!

Himanshu
Guest
7 years 29 days ago

Really very helpful article, it covers all the aspects of jQuery. Just going to have some try! Thanks.

Satish Borkar
Guest
Satish Borkar
7 years 29 days ago

Gr8!!!
nice collection
cheers!

Neel
Guest
7 years 10 days ago

nice Article on jquery image slider.

Chris Pierre
Guest
6 years 11 months ago

This is article will Definitely be a bookmark, Thanks a lot!

vincentlauv
Guest
6 years 10 months ago

thanks, this is very useful thanks anyway

3m masr
Guest
6 years 9 months ago

very good … thank you

anadikt
Guest
6 years 8 months ago

thanks for that post

daddy design
Guest
6 years 7 months ago

great article. I am going to test this out.. ty!

Sofia
Guest
6 years 7 months ago

Thanks a lot for the valuable information.

Jane
Guest
6 years 6 months ago

Great Collection, thanks for sharing!

Indialike
Guest
6 years 6 months ago

Very nice and useful tutorials for web designers,
Thanks for posting.

Free Unique ArticlesFree Unique Articles
Guest

I just googled to your blog in search of this. Really interesting stuff. Thanks

Temizlik firmalar?
Guest
6 years 1 month ago

Very nice and useful tutorials for web designers,
Thanks for posting

iTechRoom
Guest
6 years 1 month ago

Very useful collection indeed, Thanks for sharing.

David
Guest
6 years 1 month ago

Thanks, very useful

Mubeen
Guest
6 years 1 month ago

Great Post!

mahaclip
Guest
6 years 1 month ago

Thanks, very useful this is it

Murukesh K V
Guest
Murukesh K V
6 years 1 month ago

Excellent collection and very helpful

Simon
Guest
6 years 26 days ago

thanks for the useful collection, i like your design! here you can find some examples for some other jquery sliders: http://blog.xparo.com/jQuery-Slider.aspx (JS-code free for download)

Kago Kagichiri
Guest
Kago Kagichiri
6 years 15 days ago

Excellent post.

Brett Widmann
Guest
5 years 11 months ago

Thanks for such a great collection of tips and resources!

warawat
Guest
5 years 10 months ago

thanks for the list! there’s some good ones

Rali Madhu Sudhana Chary
Guest
5 years 9 months ago

Amazing of collection, really i am wonder of this Good article.

srikanth portal
Guest
5 years 9 months ago

Awesome collection..Thanks for the sharing..

wallpapers
Guest
5 years 8 months ago

very great collection! thanks!:)
happy new year!

Kenia Braucks
Guest
5 years 8 months ago

Intimately, the post is really the greatest on that worthw hile topic. I fit in with your conclusions and also definitely will eagerly look forward to your next updates. Simply saying thanks can not just be sufficient, for the amazing clarity in your writing. I definitely will directly grab your rss feed to stay abreast of any kind of updates. Pleasant work and also much success in your business endeavors!

Mark Searle | Unicora
Guest
5 years 8 months ago

Glad to see you have found some new and interesting sliders. A Google search for JQuery sliders will bring up pages of sites all will almost the same lists.

Good job!

rahil
Guest
5 years 8 months ago

thanks….
good work done useful every developer……

mydesign
Guest
5 years 8 months ago

nICE jQUERY USING

Santosh
Guest
5 years 7 months ago

Awesome stuff. Please keep on sharing :)

Thanks.

??
Guest
5 years 7 months ago

???????????

Saurabh Gupta
Guest
5 years 6 months ago

Thanks..!! Nice work…

aldo
Guest
aldo
5 years 6 months ago

some nice choices here!
though, i am still looking for something specific i hope someone here can help me find =)
i’m trying to find an image slider with mousewheel (or smoothscroll) option, that will allow me to hover into a large image (preview)
major plus if it could also allow me to click into a lightbox

that was a mouthful =)
any help appreciated
thanks ahead!!!

Yuriy Z.
Guest
5 years 5 months ago

Really diggin the CharlieGentle. Might do something similar to my portfolio/blog.

Hemant
Guest
Hemant
5 years 5 months ago

This is very helpful to me as fresher

Lmax
Guest
Lmax
5 years 5 months ago

fantastic !!! thanx a lot :*

web design
Guest
5 years 5 months ago

some great ideas and inspiriting links !
thanks

nilesh
Guest
5 years 4 months ago

Excellent list of all the sliders. Thanks for sharing.

Designer Renji
Guest
5 years 4 months ago

Thanks……nice & helpful post…..

axxxd
Guest
5 years 3 months ago

nyc 1 mate!

anupal
Guest
5 years 2 months ago

great nice … really awesome.thnxx

Harsh
Guest
Harsh
5 years 2 months ago

Superb Post :) !

Sunil Soundaraoandian
Guest
5 years 1 month ago

Excellent Post ! Thanks

hari
Guest
hari
5 years 1 month ago

hi,your article is nice,but i want to slide multiple category on one page with jquety,
ex:
Categoryname1
prev image1 image2 image 3 prev
Categoryname2
prev image1 image2 image 3 prev,
if any one knows pls reply to plhkrishna@hotmail.com

Mike Failla Design
Guest
5 years 27 days ago

This is some awesome information on jQuery plug-ins. I appreciate you taking the time to find a bunch of cool ones.

Plugo
Guest
5 years 16 days ago

Thank you so much for this collection.

febina
Guest
febina
5 years 15 days ago

This may also helpfull for web developers http://j.gs/792819/jsanimation

Amit
Guest
5 years 15 days ago

Very nice jquery

leena
Guest
5 years 8 days ago

thanks for sharing this article ..

alovilla
Guest
4 years 10 months ago

thank you. i used sliders. thank you very much

sajid
Guest
4 years 8 months ago

great Tools..

thanks for sharing

henry
Guest
4 years 7 months ago

was looking for this…found so many scrollers thanks!

tranh
Guest
4 years 6 months ago

cool but some examples got errors

jayendra
Guest
4 years 6 months ago

Awesome Collection. Thanks to share this.

Afrin
Guest
Afrin
4 years 6 months ago

great and useful post :) thanks for sharing these :)

Raleigh Web Design
Guest
4 years 6 months ago

Awesome …All Collections are so nice. I love Sliding Boxes and Captions
Thanks

Gvall
Guest
4 years 6 months ago

exelent post…

Scott
Guest
Scott
4 years 5 months ago

FYI– Looks like creamycss goes to a link farm now.

Edgars
Guest
4 years 5 months ago

thanks for info!
those sliding boxes, divs, even simplest hide/show div are excellent way how to put more content in few space. and not to mention looks modern and can add price when building websites for clients ;)

Ankit
Guest
Ankit
4 years 5 months ago

Great Site – Great Stuffs of JS. I love this site. ;)

sanjay
Guest
sanjay
4 years 5 months ago

Thanks friend.
It help a lot and good effort.

Abdul Qadir
Guest
Abdul Qadir
4 years 4 months ago

very much thanks

tabam
Guest
4 years 4 months ago

Is perfect! Thanks!

RJ
Guest
RJ
4 years 4 months ago

Hi,

can any1 of help me for a auto content slider with next and previus button.
Thanks in advance.

Arbuz
Guest
4 years 3 months ago

Thanks for sharing post.

Ahmad
Guest
4 years 1 month ago

thank u :) nice collection

Pieter Keuzenkamp
Guest
4 years 29 days ago

Great post, very usefull collection jQuery sliding techniques. Tnx ;-)

Ponderink
Guest
Ponderink
3 years 11 months ago

Thanks for the taking the time and putting this together, very handy. I’m a big jCarousel user! simplicity.

pradeep parjapat
Guest
pradeep parjapat
3 years 11 months ago

Thanks everyone for review..

tsupaman
Guest
3 years 6 months ago

Thank you very much for all helpful my web.

email addresses for sale
Guest
3 years 5 months ago

[…]The data mentioned in the post are a number of the most effective obtainable […]

wpDiscuz