Basic Verbs

Few days ago i was bored to death and decided to do something to pass time – write a jquery plugin. Didn’t have any idea what to do, so Cory said “Lets do something that will give life and movement to the designs without using flash”. I started on LiveScape – the live landscape.

The idea behind this plugin is to have somekind of landscape container that will contain objects moving inside of it e.g. sky with the clouds moving. The plugin is built simple, has simple implementation, it is very easy to use, yet very flexible. You only need the landscape image, the object images and one container.

Lets get technical: You have a div #livescape. This is how the plugin in used.

$('#livescape').livescape({

    height : '360px',  //height of the landscape (can be omitted)
    width : '1000px', //width of the landscape (can be omitted)
    background_image : 'img/bg.jpg', //background image (can be omitted)

    // Next define the objects that are moving:
    objects : [
        {
            //the positions are relative to the landscape
            //if omitted, random assumed - same for duration
            start_x : "1700px", //x of start position
            start_y : "190px", //y of start position
            end_x : "-4000px", //x of end position
            end_y : "190px", //y of end position
            image : 'img/car.png', //image of the object (url)
            duration : 18000, // duration of the animation
            loop : true, // the animation loops
            href : "ThisisBatCountry.png", //the object is anchor
            pause: 1000, //pause in between loops in ms
            fade : true //the objects fade in on start and out on end
        },
        //another object
        {
            start_x : "-250px",
            start_y : "5px",
            end_x : "1250px",
            end_y : "5px",
            duration : 49000,
            image : 'img/cloud1.png',
            loop : true,
            fade : true
        }
    ]
})

This is setup is for 2 objects. The implementation is pretty intuitive and i think you will get a hold of it very fast.

The plugin is still beta. Needs refactoring. Time of development was around 30 min. Nevertheless you will have access to an early access version.

Anyway [DOWNLOAD] the plugin and enjoy the “Fear and Loathing in Las Vegas” example:

Portfolio Press by Blog Oh! Blog