Animated custom navigation


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



Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2.  
  3. // explore nav animation
  4. $(document).ready(function () {
  5.  
  6. // set up explore nav animation
  7. $("#aniExplore li:eq(0)").css("left", "0px");
  8. $("#aniExplore li:eq(1)").css("left", "200px");
  9. $("#aniExplore li:eq(2)").css("left", "400px");
  10. $("#aniExplore li:eq(3)").css("left", "600px");
  11. $("#aniExplore li:eq(4)").css("left", "800px");
  12. $("#aniExplore li:eq(5)").css("left", "1000px");
  13. $("#aniExplore li:eq(6)").css("left", "1200px");
  14. $("#aniExplore li:eq(7)").css("left", "1400px");
  15. $("#aniExplore li:eq(8)").css("left", "1600px");
  16. $("#aniExplore li:eq(9)").css("left", "1800px");
  17.  
  18. // moves nav left
  19. $("#navExploreLeftButton").click(function () {
  20. if ($("#aniExplore li").is(':animated')) {
  21. return false;
  22. }
  23. $("#aniExplore li").animate({ left: "-=200px" }, 200, CheckPositionLeft());
  24. });
  25.  
  26. function CheckPositionLeft() {
  27. $("#aniExplore li").each(
  28. function () {
  29. if ($(this).css("left") == "-200px") {
  30. $(this).css("left", "1800px");
  31. };
  32. if ($(this).css("left") == "600px") {
  33. FocusOn(this);
  34. };
  35. if ($(this).css("left") == "400px") {
  36. FocusOff(this);
  37. };
  38. }
  39. );
  40. };
  41.  
  42. // moves nav right
  43. $("#navExploreRightButton").click(function () {
  44. if ($("#aniExplore li").is(':animated')) {
  45. return false;
  46. }
  47. $("#aniExplore li").animate({ left: "+=200px" }, 200, CheckPositionRight());
  48. });
  49.  
  50. function CheckPositionRight() {
  51. $("#aniExplore li").each(
  52. function () {
  53. if ($(this).css("left") == "1800px") {
  54. $(this).css("left", "-200px");
  55. };
  56. if ($(this).css("left") == "200px") {
  57. FocusOn(this);
  58. };
  59. if ($(this).css("left") == "400px") {
  60. FocusOff(this);
  61. };
  62. }
  63. );
  64. };
  65.  
  66. // increases text/image size on central item
  67. function FocusOn(item) {
  68. $(item).children("a").children("img").animate({ width: "125px", height: "125px", left: "37px", top: "0px" }, 100);
  69. $(item).children("a").children("span").animate({ fontSize: "12px" }, 200);
  70. }
  71.  
  72. // decreases text/image size on central item
  73. function FocusOff(item) {
  74. $(item).children("a").children("img").animate({ width: "90px", height: "90px", left: "55px", top: "35px" }, 100);
  75. $(item).children("a").children("span").animate({ fontSize: "9px" }, 200);
  76. }
  77.  
  78. });
  79.  
  80. </script>
  81.  
  82. <div id="navExplore">
  83. <ul id="aniExplore">
  84. <li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li>
  85. <li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li>
  86. <li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li>
  87. <li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li>
  88. <li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li>
  89. <li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li>
  90. </ul>
  91.  
  92. <ul id="navExploreButtons">
  93. <li id="navExploreLeftButton"><</li>
  94. <li id="navExploreRightButton">></li>
  95. </ul>
  96. </div>

URL: http://openbolton.co.uk/explore-your-life/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.