10 Transition Effects: The art of Showing/Hiding Content
20.01.2010
POSTED IN Blog, Inspiration, Resources, Tutorials, Web Design | NO COMMENTS TAGS : css, effect, html, jqery, site, transition, web, wordpress
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.
Toggle Header
Content Header
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.
