background preloader

Smooth Vertical or Horizontal Page Scrolling with jQuery

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

Related:  jQuerySite Buliding

10 jQuery Horizonal Scroll Demos & Plugins In today’s post we bring to you 10 jQuery Horizonal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :) 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.

Animated Scrolling with jQuery 1.2 A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Here is what the code looks like with the minor change: JavaScript: CSS Font-Size: em vs. px vs. pt vs. percent / Kyle Schaeffer One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web?

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. jPages - Pagination jQuery What does it do? jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load. Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them. The plugin is very unobtrusive and it won't apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Sponsor Flip Wall With jQuery & CSS Martin Angelov Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. 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.

jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin jInvertScroll - A lightweight jQuery horizontal Parallax Plugin What is it? It's a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to setup and requires nearly no configuration. Note: By using this plugin, we expect that you know the limitations of horizontal parallax scrolling, for instance if the screen height is smaller than the content, the content will be clipped, but this plugin is intended anyway for webdesigners and -developers, so we think that you know what you're doing. ;-)