What is the best way to have the image smoothly slide from the left 0,0 position all the way to the far right side?

Question

What is the best way to have the image smoothly slide from the left 0,0 position all the way to the far right side?

I am working on a piece of code that involves moving an image across the screen. The current code I have is:

   <script type="text/javascript">
      var animate, left=0, imgObj=null;

function init(){

   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'absolute';
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';

   moveRight();
}

function moveRight(){
    left = parseInt(imgObj.style.left, 10);
    if (10 >= left) {
        imgObj.style.left = (left + 5) + 'px';
        imgObj.style.visibility='visible';

        animate = setTimeout(function(){moveRight();},20);

    } else {
        stop();
    }
}

function stop(){
   clearTimeout(animate);
}

window.onload = function() {init();};
   </script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" style="margin-left:170px;" />

The current functionality moves the image from the left side to the center of the screen. However, I would like it to start at the top left corner and move all the way to the right top border, continuously looping back. Unfortunately, changing the values to 0 only made the image static in its position.

I am also interested in adding more images to create a continuous sliding effect from left to right. How can I modify the code to achieve this?

javascript html css

Answer 1

Answer №1

Here's a suggestion for you:

<script>
    var animate, left=0, imgObj=null, right;

    function initialize(){

       imgObj = document.getElementById('myImage');
       imgObj.style.position= 'absolute';
       imgObj.style.top = 0;
       imgObj.style.left = 0;
       imgObj.style.visibility='visible';

       right = document.documentElement.clientWidth - imgObj.width;
       moveRight();

    }

    function moveRight(){
        if (left < right) {
            left += 5;
            imgObj.style.left = Math.min(left, right) + 'px';

            animate = setTimeout(moveRight,20); // call moveRight in 20msec
        }
    }

    window.onload = initialize;
</script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

Check out the DEMO here

Moving on to your second inquiry:

How can I incorporate more images to continuously slide from left to right?

To make it work with multiple images, tweak the code slightly as follows:

<script>
    var imgObjs=null;

    function initialize(){
       imgObjs = document.getElementsByTagName('img');
        for(var i = imgObjs.length; i--; ) {
           var imgObj = imgObjs[i];
           imgObj.style.position='absolute';
           imgObj.style.top = 0;
           imgObj.style.display='none';        
        }

       animateImages(0);
    }

    function animateImages(i) {
        var imgObj = imgObjs[i],
            right = document.documentElement.clientWidth - imgObj.width;

        left = imgObj.style.left = 0;
        imgObj.style.display='block';

        function moveRight(){
            if (left < right) {
                left += 5;
                imgObj.style.left = Math.min(left, right) + 'px';

                setTimeout(moveRight,20); // call moveRight in 20msec
            } else {
                imgObj.style.display='none';
                animateImages((i+1)%imgObjs.length);
            }
        }
        moveRight();
    }

    window.onload = initialize;
</script>
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

See the DEMO here

Answer 2

Here's a suggestion for you:

<script>
    var animate, left=0, imgObj=null, right;

    function initialize(){

       imgObj = document.getElementById('myImage');
       imgObj.style.position= 'absolute';
       imgObj.style.top = 0;
       imgObj.style.left = 0;
       imgObj.style.visibility='visible';

       right = document.documentElement.clientWidth - imgObj.width;
       moveRight();

    }

    function moveRight(){
        if (left < right) {
            left += 5;
            imgObj.style.left = Math.min(left, right) + 'px';

            animate = setTimeout(moveRight,20); // call moveRight in 20msec
        }
    }

    window.onload = initialize;
</script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

Check out the DEMO here

Moving on to your second inquiry:

How can I incorporate more images to continuously slide from left to right?

To make it work with multiple images, tweak the code slightly as follows:

<script>
    var imgObjs=null;

    function initialize(){
       imgObjs = document.getElementsByTagName('img');
        for(var i = imgObjs.length; i--; ) {
           var imgObj = imgObjs[i];
           imgObj.style.position='absolute';
           imgObj.style.top = 0;
           imgObj.style.display='none';        
        }

       animateImages(0);
    }

    function animateImages(i) {
        var imgObj = imgObjs[i],
            right = document.documentElement.clientWidth - imgObj.width;

        left = imgObj.style.left = 0;
        imgObj.style.display='block';

        function moveRight(){
            if (left < right) {
                left += 5;
                imgObj.style.left = Math.min(left, right) + 'px';

                setTimeout(moveRight,20); // call moveRight in 20msec
            } else {
                imgObj.style.display='none';
                animateImages((i+1)%imgObjs.length);
            }
        }
        moveRight();
    }

    window.onload = initialize;
</script>
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

See the DEMO here

Answer 3

Answer №2

Utilize a combination of javascript and css transition to achieve optimal results

<style>
    img {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;

        transition-property: left;
        transition-duration: 2s;
    }
</style>

<img src="pic.jpg">

<script>
    function animate() {
        var img = document.getElementsByTagName('img')[0];
        var img_width = 100;
        var window_width = window.innerWidth;
        img.style.left = window_width - img_width;
    }

    function init() {
        setTimeout(animate, 1000);
    }

    window.onload = init();
</script>

Answer 4

Utilize a combination of javascript and css transition to achieve optimal results

<style>
    img {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;

        transition-property: left;
        transition-duration: 2s;
    }
</style>

<img src="pic.jpg">

<script>
    function animate() {
        var img = document.getElementsByTagName('img')[0];
        var img_width = 100;
        var window_width = window.innerWidth;
        img.style.left = window_width - img_width;
    }

    function init() {
        setTimeout(animate, 1000);
    }

    window.onload = init();
</script>

What is the best way to have the image smoothly slide from the left 0,0 position all the way to the far right side?

Answer №1

Answer №2

Similar questions

Avoiding the interference of various elements positioned in a fixed manner

I'm having trouble understanding why I'm getting an error when trying to link CSS or SCSS

Output each element of an array in Vuejs2 with a line break between each

Display the MediaStream on a WebGLRenderer

Is there a way to align this text in the middle of the div vertically? The usual methods are not proving to be effective

Adding a contact form to a slider: A step-by-step guide

Excluding <select> elements with empty <option> values in jQuery SerializeArray: A simple guide

Finding a specific element within a Node.js application requires pinpointing and isolating

Unexpected behavior encountered when implementing specific Textfield validation with Material UI

Assess the AJAX Response within Puppeteer

What methods can I implement to prevent my boxes from becoming stretched out?

Converting to lower case with Jexl and making replacements in the text

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Design custom CSS for the buttons inside one specific jQuery dialog among many on the same page

Overlay popup within iframe doesn't appear at the forefront of the page

Netlify encountered an error with mixed content, indicating that the page was successfully loaded over HTTPS, but it attempted to request an insecure HTTP

"Encountering issues with $compile not functioning properly within a

jQuery function failing to produce the intended results

Please verify the utilization of jQuery.ajaxSettings.xhr

Expanding on the number of touchdowns can be achieved by using HTML and PHP to iterate through array elements