How to Make an Image Randomly Move Around Page?

Discussion in 'HTML & Website Design' started by Mkcoy, Apr 27, 2015.

  1. #1
    Hello, how can I make an image (or 2 or maybe 3 images) randomly move around the page?

    I done some searching online and found this but don't know how to implement it.

    It has a JS Fiddle that is pretty much exactly how I want it to act (but instead of coloured blocks I want to use some small image).

    How can I implement it into my site?

    This is a much better example and works perfectly except I'd like to have maybe 2 images instead.

    Thanks.
     
    Mkcoy, Apr 27, 2015 IP
  2. lbaker

    lbaker Well-Known Member

    Messages:
    81
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    123
    #2
    Hi

    You can change the example by altering the CSS to

        img.a {
           width: 50px;
           height:50px;
           position:fixed;
         }
         img.b {
           width: 50px;
           height:50px;
           position:fixed;
         }
         img.c {
           width: 50px;
           height:50px;
           position:fixed;
         }
    Code (CSS):

    and then changing the html to

      <div id="container">
         <img class='a' src="cats/1.png" />
         <img class='b' src="cats/2.png" />
         <img class='c' src="cats/3.png" />
       </div>
    HTML:
    I added an example here: http://www.lance.name/move_images.html

    Thanks. Kind regards,
    Lance.
     
    Last edited: Apr 28, 2015
    lbaker, Apr 28, 2015 IP
    qwikad.com and Nitin.Mail like this.