WordPress.org

Forums

How can I add javascript like this... (2 posts)

  1. italianbull38
    Member
    Posted 4 years ago #

    http://youlove.us/

    The background moves. Where would I go to implement this.

  2. ambrosite
    Member
    Posted 4 years ago #

    It's a rather simple effect, actually. They are continuously scrolling the body background image by setting a timeout and having the scrollbackground function call itself over and over. Here is the basic code (this is using jQuery):

    jQuery(document).ready(function($) {
    	var backgroundheight = 4000;
     	var offset = 0;
    
    	function scrollbackground() {
    		// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
       		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    		// apply the background position
       		$('body').css("background-position", "50% " + offset + "px");
       		// call self to continue animation
       		setTimeout(function() {
    			scrollbackground();
    			}, 1
    		);
       	}
    
    	// Start the animation
    	scrollbackground();
    });

    The hardest part of building an effect like this is creating the images. The top and bottom edges of the background image merge seamlessly when the image is tiled, so you never see any break in the animation. It also has a semi-transparent PNG layered on top of it to create the logo and the image of the laptop. The whole thing is quite artistic, really. You need to be skilled with an image editing program if you want to create something like this.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.