Scrollmagic: fun web design

In web design a trend is like the style that has been adopted for the realization of the sites which is strongly accepted by users, usually in temporary periods. Part of the trends so far in 2016 and, apparently, will continue to set the tone in 2017, are the animations and long sections with a lot of scroll.

It is not a secret that this style is quite attractive and fun for the user, with the animations we can make navigating the site intuitive and entertaining as long as they are well used. For this reason we have created a tutorial to include animated scrolls on your website, using the jQuery ScrollMagic plugin.

ScrollMagic: Fun Web Design

ScrollMagic is a library made in javascript to achieve interactions when moving websites. It is a complete rewrite of its predecessor Superscrollorama and its architecture is based on plugins that offer easy customization and extensibility.

It is ideal if we want to implement some of the following things:

• Animation based on the position or displacement of the site. Trigger the animation or synchronize it with the movement of the scroll. Add parallax effect without much effort. Create a page with infinite scroll, handling content loading with ajax.

ScrollMagic Features

• Optimized performance, it is light, flexible and allows extensibility. Event management and object oriented programming. It supports adaptive web design. It has support for movements in both directions (horizontal and vertical) It has support for movements within containers (div), even multiple on one page.It works perfectly for browsers: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. In its GitHub repository, it has detailed documentation and many application examples.

Get ScrollMagic

It is available to obtain it in various ways.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower install scrollmagic

3: node package manager

npm install scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

You can also read How to customize the design of an email in Outlook

Installation and use

The installation is quite simple, we only include the kernel file in the html files where we want to use it.

;

For use, the plugin provides a controller-oriented design pattern, to which one or more scenes are added. These scenes are used to define what happens in the containers when they move to a specific point.

This would be a basic example:

// init controller var controller = new ScrollMagic.Controller (); // create a scene new ScrollMagic.Scene ({duration: 100, // the scene should last for a scroll distance of 100px offset: 50 // start this scene after scrolling for 50px}).setPin ("# my-sticky- element ") // pins the element for the the scene's duration.addTo (controller); // assign the scene to the controller

A more advanced example would be, achieve multiple offsets, its source code would be:

$ (function () {// wait for document ready // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, ease: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", duration: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // add indicators (requires plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0.5, {rotation: 360, ease: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // add indicators (requires plugin).addTo (controller_h);});

You can find many more examples with their source code in the plugin documentation.

WE RECOMMEND YOUHow to do a clean installation of Windows 10 using a USB stick