Scrolling animation


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <ul id="homeExploreAni">
  2. <li><img src="/images/pic-home-explore-wellbeing.gif" alt="" /></li>
  3. <li><img src="/images/pic-home-explore-support.gif" alt="" /></li>
  4. <li><img src="/images/pic-home-explore-keep-learning.gif" alt="" /></li>
  5. </ul>
  6.  
  7. <script type="text/javascript">
  8.  
  9. $(document).ready(function () {
  10.  
  11. // set up home explore animation
  12. $("#homeExploreAni li:eq(0)").css("left", "-10px");
  13. $("#homeExploreAni li:eq(1)").css("left", "80px");
  14. $("#homeExploreAni li:eq(2)").css("left", "170px");
  15.  
  16. // moves ani left
  17. function manAniLoop() {
  18. $("#homeExploreAni li").animate({ left: "-=90px" }, 200, CheckPositionLeftAni());
  19. };
  20.  
  21. function CheckPositionLeftAni() {
  22. $("#homeExploreAni li").each(
  23. function () {
  24. if ($(this).css("left") == "-10px") {
  25. $(this).css("left", "260px");
  26. };
  27. if ($(this).css("left") == "170px") {
  28. FocusOnAni(this);
  29. };
  30. if ($(this).css("left") == "80px") {
  31. FocusOffAni(this);
  32. };
  33. });
  34. };
  35.  
  36. // increases text/image size on central item
  37. function FocusOnAni(item) {
  38. $(item).children("img").animate({ width: "90px", height: "90px", left: "0px", top: "0px" }, 100);
  39. }
  40.  
  41. // decreases text/image size on central item
  42. function FocusOffAni(item) {
  43. $(item).children("img").animate({ width: "40px", height: "40px", left: "25px", top: "25px" }, 100);
  44. }
  45.  
  46. });
  47.  
  48. </script>

URL: http://openbolton.co.uk/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.