script.non-min.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. $(document).ready(function(){
  2. var $window = $(window);
  3. /*-----------------------------------------------------------------------------------*/
  4. /* Parallax Effect
  5. /*-----------------------------------------------------------------------------------*/
  6. $('section[data-type="background"]').each(function(){
  7. var $bgobj = $(this); // assigning the object
  8. $(window).scroll(function() {
  9. var yPos = -($window.scrollTop() / $bgobj.data('speed'));
  10. // Put together our final background position
  11. var coords = '50% '+ yPos + 'px';
  12. // Move the background
  13. $bgobj.css({ backgroundPosition: coords });
  14. });
  15. });
  16. /*-----------------------------------------------------------------------------------*/
  17. /* Header Responsive Images & Content
  18. /*-----------------------------------------------------------------------------------*/
  19. /* middleText(); */
  20. function middleText()
  21. {
  22. $('.hero-container').css({
  23. position:'absolute'
  24. });
  25. $('.hero-container').css({
  26. left: ($(window).width() - $('.hero-container').outerWidth())/2,
  27. top: ($(window).height() - $('.hero-container').outerHeight())/2,
  28. });
  29. }
  30. /* On Resize show menu on desktop if hidden */
  31. jQuery(window).resize(function() {
  32. /* middleText(); */
  33. });
  34. /*-----------------------------------------------------------------------------------*/
  35. /* Navigation
  36. /*-----------------------------------------------------------------------------------*/
  37. var animate='down';
  38. jQuery(window).bind('scroll', function () {
  39. /* Animation for Top Navigation */
  40. var scrollTop = jQuery(window).scrollTop();
  41. if (scrollTop > jQuery('#portfolio').offset().top-60 && animate == 'down') {
  42. animate='up';
  43. jQuery('#nav-bar').stop().animate({top:'0'}, 300);
  44. } else if(scrollTop < jQuery('#portfolio').offset().top-60 && animate == 'up'){
  45. animate='down';
  46. jQuery('#nav-bar').stop().animate({top:'-75px'}, 300);
  47. }
  48. /* Update Section on Top-Bar */
  49. jQuery('section').each(function(){
  50. if (scrollTop > jQuery(this).offset().top-60){
  51. var section = jQuery(this).attr('id');
  52. $("#top-navigation ul li").each(function(){
  53. if(section == jQuery(this).find('a').attr('href').replace("#","") && jQuery(this).not('.active')){
  54. $("#top-navigation ul li").removeClass('active');
  55. jQuery(this).addClass('active');
  56. }
  57. });
  58. }
  59. });
  60. });
  61. /*-----------------------------------------------------------------------------------*/
  62. /* Features
  63. /*-----------------------------------------------------------------------------------*/
  64. $('.feature-1').waypoint(function(){
  65. $('.feature-1 .feature-img').addClass('animate');
  66. $('.feature-1 .feature-content').addClass('animate');
  67. }, {
  68. triggerOnce: true,
  69. offset: function(){
  70. return $(window).height() - $(this).outerHeight() + 200;
  71. }
  72. });
  73. $('.feature-2').waypoint(function(){
  74. $('.feature-2 .feature-img').addClass('animate');
  75. $('.feature-2 .feature-content').addClass('animate');
  76. }, {
  77. triggerOnce: true,
  78. offset: function(){
  79. return $(window).height() - $(this).outerHeight() + 200;
  80. }
  81. });
  82. /*-----------------------------------------------------------------------------------*/
  83. /* Navmaster
  84. /*-----------------------------------------------------------------------------------*/
  85. $('.heronav').onePageNav({
  86. filter: ':not(.external)',
  87. scrollOffset: 80
  88. });
  89. $('#fixed-top-navigation').onePageNav({
  90. filter: ':not(.external)',
  91. scrollOffset: 80
  92. });
  93. $('.showcase a[href*=#]:not([href=#])').click( function() {
  94. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  95. var target = $(this.hash);
  96. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  97. if (target.length) {
  98. $('html,body').animate({
  99. scrollTop: target.offset().top
  100. }, 800);
  101. return false;
  102. }
  103. }
  104. });
  105. /* $('#mobile-menu').onePageNav({
  106. filter: ':not(.external)',
  107. scrollOffset: 80
  108. }); */
  109. /*-----------------------------------------------------------------------------------*/
  110. /* Isotope
  111. /*-----------------------------------------------------------------------------------*/
  112. // cache container
  113. var $container = $('#filter-items');
  114. // initialize isotope after image loaded
  115. $container.imagesLoaded( function(){
  116. $container.isotope({
  117. // options...
  118. });
  119. // filter items when filter link is clicked
  120. $('#filters a').click(function(){
  121. var selector = $(this).attr('data-filter');
  122. $container.isotope({ filter: selector });
  123. $('#filters a').removeClass('active');
  124. $(this).addClass('active');
  125. return false;
  126. });
  127. // filter on smaller screens
  128. $("#e1").change(function(){
  129. var selector = $(this).find(":selected").val();
  130. $container.isotope({ filter: selector });
  131. return false;
  132. });
  133. });
  134. /*-----------------------------------------------------------------------------------*/
  135. /* Handle Isotope Images 100%
  136. /*-----------------------------------------------------------------------------------*/
  137. function handleIsotopeStretch() {
  138. var width = $(window).width();
  139. if ( width < 768 ) {
  140. $('#filter-items .item').addClass('width-100');
  141. }
  142. else {
  143. $('#filter-items .item').removeClass('width-100');
  144. }
  145. }
  146. handleIsotopeStretch();
  147. /* On Resize show menu on desktop if hidden */
  148. jQuery(window).resize(function() {
  149. handleIsotopeStretch();
  150. });
  151. /*-----------------------------------------------------------------------------------*/
  152. /* Handle Colorbox
  153. /*-----------------------------------------------------------------------------------*/
  154. function handleColorbox() {
  155. $('.colorbox-button').colorbox({rel:'colorbox-button',maxWidth:'95%', maxHeight:'95%'});
  156. /* Colorbox resize function */
  157. var resizeTimer;
  158. function resizeColorBox()
  159. {
  160. if (resizeTimer) clearTimeout(resizeTimer);
  161. resizeTimer = setTimeout(function() {
  162. var myWidth = 442, percentageWidth = .95;
  163. if (jQuery('#cboxOverlay').is(':visible')) {
  164. $.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
  165. $('.cboxPhoto').css( {
  166. width: $('#cboxLoadedContent').innerWidth(),
  167. height: 'auto'
  168. });
  169. $('#cboxLoadedContent').height( $('.cboxPhoto').height() );
  170. $.colorbox.resize();
  171. }
  172. }, 300)
  173. }
  174. // Resize Colorbox when resizing window or changing mobile device orientation
  175. jQuery(window).resize(resizeColorBox);
  176. window.addEventListener("orientationchange", resizeColorBox, false);
  177. }
  178. //call colorbox
  179. handleColorbox();
  180. /*-----------------------------------------------------------------------------------*/
  181. /* Animate
  182. /*-----------------------------------------------------------------------------------*/
  183. $('.projects').click(function(){
  184. var id = $(this).attr('data-slide');
  185. $('#project-slide-'+id).addClass('animated fadeInUpBig').show();
  186. return false;
  187. });
  188. /*-----------------------------------------------------------------------------------*/
  189. /* Mobile Menu
  190. /*-----------------------------------------------------------------------------------*/
  191. //Handle sidebar collapse on user interaction
  192. $('.sidebar-collapse > i').click(function () {
  193. $('#mobile-menu').slideToggle(200, 'linear').toggleClass('collapse');
  194. });
  195. });