I have css detailing what I want the picture to do (I want it to basically fall down when it gets created)

.pimg{
            width: 100px;
            height: 100px;
            position: absolute;
            animation-name: fall;
            animation-duration: 4s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
        }
        @keyframes fall {
            0%   {top:0px; transform: rotate(0deg)}
            100% {top:800px; transform: rotate(360deg)}
        }

I also have javascript/jquery that creates the image

function PIMG()
{
    var img = $('<img id="img">');
    img.attr('src', "Doggos/puppy.png");
    img.attr('class', 'pimg');
    img.appendTo('#PIC');
}

I was wondering how I could make it so it takes all of the x value points inside of the div and then spawn the picture randomly inside that div along that value? If possible I'd love for it to be in css but I don't know if that's even possible.

Reworded: Right now my image just gets created in the same spot. I was wondering how to make it in a random spot along the left-right axis but still be inside a specific div.

Thank you.

2 Answers

0
ChimaJ On Best Solutions

To move it randomly along the x-axis inside the div elememt, you can be ramdomly changing the margin. just add this line to your PIMG function

img.css("margin-left", Math.random() * 100 + "%");

so your function should now look like this:

function PIMG()
{
  var img = $('<img id="img">');
  img.attr('src', "Doggos/puppy.png");
  img.attr('class', 'pimg');
  img.appendTo('#PIC');
  img.css("margin-left", Math.random() * 100 + "%");
}
0
Yousof K. On

JS Fiddle demo: https://jsfiddle.net/a7rk9vx4/1/

The Idea is to randomly set the left css property of the img to a random number between 0 to the box's width.