Step 1:
Add "ID" attribute to <body> tag and give name like this "backgroundAnimation".
<body id="backgroundAnimation">
<!-- Here is your body content -->
</body>
Step 2:
Create style for that ID 'backgroundAnimation' and add image background to it.
#backgroundAnimation {
margin: auto;
position: relative;
background:url(YourFolderPathFor/images/pinterest-animation-background.jpg) repeat center;
}
Step 3:
Write the javascript code to achieve like Pinterest background animation,
$(document).ready(function () {
var x = 0;
var y = 0;
//Creating reference to BackgroundAnimation block
var BackgroundAnimation = $("#backgroundAnimation");
// set initial background position to 0 and 0
BackgroundAnimation.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
// scrolling background position every 60 milliseconds
window.setInterval(function() {
BackgroundAnimation.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
// scroll the image vertically
y--; // scrolling up
//if you want to change scrolling background direction just uncomment the below line and comment the lines rest of the conditions
// y++; // scrolling down
// scroll the image horizontally -
// x--; //scrolling left
// x++; //scrolling right
}, 60);
})
0 comments:
Post a Comment