PERL & JQuery Product Animation


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

This was for a "Sport Landing Page" where people can select their outfits. There is intial intro box that gets cleared on the first selection. The thumbnails popout on hover. And there is a clear function that takes out all the products selected to just show the background image.


Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. #sportheader-top {
  3. background: transparent url([% tag('ig_cache_image_url') %][% image_dir %][% bg_images.get_random_element | html %]) no-repeat;
  4. height:633px;
  5. width:727px;
  6. }
  7. </style>
  8.  
  9. <script type="text/javascript">
  10.  
  11. $(function () {
  12. $('.more-bar a').click(function () {
  13. $(this.hash).slideToggle(1500);
  14. $(this).parent().toggleClass("active");
  15. return false;
  16. });
  17.  
  18. });
  19. $(function () {
  20. $('div.trigger').click(function () {
  21. $(this.parent).toggleClass("active");
  22. });
  23. });
  24. </script>
  25.  
  26. <script type="text/javascript">
  27. $(document).ready(function(){
  28.  
  29. $("div.trigger").toggle(function(){
  30. $(this).addClass("active");
  31. }, function () {
  32. $(this).removeClass("active");
  33. });
  34.  
  35. $("ul.thumb li").hover(function() {
  36. $(this).css({
  37. 'z-index': '10'
  38. });
  39. $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
  40. .animate({
  41. marginTop: '-45px',
  42. /* The next 4 lines will vertically align this image */
  43. marginLeft: '-45px',
  44. top: '40%',
  45. left: '40%',
  46. width: '75px',
  47. /* Set new width */
  48. height: '75px',
  49. /* Set new height */
  50. padding: '10px'
  51. }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
  52.  
  53. }, function() {
  54. $(this).css({
  55. 'z-index': '0'
  56. });
  57. $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
  58. .animate({
  59. marginTop: '0',
  60. /* Set alignment back to default */
  61. marginLeft: '0',
  62. top: '1%',
  63. left: '1%',
  64. width: '45px',
  65. /* Set width back to default */
  66. height: '45px',
  67. /* Set height back to default */
  68. padding: '0px'
  69. }, 400);
  70. });
  71.  
  72. $("ul.thumb li.head a").click(function() {
  73. apparel_init();
  74. $(".head_title").show();
  75. var mainHead = $(this).attr("href"); //Find Image Name
  76. var mainHeadTitle = $(this).attr("title"); //Find Product Title
  77. var mainHeadLink = $(this).attr("alt"); //Find Product Link
  78. _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainHeadTitle]);
  79. $(".head_title").html("<a class=sportprod href='"+mainHeadLink+"'>"+mainHeadTitle+"</a>");
  80. $("#main_head a").attr({ href:mainHeadLink });
  81. $("#main_head img").attr({
  82. src: mainHead
  83. });
  84. return false;
  85. });
  86. $("ul.thumb li.app a").click(function() {
  87. apparel_init();
  88. $(".app_title").show();
  89. var mainApp = $(this).attr("href"); //Find Image Name
  90. var mainAppTitle = $(this).attr("title"); //Find Product Title
  91. var mainAppLink = $(this).attr("alt"); //Find Product Link
  92. _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainAppTitle]);
  93. $(".app_title").html("<a class=sportprod href='"+mainAppLink+"'>"+mainAppTitle+"</a>");
  94. $("#main_app a").attr({ href:mainAppLink });
  95. $("#main_app img").attr({
  96. src: mainApp
  97. });
  98. return false;
  99. });
  100. $("ul.thumb li.pant a").click(function() {
  101. apparel_init();
  102. $(".pant_title").show();
  103. var mainPant = $(this).attr("href"); //Find Image Name
  104. var mainPantTitle = $(this).attr("title"); //Find Product Title
  105. var mainPantLink = $(this).attr("alt"); //Find Product Link
  106. _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainPantTitle]);
  107. $(".pant_title").html("<a class=sportprod href='"+mainPantLink+"'>"+mainPantTitle+"</a>");
  108. $("#main_pant a").attr({ href:mainPantLink });
  109. $("#main_pant img").attr({
  110. src: mainPant
  111. });
  112. return false;
  113. });
  114. $(".clearproducts").click(function() {
  115. _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Clear-Click']);
  116. $("#main_apparel").removeClass('lighten');
  117. $(".clearproducts").hide();
  118. $(".pant_title").hide();
  119. $(".app_title").hide();
  120. $(".head_title").hide();
  121. $("#main_head img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
  122. $("#main_app img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
  123. $("#main_pant img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
  124. });
  125.  
  126. function apparel_init() {
  127. $("#main_apparel").addClass('lighten');
  128. $(".clearproducts").show();
  129. $("#start-sport").hide();
  130. $("#left-wrap").show();
  131. $("#main_pant").show();
  132. }
  133.  
  134. var scrolling = null;
  135. var slideleft = $("#slidearea-left");
  136. var slideright = $("#slidearea-right");
  137.  
  138. $("#slidedown-left").hover(function scroll_down() {
  139. slideleft.animate({scrollTop: (slideleft.scrollTop() + slideleft.position().top)},600);
  140. scrolling = window.setTimeout(function() {
  141. scroll_down();
  142. }, 500);
  143. }, function() {
  144. window.clearTimeout(scrolling);
  145. });
  146.  
  147. $("#slideup-left").hover(function scroll_up() {
  148. slideleft.animate({scrollTop: (slideleft.scrollTop() - slideleft.position().top)},600);
  149.  
  150. scrolling = window.setTimeout(function() {
  151. scroll_up();
  152. }, 500);
  153. }, function() {
  154. window.clearTimeout(scrolling);
  155. });
  156.  
  157. $("#slidedown-right").hover(function scroll_down() {
  158. slideright.animate({scrollTop: (slideright.scrollTop() + slideright.position().top)},600);
  159. scrolling = window.setTimeout(function() {
  160. scroll_down();
  161. }, 500);
  162. }, function() {
  163. window.clearTimeout(scrolling);
  164. });
  165.  
  166. $("#slideup-right").hover(function scroll_up() {
  167. slideright.animate({scrollTop: (slideright.scrollTop() - slideright.position().top)},600);
  168.  
  169. scrolling = window.setTimeout(function() {
  170. scroll_up();
  171. }, 500);
  172. }, function() {
  173. window.clearTimeout(scrolling);
  174. });
  175. $("#spinner").hide();
  176. $("#thumb-holder").show();
  177. });
  178.  
  179. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.