background preloader

ScrollMagic - Demo

ScrollMagic - Demo

untitled Coin Slider: Image Slider with Unique Effects « Workshop After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. While I was working on this I felt like I’m on college again. For rain effect I spent few rainy hours to built it and that’s why I gave him that name. How to use Download jQuery, Coin Slider javascript file and CSS file and include them on your page: Add slider content and create one div with an id and put images and image descriptions, similar to: <div id='coin-slider'><a href="img01_url" target="_blank"><img src='img01.jpg' ><span> Description for img01 </span></a> ...... ...... At the end all you have to do is to call Coin Slider: Example List of all options

Nikebetterworld Parallax Effect Demo | Ian Lunn - Web Designer & Developer A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section.

IanLunn/jQuery-Parallax Ariel Flesler: 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.

7 ressources Javascript pour créer un site full-page ou parallax Aujourd'hui sur le Blog du Webdesign, découvrez 7 ressources javascript et jQuery pour créer des sites fullpage ou parallax. Une des grosses difficultés à gérer sur les sites de type full page, ou en construction au scroll est que tous les utilisateurs n'ont pas tous la même résolution d'écran. Comment, dans ces conditions-là, faire en sorte que les sections de pages ressemblent toutes exactement à la maquette, fournis dans une seule taille, évidemment ? Pour vous simplifier la tâche sur votre prochain projet de ce type, le Blog du Webdesign a déniché pour vous 7 ressources vous permettant de faire divers types de sites full-page ou parallax. Parallax.js Parallax.js, comme son nom ne l'indique pas, n'est pas spécialisé dans le parallax mais dans la création de navigation entre "écrans" de taille définis. One Page Scroll Cette ressource javascript vous permettra de mettre en place un effet comparable à celui du site de l'iPhone 5S. Fullpage.js Parallax.js Cool Kitten Skrollr