background preloader

SUPERSCROLLORAMA

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. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:

http://johnpolacek.github.io/superscrollorama/

Related:  Banque d'effet JSjQuery animateWEB RESOURCESJSefroimrosenberg

CSS Shake Some CSS classes to move your DOM! The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable)

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) Express applications MySpace No introduction required! Everyone knows MySpace, and the upcoming is powered by Express. Visit MySpace Getting Started with GSAP (GreenSock Animation Platform) Quick links: Jump Start Introduction Vertical Timeline A responsive vertical timeline layout with icons and example media queries. View demo Download source This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

Scrollable Thumbs Menu with jQuery In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which […] View demoDownload source In this tutorial we will create a fixed menu with scrollable thumbs. 50 CSS and JavaScript Tools, Frameworks and Libraries Keeping up with the new releases in web design is not easy. There are new tools, libraries and frameworks seemingly released every other day. The good news is we’re here to summarize everything up for you. In total, we have trimmed this CSS and JavaScript resource collection down to our 50 favorites, just to make things easier for you. All of the tools, libraries and frameworks have been categorized into the following categories: CSS Libraries & Toolkits, Flexbox Tools, Responsive Web Frameworks, Material Design Frameworks, Random CSS Stuff, JavaScript Libraries & Frameworks and finally a bunch of Web-Based Apps.

Js Tutorial - jQuery Scrollsteps - Handle mouse scrolling by steps DownloadDemo User Rating: 5/5 ( 1 votes) jQuery Scrollsteps is a lightweight jQuery plugin to handle mousescroll events by steps, handling many wheel types (click, inertia, etc.) Mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel. So, if you are trying to setup a page design where the user should be able to scroll through elements "one at a time", this can cause a lot of problems, especially frustration as this easily can render the scrolling not so fluid.

Related:  ParallaxParallax rollingSpringTreeLab