Smooth Vertical or Horizontal Page Scrolling with jQuery

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! The Markup The markup for our example […] View demoDownload source In this tutorial we will create a simple smooth scrolling effect with jQuery. So, let’s start! The Markup The markup for our example page is going to be very plain. The HTML is going to be the same for both examples. The CSS Since we have two examples, we will start with the horizontal page style. The main idea is to make the sections very wide and 100% in height. We need to give the body a valid height, because we want to be able to define the height 100% to the section. The style for the vertical page layout is going to look as follows: Nothing special here, just that we give a big height to the sections. Let’s add the JavaScript The JavaScript

jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom

Adaptor, an extensible jQuery content slider | Phil Parsons This jQuery plugin is a free and lightweight content slider for creating cool 3D (and 2D) slideshows for featured content on your website. In older browsers that do not support CSS3 with 3D transitions the plugin detects them and degrades gracefully to a simple transition maintaining the rich user experience for everyone. The plugin is powered by jQuery and CSS and is designed to be easy to add to an existing web page with the minimal effort on the designer or developer’s part. If you are a developer and want to spice things up a bit the plugin exposes a simple API for adding animation effects and extending it’s core functionality with paging controls and feedback indicators. The full developer documentation for the plugin can be found on the Github project pages —the same place you can download the latest version of the code. Setting up the HTML For 3D effects the HTML will need an outer box within which the animated box will rotate—I call this the view port. Including the jQuery

jQuery topLink Plugin Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML <a href="#top" id="top-link">Top of Page</a> A simple link. The CSS A little CSS for position and style. The jQuery JavaScript You'll see that I've added jQuery's ScrollTo plugin to add some smoothness to the anchor. Please note that this version doesn't work with Internet Explorer due to IE's lack of CSS "position:fixed" support. Know of a better way to incorporate IE support? Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Backup Your Database into an XML File Using PHP Newer Animated AJAX Record Deletion Using jQuery

jQuery.ScrollTo Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.

jQuery Smooth Div Scroll by Thomas Kahn - smooth content scrolling using jQuery Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Smooth Touch Scroll has just been released! I have just released Smooth Touch Scroll, a slim touch version of Smooth Div Scroll. If Smooth Div Scroll is the Swiss Army Knife of smooth scrolling, Smooth Touch Scroll is the lightweight cousin, slimmed down and geared towards touch scrolling. Check out Smooth Touch Scroll att smoothtouchsroll.com Consider using Smooth Touch Scroll if you don't need the full functionality of Smooth Div Scroll and if your content is primarily for touch devices. Main features Works on touch devices like iPhone, iPad and Android smartphones. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. Table of contents How does it work? The basic principle behind Smooth Div Scroll is simple: let one div (scrollableArea) scroll inside another div (scrollWrapper). Quick demo About me Happy scrolling!

scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"

How To Create a Horizontally Scrolling Site If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to "wrapping" that element down onto the next line. This natural flow has lead to conventions in web page layout and even into hardware itself. View Demo Download Files The best way to do it I'm going to go out on a limb here and say that I think a table is the best layout technique for a horizontally scrolling site. Set a really wide static width. The <table> method What we need is a page element which can expand horizontally as needed and never "wrap". Let's assume we are trying to lay out a series of blog posts one after another horizontally. <table><tr><td> .. blog post #1 </td><td> .. blog post #2 </td><td> .. blog post #3 </td></tr></table> Yuck, right? Ideally, our page structure would be like this: <article class="post"> .. blog post #1 .. That should do it! The Results

Intriguing animate-on-scroll effect – jQuery tutorial | PeHaa Blog I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website. In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration. Click here to see the demo. We’ll start with the html structure : The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap. Right now, the important point is to set width : 100% and overflow-x: hidden for the #wrap_out. The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. To animate the .element we’ll go simple and use a linear function to move it from its initial position to its target position. What happens when we scroll ? move is a function of the scroll value and has two parameters : initial (p0) and final (p1) position of an element.

Fancy Scrolling Sites In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history. By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. So how do they do that? JavaScript. Know any others? Add them in the comments. Share On