SUPERSCROLLORAMA
http://johnpolacek.github.io/superscrollorama/
Create Your Own Trendy Parallax Website Layout
Advertisement Introduction Apart form the pinterest dynamic fluid layout and big background image layout, parallax layout is still one of the trend in web design simply because it's a great technique to showcase product/service through an automated presentation by using scrolling. Take Minicooper Japan as an example, when user scrolls down the website, each slide introduces the car features with seamless, perfectly timed animations which is a really great user experience. In this post, we have a few of javascript plugins that are able to achieve pretty impressive parallax animations. To spice up your inspiration, we also gathered 10 great examples that implemented parallax scrolling to its full potential.
Typography Effects with CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
What The Heck Is Responsive Web Design?
Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive
Lateral On-Scroll Sliding with jQuery
After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the opti View demo Download source
jQuery.parallax
Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do?
Item Blur Effect with CSS3 and jQuery
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of "focus" effect that drwas the attention to the currently hovered item. View demo Download source
zLayer jQuery Plugin - Orientate Elements
zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creative methods through a parallax effect. Best part about zLayer is how easy, lightweight, and quick the plugin is!
Sexy Opacity Animation with MooTools or jQuery
A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Related:
