10 Transition Effects: The art of Showing/Hiding Content
Delivering informative structure is the primary task an interactive user interface should be able to cope with. 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. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.
1. Simple Toggle with CSS & jQuery
A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.
<h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div>
2. jquery-fade-infade-out
A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.
$(document).ready(function(){
$("ELEMENT HERE").fadeTo("slow", 0.3);
$("ELEMENT HERE").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});
3. How to Mimic the iGoogle Interface
In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.
4. Show/hide a nice Login Panel using Mootools 1.2
In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2
5. jQuery pageSlide
jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
- The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
- Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.
6. Liquid expandable section with rounded corners using CSS
This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.
7. How to Make a Smooth Animated Menu with jQuery
This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.
8. Lazy Load
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
9. MOOSLIDE – AJAX CONTENT SLIDE
MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.
10. The Sexy Curls jQuery Plugin
Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.
Very nice resource, thanks! The lazyload works excellent on big WordPress generated galleries. Saves me on bandwidth and visitors have faster pages. Great!
Nice resource indeed – very useful so thanks for sharing!
Nice summary of transition effects!
You’ve been bookmarked
Great post, bookmarked for future ref, thanks
great article, dude. It is really useful. Thanks
Very useful article.
Now I need to find a site that could benefit from some of these features.
Brilliant Collection.
A real Gem.
Cannot wait to apply most of them.
Wow, brilliant article!
Just delicious’d it!
Nice!
Thanks for sharing!
Awesome list!
Thanks a lot.
very nice list… thanks!
Nice compilation. Definitely helpful for improving our sites.
Nice collection ! thx
Thanks a ton man.. iGoogle interface really super. Great compilation work. This is first time I’m visiting your site. I do come regularly here aft. It’s promise..
really great collection, i know many of this but others not… thanks!
to bookmarks
Congratulations. Great collection of examples.
Thanks. this is a great collection of transitions!
Very nice… Thanks for is collection
WOW, great resource…planning to use on next site!
Very informative lecturing on code application.
nice one! thanks
Very, very nice showcase of effects. A couple of these I know I’ll be using a lot. Thanks!
I love it! A lot of these features are quickly replacing a Flash’s need.
Great collection – looking forward to trying some of these out. Stumbled!
nice collection, thanks for resources..
Ну у вас либо талант писать, либо это стыбрено!
This is a nice list. By the way can anyone give me a link on how to save the position of the drag/drop feature just like the bbc homepage. I been searching the internet to no avail. Thanks
The list is very helpful though..
The lazyload is toooooo Great!
Thanks for this list. I’ve bookmarked it and I’ll be using a couple of these techniques on my website.
Some effects added to my site.
One more nice thing: mParallax ;]
I love this. Thanks for this great resource!
Awesome, just as I was struggling (as always) to figure out how to hide/show login at top of my page in my website rework. This is a great post which I found through @DannyOutlaw.. thanks for sharing
Kathy
@shrinkgurl
Thanks Dude!
Simple Toggle #1, light, simple but very impressive.
Где-то я уже похожее читала, пррчём слово в слово.
Nice post! thnx
Thanks. Bookmarked and Stumbled !
Excellent list and resources! Just learning about jquery now and it seems to be great! Thanks
Impressive list: thumbs up and I’ll use them in the next month. I like smoothe menu jQuery the most I think.
Excellent list of ajax effects, thanks for sharing.
bookmarked… thanks!
Definitely valuable list to hang on, bookmarked. Just don’t change the URL
Very useful indeed! Thanks for this
Thx for sharing.
awesome! using one of these already and testing another
Very nice pageSlide ! thx!
Great collection… to my delicious!