WordPress.org

Support

Support » How-To and Troubleshooting » How can I add javascript like this…

How can I add javascript like this…

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • The topic ‘How can I add javascript like this…’ is closed to new replies.
Skip to toolbar