Fluid/Continuous image scroll for the Background
Question
I have successfully created a full background image scrolling effect using a single image. The code I used to achieve this is like so:
<html>
<head>
<title>BackGround Slide</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
// speed in milliseconds
var scrollSpeed = 70;
// set the default position
var current = 0;
// set the direction
var direction = 'h';
function bgscroll() {
// 1 pixel row at a time
current -= 1;
// move the background with backgrond-position css properties
$('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");
}
//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);
</script>
<style type="text/css">
body {
background-image: url('http://i.imgur.com/yhBqRw6.jpg');
}
</style>
</head>
<body>
</body>
</html>
This works as expected. However, there is a clear demarcation between the beginning and the end of the image. Is there a way to say, achieve a continuous effect wherein the image's beginning and end isn't so obvious. I mean, can this be achieved using CSS/JS or do I need to edit/modify the image itself?
This is what the current output looks like:
Thank you
3 answers
solution1
0 2014-07-07 07:58:30
CSS & JS do not do such things.
You might be able to find a jQuery plugin or such, in a short search I haven't found one.
Editing the image should be the way to go.
solution2
0 2014-07-07 08:04:18
You would need to modify the image. Here is a tutorial to make a Tiled Background image using photoshop:
http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/
solution3
0 2014-07-07 08:04:56
For this you need to use symmetric background please check with below background:
CSS :
body {
background-image: url('http://i.stack.imgur.com/C11AY.png');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.