5 Sliding Content Techniques, Examples & jQuery How to’s
- By Noupe Editorial Team
- Posted in DESIGN, jQuery
- 96 comments
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.
HOW TO:
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.
- “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.
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).
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.
- 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.
Another great example of smooth scrolling can be seen at DesigninSocial, when one of the menu buttons is clicked, different panel is displayed.
HOW TO:
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.
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.
HOW TO:
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.
- 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.
Slice Machine has a great example of showing and hiding content by sliding boxes or panes on hover event.
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.
- Sliding Panels
Atlanticbt does a great job of grouping different links in one organized section, appears with a nice slide effect.
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.
dlv, 12 August 2009
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, 12 August 2009
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, 12 August 2009
Just getting into jquery at the moment, so this is great encouragement, thanks!
Peter Lehto, 12 August 2009
Great post!
I’ve been getting into jquery more and more. Bookmarked!
bineet chaubey, 12 August 2009
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, 27 July 2011
ya man this post is very useful
Moto Equipement, 12 August 2009
Very nice idea, i hope to have the time to introduce these techniques on my website. Jquery is so great
Joh nThomas, 12 August 2009
Wow, makes prefect sense to me dude!
RT
http://www.anon-web-tools.net.tc
Ahmed, 12 August 2009
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, 12 August 2009
Really good list. Thanks
dM, 13 August 2009
and this : http://www.davidmassiani.com/horinaja/
Hovsep S., 13 August 2009
Good stuff guys, keep up the good work.
Pelfusion, 13 August 2009
good work…thanks for sharing
webmasterdubai, 13 August 2009
really nice and important post. all jquery sliding stuff under one umbrella
ryan web pontefract, 13 August 2009
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, 13 August 2009
thanks for that post
Deanna, 14 August 2009
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, 14 August 2009
Hey, Its really nice techniques for Sliding content. thanks for sharing..
Piyush Agarwal, 14 August 2009
Loved this post. It would prove very helpful.
Alexandre Broggio ( Brasil ), 14 August 2009
Muito interessante obrigado
skyred, 14 August 2009
Great Tutorial!! I followed Sliding Boxes and Captions with jQuery tutorial and made this http://greatbrewers.com/beer-sommelier
Joe Wolfe, 14 August 2009
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, 15 August 2009
Fantastic work!
It’s a great post but more important it’s very usefull!!!
Thanks
Yasmine, 24 August 2009
Awesome, I love it
Thanks for posting
ebx, 29 August 2009
super duper helpful……mooochas gracias!
Himanshu, 30 August 2009
Really very helpful article, it covers all the aspects of jQuery. Just going to have some try! Thanks.
Satish Borkar, 31 August 2009
Gr8!!!
nice collection
cheers!
Neel, 18 September 2009
nice Article on jquery image slider.
Chris Pierre, 15 October 2009
This is article will Definitely be a bookmark, Thanks a lot!
vincentlauv, 19 November 2009
thanks, this is very useful thanks anyway
3m masr, 01 December 2009
very good … thank you
anadikt, 15 January 2010
thanks for that post
daddy design, 03 February 2010
great article. I am going to test this out.. ty!
Sofia, 09 February 2010
Thanks a lot for the valuable information.
Jane, 07 March 2010
Great Collection, thanks for sharing!
Indialike, 11 March 2010
Very nice and useful tutorials for web designers,
Thanks for posting.
Free Unique ArticlesFree Unique Articles, 14 July 2010
I just googled to your blog in search of this. Really interesting stuff. Thanks
Temizlik firmalar?, 31 July 2010
Very nice and useful tutorials for web designers,
Thanks for posting
iTechRoom, 09 August 2010
Very useful collection indeed, Thanks for sharing.
David, 13 August 2010
Thanks, very useful
Mubeen, 15 August 2010
Great Post!
mahaclip, 16 August 2010
Thanks, very useful this is it
Murukesh K V, 17 August 2010
Excellent collection and very helpful
Simon, 02 September 2010
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, 14 September 2010
Excellent post.
Brett Widmann, 24 October 2010
Thanks for such a great collection of tips and resources!
warawat, 06 November 2010
thanks for the list! there’s some good ones
Rali Madhu Sudhana Chary, 07 December 2010
Amazing of collection, really i am wonder of this Good article.
srikanth portal, 21 December 2010
Awesome collection..Thanks for the sharing..
wallpapers, 14 January 2011
very great collection! thanks!:)
happy new year!
Kenia Braucks, 16 January 2011
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, 20 January 2011
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, 26 January 2011
thanks….
good work done useful every developer……
mydesign, 27 January 2011
nICE jQUERY USING
Santosh, 12 February 2011
Awesome stuff. Please keep on sharing :)
Thanks.
??, 14 February 2011
???????????
Saurabh Gupta, 15 March 2011
Thanks..!! Nice work…
aldo, 22 March 2011
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., 08 April 2011
Really diggin the CharlieGentle. Might do something similar to my portfolio/blog.
Hemant, 19 April 2011
This is very helpful to me as fresher
Lmax, 20 April 2011
fantastic !!! thanx a lot :*
web design, 20 April 2011
some great ideas and inspiriting links !
thanks
nilesh, 12 May 2011
Excellent list of all the sliders. Thanks for sharing.
Designer Renji, 27 May 2011
Thanks……nice & helpful post…..
axxxd, 28 June 2011
nyc 1 mate!
anupal, 11 July 2011
great nice … really awesome.thnxx
Harsh, 22 July 2011
Superb Post :) !
Sunil Soundaraoandian, 02 August 2011
Excellent Post ! Thanks
hari, 18 August 2011
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, 01 September 2011
This is some awesome information on jQuery plug-ins. I appreciate you taking the time to find a bunch of cool ones.
Plugo, 12 September 2011
Thank you so much for this collection.
febina, 14 September 2011
This may also helpfull for web developers http://j.gs/792819/jsanimation
Amit, 14 September 2011
Very nice jquery
leena, 21 September 2011
thanks for sharing this article ..
alovilla, 23 November 2011
thank you. i used sliders. thank you very much
sajid, 05 January 2012
great Tools..
thanks for sharing
henry, 17 February 2012
was looking for this…found so many scrollers thanks!
tranh, 06 March 2012
cool but some examples got errors
jayendra, 12 March 2012
Awesome Collection. Thanks to share this.
Afrin, 19 March 2012
great and useful post :) thanks for sharing these :)
Raleigh Web Design, 25 March 2012
Awesome …All Collections are so nice. I love Sliding Boxes and Captions
Thanks
Gvall, 27 March 2012
exelent post…
Scott, 29 March 2012
FYI– Looks like creamycss goes to a link farm now.
Edgars, 08 April 2012
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, 11 April 2012
Great Site – Great Stuffs of JS. I love this site. ;)
sanjay, 24 April 2012
Thanks friend.
It help a lot and good effort.
Abdul Qadir, 22 May 2012
very much thanks
tabam, 23 May 2012
Is perfect! Thanks!
RJ, 26 May 2012
Hi,
can any1 of help me for a auto content slider with next and previus button.
Thanks in advance.
Arbuz, 03 June 2012
Thanks for sharing post.
Ahmad, 06 August 2012
thank u :) nice collection
Pieter Keuzenkamp, 30 August 2012
Great post, very usefull collection jQuery sliding techniques. Tnx ;-)
Ponderink, 08 October 2012
Thanks for the taking the time and putting this together, very handy. I’m a big jCarousel user! simplicity.
pradeep parjapat, 15 October 2012
Thanks everyone for review..
tsupaman, 29 March 2013
Thank you very much for all helpful my web.
email addresses for sale, 08 April 2013
[...]The data mentioned in the post are a number of the most effective obtainable [...]