background preloader

Parallax Slider with jQuery

Parallax Slider with jQuery
(function($) { $.fn.parallaxSlider = function(options) { var opts = $.extend({}, $.fn.parallaxSlider.defaults, options); return this.each(function() { var $pxs_container = $(this), o = $.meta ? var $pxs_slider = $('.pxs_slider',$pxs_container), $elems = $pxs_slider.children(), total_elems = $elems.length, $pxs_next = $('.pxs_next',$pxs_container), $pxs_prev = $('.pxs_prev',$pxs_container), $pxs_bg1 = $('.pxs_bg1',$pxs_container), $pxs_bg2 = $('.pxs_bg2',$pxs_container), $pxs_bg3 = $('.pxs_bg3',$pxs_container), current = 0, $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container), $thumbs = $pxs_thumbnails.children(), slideshow, $pxs_loading = $('.pxs_loading',$pxs_container), $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container); var loaded = 0, $images = $pxs_slider_wrapper.find('img'); $images.each(function(){ var $img = $(this); $('<img/>').load(function(){ ++loaded; if(loaded == total_elems*2){ $pxs_loading.hide(); $pxs_slider_wrapper.show(); var one_image_w = $pxs_slider.find('img:first').width(); else{

http://tympanus.net/codrops/2011/01/03/parallax-slider/

Related:  html5 css3 JS

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Animated Skills Diagram with Raphaël In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle […] View demo Download source In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs. Let’s start with the markup.

Scrolling Parallax: A jQuery Plugin Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax Background of Stars (plus CSS3 keyframe animation) This idea was originally published on 3/12/2008, where you had to resize the browser window to see the parallax. I updated it on 4/6/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3 to animate the stars. There is some debate if these fancy transitions and animations that CSS3 bring us belong in CSS. It might be argued that things moving around like that is "behavior" and not "design" and thus belong in JavaScript. I disagree with that sentiment, and that animations are definitely "design" and if we can keep that stuff in CSS, we should.

Generate Websites from JSON, Markdown, and Mustache Templates using Punch A few months ago, I switched this blog from Wordpress to Jekyll. I love how Jekyll allows me to prepare everything locally and simply publish when it's ready. There's no server-side logic involved, which means I can host the whole blog in a S3 bucket. Better Check Boxes with jQuery and CSS Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document.

Better, Stronger, Safer jQuerify Bookmarklet A long time ago I built myself a little bookmarklet to load jQuery on pages that don't already have it. The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome.

Create a Parallax Scrolling Website Using Stellar.js One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I'm going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js. Interested in saving some time and making sure you're using modern best practices? There's a great responsive jQuery slider plugin on Envato Market that could do the job perfectly!

Rocking and Rolling Rounded Menu with jQuery In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, […] jQuery.parallax Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options );

Related: