CODEWITHSUNDEEP
javascript
anon
anon

Reputation:

How to make a small image move from one side of the screen to the other with js or jquery?

I have a small animated plane which has the sign that says " Welcome to the site " and I want it to move in a loop from left screen to the right. Just come out, then disappear. Now, I know this can been done with JS, but I have no idea. Is it very hard to move one image in JS?

Upvotes: 3

Views: 40204

Answers (3)

himani bisht
himani bisht

Reputation: 3

Use marquee:

<marquee 
`scrollamount="10"`
 direction="left"
 behavior="scroll">
 Welcome to the site 
 <img src="images/plane.jpg" />
 </marquee>

Upvotes: -1

Andreas
Andreas

Reputation: 21911

With the help of .animate() you can animate almost anything

.animate( properties [, duration ] [, easing ] [, complete ] )

  • properties
    Type: PlainObject
    An object of CSS properties and values that the animation will move toward.

  • duration (default: 400)
    Type: Number or String
    A string or number determining how long the animation will run.

  • easing (default: swing)
    Type: String
    A string indicating which easing function to use for the transition.

  • complete
    Type: Function()
    A function to call once the animation is complete, called once per matched element.

For the loop we wrap the actual animation part into a named function and pass this as the complete callback. With that the animation will restart once it has finished.

$(function() {
    var img = $("#plane"),
        width = img.get(0).width,
        screenWidth = $(window).width(),
        duration = 5000;

    function animatePlane() {
        img.css("left", -width).animate({
            "left": screenWidth
        }, duration, animatePlane);
    }

    animatePlane();
});
body { overflow: hidden }
#plane { position: absolute; left: -1000px; width: 50% /* <- not relevant for the animation */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plane" src="https://cdn.pixabay.com/photo/2018/09/13/10/18/aircraft-3674305_640.png" />
<!-- source: https://pixabay.com/de/flugzeuge-propeller-aircraft-alt-3674305/ -->

Upvotes: 6

Ed Bayiates
Ed Bayiates

Reputation: 11230

You can animate anything. My code will animate a div (with an image, or any content you like) across the screen:

HTML:

<div id="animate">Sample</div>

CSS:

#animate {
    position: relative;
    border; 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

JavaScript/jQuery code:

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    // Animation complete.
  });
});

Working JSFiddle here.

You could put anything you wanted in the div. The only important part of the CSS is the "position: relative;" attribute. You could change "#animate" from an id to a class and cause several objects to animate across the screen. jQuery is very versatile.

If you wanted the animation to roll back from the right to the left again, change the code to:

$(document).ready(function(e) {
    var width = $(document).width();

    function goRight() {
        $("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        $("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});

Working jsFiddle for that here

To make the image roll right and disappear forever, do this:

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    $("#animate").css("display", "none");
  });
});

Working jsFiddle for that here

Upvotes: 2

Related Questions