Rollerblade.js – Create 360° Interactive Images

When the flat trend emerged some time ago, almost everyone welcomed it with open arms and it was a matter of time most designers started adopting in their new design projects.

But there was a concern regarding the way everything looks as there was not depth on the web pages and this raised the concern of user perception.

Designers had to figure out a way to make the web pages more interactive so the users are involved in the web experience. Probably, this particular concern was the reason for the appearance of the parallax experience and CSS animations of the content.

Zurb also are concerned about the flattening the web: “….the flattening of the web has had its drawbacks.

Minimizing most gradients, shadows and skeuomorphic elements has left a void in the design world for content differentiation. Motion helps us bring that back.” So now designers and developers are working hard to find new ideas to fill the void in the design world and figure out ways for content differentiation.

rollerblade-js

Rollerblade.js is one of the new and great solution for creating 360° interactive images  that can easily be applied to product web sites and give the visitors a depth and real time interactive experience of products, image and whatever you can think of.

Related post:  Design is one - Lella & Massimo Vignelli

How to setup?

First, include rollerblade.css at the top of your page with your CSS. Or, since the contents of that file are so small, simply copy and paste the rollerblade.css contents into your main CSS file.
Next: Rollerblade targets a container element with an image element inside that has the class of “rollerblade-img”. Make the src of the image the path to the first image in your rotator.

                        
<div id="target">
    <img src="path/to/first/image.jpg">
</div>
                        

Initiate it

Make sure jQuery is included in your page, and then, inside of a document ready function, select the container element that we specified in the setup and call the rollerblade method. At the very minimum, you have to pass in an array of image urls as a property of the options object. The property must be called ‘imageArray’.
Thats it! You will now have a working rollerblade rotator.

Just style and position your element to your liking!
Rollerblade.js allows you to create as many rotators on one page as you would like. Just create new elements from our setup step, create a new array of images in your javascript, and call the rollerblade method on another object. Simple!

                        
    // You can specify an array of images 
    // outside of the rollerblade method,
    // and then pass it in, as so:

    var arrayOfImages = [
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ];

    $("#target").rollerblade({imageArray:arrayOfImages});

    // OR you can create the array directly in the 
    // options object, as so:

    $("#target").rollerblade({imageArray:[
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ]});
                        

Options

You can add more settings to the options object!
sensitivity : This is an integer value that determines how sensitive the rotator is to the user’s mouse movement.
drag : This is a boolean value that determines if the rollerblade rotator activates during a drag. The default is true. When set to false, the rollerblade rotator will rotate automatically with any horizontal mouse movement.
auto : Determines if rotator should spin by itself. Default is set to false. If set to true, rotator will spin and user interaction will be disabled.

Related post:  Redesigning Your Website? 5 Crucial Questions to Ask Yourself Before Kicking off
                        

    // Defaults.
    $("#target").rollerblade({
        imageArray: [yourArray],
        sensitivity: 35,
        drag: true,
        auto: false
    });

                        

Additional Info

Rollerblade.js works on desktops, tablets, and smartphones (touch enabled). For all mobile devices, the rollerblade rotator will be activated when a user slides their finger from left to right.

Image preloading is used to cache the images from your array to make sure the rotator performs as fast as possible.

Rollerblade.js works well in IE9+.

 Live Demo  Download


Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close