Multiple Practical Effect For Building Parallax Websites

Download   Demo
Websites with scroll animations are all the rage these days. we’re going to show you a few practical examples for building them. You can think of this article as a collection of building blocks which you can mix and match into an impressive interactive web page.

The Basic Idea

The usual way that these websites are built is by using a JavaScript library. Some of the popular choices are Scrollr, scrollMagic, Parallax.js, scrollReveal.js and others. We are going to use Scrollr today as it is the most popular and works on mobile devices.

To use Scrollr, you only need to download it’s source and create a link to it in your HTML. After that’s done, calling skrollr.init(); will enable Scrollr for all elements on the page.

<script src="assets/skrollr.min.js"></script>

<script>

skrollr.init();

</script>

The library is very powerful and you can create all kinds of scroll animations with it. See the website that we were able to build with it:
Want to learn how it was made? Keep on reading!

Introduction to Scrollr

Once you have the Scrollr library in your page, you add data attributes to the elements you wish to animate while the page is scrolled. Here’s the most basic example, which animates a div from blue to red:

<div data-bottom-top="background-color: rgb(255,0,0);"

data-center-center="background-color: rgb(0,0,255);">

</div>

We have a simple div with a pair of attributes. The first attribute will tell Scrollr when the animation starts and the second one when it should end. As you can see, the animation itself is done via CSS properties (note that you need to specify the colors as rgb). The library smoothly transitions from one to the other.
Using these data attributes, you can create all kinds of interesting effects. Here are a few practical examples that show you what you can do.

Scrollissimo – Smooth scroll-controlled animations

Download   Demo

Scrollissimo is a javascript plugin for smooth scroll-controlled animations.
Scrollissimo animates Greensock’s tweens and timelines on user’s scroll.

1. INCLUDE JS FILES

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="scrollissimo/dist/scrollissimo.min.js"></script> <script src="scrollissimo/dist/scrollissimo.touch.min.js"></script>

2. JAVASCRIPT

$(document).ready(function(){         $(window).scroll(function(){             Scrollissimo.knock();         }); });

3. ANIMATE SOMETHING
Let we have a div called Divy:

<div id="Divy"></div>

#Divy{
    position: fixed;
    top: 0;
    left: 0;

    height: 50px;
    width: 50px;

    background: red;
}

Now we will animate Divy’s width. At the begining of page its width will be equal to 50px. And as we scroll its width will be grow up to 300px after we have scrolled for 1000 pixels. The first let’s create Grensock’s tween.
TweenLite.to(element:object, durationInPixels: number, params: object);

var divyTween = TweenLite.to(document.getElementById('divy'), 1000, { width: 300 });

NOTE: As you see it`s usual Greensock`s Tween except of duration of animation ***must be specified in pixels not in seconds.
Then we need to add this tween to Scrollissimo.

Scrollissimo.add(<Tween|Timeline>, <StartPixels>, <MaxSpeed>);

The second argument is start scroll value in pixels. The third argument is a maximal speed of this animation. 1 approximately equal to 6% of tween’s length per second. You must find your own value for each animation.

Scrollissimo.add(divyTween, 0, 6);

That is all you need to do to make a simple animation.

Responsive multi menu

Rate this

Download Demo
Responsive Multi Menu – The easiest way to develop site with multi level navigation and user-friendly experience it has been optimized for mobile devices using HTML5, CSS3 and jQuery

Main features of multi level menu

Easy installation : Include 3 lines of code to your HTML and let navigation works

Multi level on CSS : Multi level menu for wide screens will work even if no js

Light-weight : Requires only jquery

Multiple menus : You can have responsive multi menu as many as you want on your site

Works in mobiles : Responsive Multi Menu fits to your screen which works on mobile phones

Free licensed under MIT : Do with code what you want

1. INCLUDE CSS AND JS FILES

<!-- Include scripts --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="js/responsivemultimenu.js"></script> <!-- Include styles --> <link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/> <!-- Include media queries --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

2. HTML

<div class="rmm style">

    <ul>

        <li>

            <a href="#">Books</a>

            <ul>

                <li>

                    <a href="#">Audiobooks</a>

                </li>

                <li>

                    <a href="#">Cookbooks</a>

                </li>

                <li>

                    <a href="#">Catalogs</a>

                </li>

                <li>

                    <a href="#">Other</a>

                    <ul>

                        <li><a href="#">Other 1</a></li>

                        <li><a href="#">Other 2</a></li>

                    </ul>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">Dvds</a>

        </li>

        <li>

            <a href="#">Music</a>

            <ul>

                <li><a href="#">Cassettes</a></li>

                <li><a href="#">CD</a></li>

                <li><a href="#">Records</a></li>

            </ul>

        </li>

        <li>

            <a href="#">Video games</a>

        </li>

    </ul>

</div>

ScrollMenu.js

Download   Demo
ScrollMenu.js is a new interface to replace your old boring scrollbar.

Why Scroll Menu ?

• ScrollMenu.js transforms your scroll bar to awesome scroll menu.
• Single page navigation menu and scroll bar binds together.
• It gives a user sense of where they are in a page and how long is that section.
• With a high customizability of plugin you can have a unique user experience.
• Allow templating for menu content.
• Styling is seperated out to css, so you can change look of scrollMenu to have uniqueness.
• Support touch devices.
• Uses native scroll and can be easily hooked with any custom scroll.
• Its light weight (< 3kb gzipped and minified).

Zoom.js – Image Zoom for jQuery

Download   Demo
Zoom.js is a simple jQuery plugin for image zooming

Why
It’s the best way to zoom an image. It transitions/zooms in really smoothly, and then when you’re done, scrolls away, [esc] keys away, clicks away… clean af.
Also, now if you hold your meta key (⌘), it will open in a new tab. wow.
Where
zoom.js should (in theory) work in all relevant browsers.