0

So I have used javascript to randomly alter the position of the divs on a website I am trying to make (cards on a wordpress theme).

I was hoping to add random scroll speeds to each of these cards, so they all move at slightly different speeds (using a similar code to the one I have used for random position.

I have been struggling to find jquery examples that I can successfully put into my code.

Here is an outline of my code so far:

HTML:

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

<div class="card">
<img src="https://www.naturschaetze-suedwestfalens.de/var/sauerland/storage/images/media/bilder/naturschaetze/buchfotos/05_p3_laubfrosch-mbd/507661-1-ger-DE/05_P3_Laubfrosch-MBD_front_large.jpg">
</div>

CSS:

.card {
position: relative;
}

JQUERY:

//random position of each Card

$(document).ready(function(){
$('.card').each(function() {
$(this).css({'left' : (Math.random() * 120) - 20 + '%'})
$(this).css({'top' : (Math.random() * 200) - 50})

});
});

If someone could point me in the right direction, would be amazing !

Thanks

joehigh1
  • 193
  • 12
  • Hey, have you seen this post : https://stackoverflow.com/questions/50589137/scrollto-speed-duration-setting you can call the scrollTo function provided with a random number for the duration – Axel Moriceau Sep 06 '20 at 22:25
  • Hey Axel, I wasn't looking for them to animate, but to just move at different speeds as the user is scrolling? – joehigh1 Sep 08 '20 at 15:03
  • 1
    then you should look at parallax effects or learn about the perspective attribute in css, i think this might help you achieve this effect, also check [this pen](https://codepen.io/JTParrett/pen/BkDie) you could adapt it on any element you want – Axel Moriceau Sep 08 '20 at 15:23

0 Answers0