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.

TabbedContent – jQuery lightweight tabs plugin

Download   Demo

• Basic demo
• Bootstrap demo
• Bootstrap + Zepto.js demo

TabbedContent is a lightweight* tabs plugin that uses the HTML5 history API to add your tab navigation to your browser’s history.
* 2.6 KB packed, 1.5 KB gzipped
It is compatible with both jQuery and Zepto.js libraries.
It also has an API that will let you switch between tabs externally.

Slick Custom Scrollbar

Download   Demo
There are plenty of situations where the default scrollbar of the browser doesn’t quite cut it in terms of style or footprint. Well, Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS. The markup for the custom scrollbar is dynamically generated, leaving the original source untouched. Easily modify the look of the scrollbar using all the power afforded to you by CSS, whether it’s giving it a background image, rounded corners, CSS3 shadows, or changing its thickness etc.

jQuery Grid by Gijgo.com

Download   Demo

jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable tool, and will add advanced interaction controls to any HTML table. This plugin support pagination, javascript and server side data sources, jQuery UI and Bootstrap. Free open source tool distributed under MIT License.

Chartinator – Transforming HTML tables into charts

Download   Demo

Chartinator is a jQuery plugin for transforming HTML tables into charts using Google Charts

What are the current features?

Chartinator currently supports the following:

• Creation of the following chart types using Google Charts
  • Bar Chart
  • Pie Chart
  • Column Chart
  • Calendar
  • Geo Chart
  • Table Chart with data column formatter
• Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays
• Accessible data – Using HTML tables as data sources makes data accessible to screen readers and searchbots
• Showing and hiding of HTML tables accessibly
• Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays
• Transposition of data – swapping of rows and columns
• Resizing of charts on screen resize – Responsive Web Design
• Chart aspect ratio control
• Customization of chart tooltips and annotations
• Customization of all Google Chart options – Fonts, colors, chart formatting, etc.

socialShare.js

Download Demo

socialShare.js is a jquery plugin to provide more control on social sharing buttons. Do the styling without worrying about the javascript implementation.

Features

• Full control over the design of the buttons.
• No separate widget js loading for separate services.
• Share counts of all supported services.
• Easy to configure.

jMosaic – jQuery plugin for align elements

Download   Demo
jMosaic is a lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.
The proportions of the elements don’t change. As the elements can be used: img, div, li etc.

jquery.horizonScroll.js – Horizontal Scrolling Websites

Download   Demo
This is a jQuery plugin which allows for websites to page (scroll by set width) left and right horizontally. Horizontal scroll sites offer a new and unique way to develope sites!

Uglipop.js – Ultra Lightweight Javascript Modal/Lightbox

Download Demo

(Pure Javascript)

An ultra lightweight,unstyled 2kb Minimal Javascript. Is Lightweight Non-fancy Modal Written is JS , Uglipop is highly customizable

Let’s see it in action.

Check Out Demo

In Raw form Uglipop does not contain modal like this it is actually unstyled , in order to full fill its aim of being fully customizable , minimal and lightweight. That’s the reason behind calling it Ugly Things That can be used with Uglipop

• You Can Use Div.
• You Can use Plain HTML
• You Can use AJAX Response
• You Can use Iframe
• You Can use Images

You Can always use Uglipop with minimal code like this

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

How does it look when it’s Ugly & raw?

Well UgliPop at its worst looks really bad but the good part is that you can style it way the way you want it

uglipop({class:'put2', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.put2{
      background-color:#fff;
    }

How do I style my Uglipop Modal ?

Well Styling an Uglipop Modal is pretty simple and easy while calling uglipop(); watchout for argumentclass:”Your Styling Class Name Goes Here” so your code becomes something like this.

uglipop({class:'my-styling-class', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.my-styling-class{
      background-color:#fff;
      color:black;
      /*all CSS goes here*/
    }

How Do I use Other Div inside Uglipop Modal ?

Using Other Div inside Uglipop Modal is Pretty Simple , minimum possible code can go like this

uglipop({class:'my-styling-class', //styling class for Modal
        source:'div', //'div' instead of 'html'
        content:'your div id goes here'});}

<div id='some-div-id' style='display:none;'>
        other html goes here .....
        </div>

Can We Use Images inside Uglipop Modal?

Sure you can always use the images inside the uglipop by using it in HTML mode

uglipop({source:'html',
        content:'<img src="url-goes-here"></img>'});}

How Do I Create Custome Themes for Uglipop?

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

.put{
      border-radius: 10px;
      background-color:white;
      width:300px;
      height:300px;
      padding:10px;
     -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
    }

Youmax – Complete Youtube Channel on your Website

Download Demo

Youmax is a jQuery plugin used to display any YouTube channel on your website.

Basically the plugin displays the below items:

• Channel header
• Uploads of the channel in a tab
• Any playlist that you specify will be displayed as a tab
• A page that displays all PlayLists of a Channel

Download Demo

iFrame Resizer

This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit the contained content. It provides a range of features to address the most common issues with using iFrames, these include:

• Height and width resizing of the iFrame to content size.
• Works with multiple and nested iFrames.
• Automatic domain authentication for cross domain iFrames.
• Provides a range of page size calculation methods to support complex CSS layouts.
• Detects changes to the DOM that can cause the page to resize usingMutationObserver.
• Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Device Orientation and Mouse events).
• Simplified messaging from iFrame to host page via postMessage.
• Fixes in page links in iFrame and supports links from the iFrame to the parent page.
• Provides custom sizing and scrolling methods.
• Works with ViewerJS to support PDF and ODF documents.
• Fallback support down to IE8.

rmodal.js – Simple Modal Dialog

Download Demo

rmodal.js is a simple and lightweight modal dialog with no external dependencies.

Features:

• Plain JavaScript only – no dependencies
• IE9+ supported
• Less than 1KB when gzipped and minified
• Fully unit tested

Select3 – Modular and Lightweight Selection Library for jQuery

Download Demo

Select3

Modular and light-weight selection library for jQuery and Zepto.js.

Motivation

I’ve used Select2 for a long time because I reckon it is the best and most feature-rich selection library out there.

However, time and again I’ve ran into its limitations. It is difficult to customize the styling, and introducing subtle tweaks to its behavior typically meant maintaining a private fork. More specifically, I wanted to make the following changes:

• Use custom templates, instead of the ones that are hard-coded in Select2. This would also open up the possibility of not loading the image sprite included with Select2, but instead useFontAwesome icons that I already use in my projects.
• Use custom loading indicators, instead of the spinner GIF included by Select2.
• I wanted to make it easier to support a use case where Select2 is used without any selection dropdown, but with the proper tokenization.
• Make Select2 work with jQuery builds without Sizzle for better performance. Patches for this have been accepted in Select2, but unfortunately it’s a moving target causing repeated breakage. Also, once Sizzle is no longer required, it becomes much easier to support Zepto.js.
• Personally, I preferred a more modern codebase to work with, rather than the huge monolithic library that is Select2. This also includes proper documentation of the code as well as good test coverage. At this point also support for any IE version older than 10 can be dropped.

Having said that, if you’re a user of Select2 and don’t recognize yourself in any of these issues, I advise you to keep using Select2. It’s feature-rich and actively supported, so don’t fix what ain’t broken 

Setup

Select3 only relies on jQuery or Zepto.js being loaded on the page to work.

In addition, the default templates assume that you have included FontAwesome in your page to display the icons.

Manual

Copy select3-full.js and select3-full.css from the dist/ directory into your project. Then put the following in your HTML head:

<head>
    ...
    <link href="font-awesome.css" rel="stylesheet">
    <link href="select3-full.css" rel="stylesheet">
    ...
    <script src="jquery.js"></script>
    <script src="select3-full.js"></script>
    ...
</head>

Verify the paths are correct for your particular project. The important thing is that jQuery (or Zepto.js) should be loaded before including Select3.

Using Bower

Make sure Bower is installed, then run:

$ bower install select3

Using Component

Include as a component(1) dependency.

In your component.json:

{
    "dependencies": {
        ...
        "arendjr/select3": "^1.0.0"
        ...
    }
}

And in your code:

var $ = require('jquery');
require('select3');

Browser Support

• Chrome
• Firefox
• Internet Explorer 10+
• Safari 6+

Note that while Internet Explorer versions older than 10 are not supported, you might be able to get them to work, possibly with the use of some polyfills. Reports of success or patches to create a “legacy” build would be welcomed

Contact Form – Simple and Easy to Customize

Download Demo

Contact Form is a simple and easy to customize contact form. A minimal and customizable snippet to throw a semantic form into your web projects on the fly.

Sapo.js – Interactive Procedural Texture Generator

Download Demo

Init

Make sure you have Bower and Gulp installed:

$ npm install -g bower
$ npm install -g gulp

Install dependencies:

$ npm install
$ bower install

Develop

Build static files and run dev server:

$ gulp

Copy build to GH-Pages folder. The setup should be master branch in /projects/sapo.jsand gh-pages branch in /projects/sapo.js-pages. This command will copy masterbranch’s build folder togh-pages branch folder:

$ gulp deploy

ggtooltip.js – A jQuery Tooltip Plugin

Download Demo

ggtooltip.js is a simple jQuery tooltip plugin extended from Twitter Bootstrap’s tooltip plugin that support 4 positions, background color, font color and border color without using images.

FEATURES

• 4 Positions: top, right, bottom and left.
• Unlimited background colors.
• Unlimited font colors.
• Different border color combinations based on background colors.
• Supports different types of tooltip triggers such as click, hover, focus and manual.
• Powered by HTML5, CSS3 and jQuery.

jQuery.imgx – jQuery Plugin for Serving Hi-Res Images on Desktop/Mobile

Download Demo

jQuery.imgx

Lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image varients, using Apple’s recommendednaming conventionfor high-resolution graphics.

Installation

Include the latest version of jQuery and jQuery.imgx.js in the <head> of your HTML document:

<script src="jQuery.min.js"></script>  
<script src="jQuery.imgx.js"></script>

How to Use

Reference the imgx() method and include @2x, @3x, or @4x image varients in the same directory as the original source. The script will automatically load the appropriate image(s) based on the display’s detected pixel density. See the live demo: code.bynathan.com/imgx

jQuery

$(function() {  

    // All Images
    $('img').imgx();

    // Class Only
    $('.retina').imgx(); 

});

CSS

img {
    display: block;
    height: auto;
    max-width: 100%;
}

Slideout.js – A touch slideout navigation menu

Download Demo

Slideout.js is a touch slideout navigation menu for your mobile web apps.

Features:

• Dependecy-free.
• Simple markup.
• Native scrolling.
• Easy customization.
• CSS transforms & transitions.
• Just 4 Kb!