Make images float on any website with Javascript code!


JavaScript

Want to impress someone with your coding skills?

1. Open any website which has some pictures.
2. Simply copy and paste this piece of code on Developer Console in Chrome (Menu > More Tools > Javascript Console) or Web Console in Firefox  (Menu > Developer > Web Console) and hit Enter!


  1. javascript: initialFlow = 0;
  2. img1 = .1;
  3. img1 = .05;
  4. img2 = .25;
  5. img2 = .24;
  6. img3 = 1.6;
  7. img3 = .24;
  8. img4 = 300;
  9. img4 = 200;
  10. img5 = 300;
  11. img5 = 200;
  12. imgCollection = document.getElementsByTagName("img");
  13. imgLength = imgCollection.length;
  14.  
  15. function startFlow() {
  16. for (i = 0; i - imgLength; i++) {
  17. inFlow = imgCollection[i].style;
  18. inFlow.position = 'absolute';
  19. inFlow.left = (Math.sin(initialFlow * img1 + i * img2 + img3) * img4 + img5) + "px";
  20. inFlow.top = (Math.cos(initialFlow * img1 + i * img2 + img3) * img4 + img5) + "px"
  21. }
  22. initialFlow++
  23. }
  24. setInterval('startFlow()', 5);
  25. void(0);
Now you should see all the pictures floating around making circular loops, isn't that fun?

Comments

Popular posts from this blog

Blogger or WordPress: Which is a better blogging platform in 2016?

70 Free Ways To Increase Instagram Followers And Likes