Recent news

Friday, 6 May 2016

Perspectiva jQuery Plugin to Create Perspectiva Or 3D effect




Perspectiva jQuery Plugin to Create Perspectiva Or 3D effect. This jQuery plugin we can use in asp.net, html, php etc.


How To Use

1. Add the below library reference

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../src/parallax.js"></script>
<script type="text/javascript" src="js/demo.js"></script>


2. Add the below code
$(function () {
        $('.parallax').perspectiva({
            layers: [{
                src: function (layer) {
                    // You can build any src for the image depending on the layer or viewport settings
                    return 'img/0_sun.png';
                },
                xSpeed: 0.1,
                ySpeed: 0.3,
                x: 0.2,
                y: 0.2,
                name: 'sun'
            }, {
                src: 'img/1_mountains.png',
                yAxis: false,
                xSpeed: 0.05,
                ySpeed: 0,
                x: 0,
                y: -0.3,
                name: 'mountains'
            }, {
                src: 'img/2_hill.png',
                xSpeed: 0.25,
                ySpeed: 0.2,
                x: 0,
                y: -0.4,
                name: 'hill'
            }, {
                src: 'img/3_wood.png',
                xSpeed: 0.2,
                ySpeed: 0.1,
                x: 0,
                y: -0.4,
                name: 'wood',
                scale: 0
            }]
        });

        // To destroy the parallax:
        $('.parallax').perspectiva('destroy');

        // To live update a layer in a parallax instance use the update method,
        // it receives the name of the layer to update, and the new attributes.
        $('.parallax').perspectiva('update', 'sun', { xSpeed: 0.7 });
    });


Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles