I am currently using backstretch on my website and attempting to create a continuous loop of the moving image by automatically shifting it from left to right and back. However, I am facing difficulties as the background only moves in one direction. I am seeking guidance on how to reset or move back the image seamlessly.
How can I achieve this reset/move back effect for the image?
To view the backstretch.js code, click here.
A snippet of additional JavaScript is included below for the moving effect and initialization:
var images = ['fileadmin/template/gfx/background02-03.jpg'];
jQuery.backstretch( images[Math.floor(Math.random() * images.length)] );
jQuery(function($){
(function swoop(element) {
element
.animate({'margin-left':'-=5px'}, 100, function(){
setTimeout(function(){
swoop(element);
}, 0);
});
})($('#backstretch img'));
});
The HTML output resulting from the above code is displayed as follows:
<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow: hidden; z-index: -999999; margin: 0px; padding: 0px; height: 100%; width: 100%;"><img src="fileadmin/template/gfx/background02-03.jpg" style="position: absolute; margin: 0px 0px 0px -3404.98890491151px; padding: 0px; border: none; z-index: -999999; width: 3006px; height: 835px; left: -551.5px; top: 0px;"></div>
Apologies for the formatting of the HTML code, bear with me as I'm not familiar with its proper handling...
UPDATE:
Thank you for the assistance provided so far, although I believe it's not exactly what I require.
My current understanding suggests that I need a calculation involving the image width and margin-left values to facilitate switching between left and right movements effectively. Thus, attempts were made to calculate the width of the image, but they returned NULL or disrupted the entire JavaScript operation.
It crossed my mind to develop a secondary function named backswoop responsible for tracking the margin-left incrementally, followed by implementing a condition based on margin-left and image-width comparisons.
iWidth = jQuery('#backstretch img').width();
jQuery(function($){
(function swoop(element) {
element.animate({'margin-left':'-=5px'}, 50, function(){
setTimeout(function(){
if(element.css('margin-left')*-1 <= iWidth){
swoop(element);
}else{
backswoop(element);
}
}, 0);
});
})($('#backstretch img'));
(function backswoop(element) {
element.animate({'margin-left':'+=5px'}, 50, function(){
setTimeout(function(){
if(element.css('margin-left') >= 0){
swoop(element);
}else{
backswoop(element);
}
}, 0);
});
})($('#backstretch img'));
});
Unfortunately, due to my limited knowledge in javascript, the script does not yield the desired results :-(