https://stanographer.com/js/main.js

1/*
2 * Project:        NOISE - HTML5 Template
3 * Version:        1.0
4 * Author:         Neon Unicorns
5 * Author ulr:     https://themeforest.net/user/neonunicorns
6 */
7
8(function($) {
9
10  'use strict';
11
12  /* -----------------------
13   * Predefined Variables
14   * --------------------- */
15  var $window   = $(window),
16      $document = $(document),
17      $body     = $('body'),
18      $html     = $('html, body');
19
20  // Variables
21  var siteLoad = false;
22
23  // Animation easing
24  // ease-in-out-quart http://cubic-bezier.com/#.77,0,.17,1
25  var animEasing = 'cubic-bezier(0.77, 0, 0.175, 1)';
26
27  // Sections
28  var $sectionHome      = $('.section-home'),
29      $sectionAbout     = $('.section-about'),
30      $sectionServices  = $('.section-skills'),
31      $sectionPortfolio = $('.section-portfolio'),
32      $sectionContact   = $('.section-contact');
33
34  var $onLoadTrigger = $('<div/>', {
35    'class': '$onLoadTrigger',
36    css: { 'display': 'none' },
37  });
38
39  /* -----------------------------
40   * Preloader
41   * ---------------------------*/
42  // makes sure the whole site is loaded
43  // and add native js event listener for window
44  window.addEventListener('load', function() {
45    var $preloader = $('.preloader-container');
46    var $loader = $preloader.find('.loader');
47    $loader.addClass('loader-anim-start');
48    window.setTimeout(function() {
49      $loader.addClass('loader-anim-end');
50    }, 400);
51    window.setTimeout(function() {
52      $preloader.addClass('preloader-container-left');
53    }, 600);
54    window.setTimeout(function() {
55      $preloader.hide();
56      $body.addClass('loaded');
57      siteLoad = true;
58      $onLoadTrigger.trigger('click');
59    }, 800);
60  }, false);
61
62
63  /* -----------------------
64   * Functions
65   * --------------------- */
66  // Helper functions
67  var maxH = function() {
68    var allH = [];
69    allH.push($sectionHome.height());
70    allH.push($sectionAbout.height());
71    allH.push($sectionServices.height());
72    allH.push($sectionPortfolio.height());
73    allH.push($sectionContact.height());
74    return Math.max.apply(Math, allH);
75  };
76  var maxW = function() {
77    var allW = [];
78    allW.push($sectionHome.width());
79    allW.push($sectionAbout.width());
80    allW.push($sectionServices.width());
81    allW.push($sectionPortfolio.width());
82    allW.push($sectionContact.width());
83    return Math.max.apply(Math, allW);
84  };
85
86  /* Portfolio filtering function */
87  var portfolioFilteringMasonry = function() {
88    // Caching selectors
89    var $portfolioContainer = $('.portfolio-grid'),
90        $portfolioItems     = $portfolioContainer.find('.grid-item'),
91        $portfolioFilters   = $('.portfolio-filters ul'),
92        $portfolioFilter    = $portfolioFilters.find('li.portfolio-filter');
93    // Initialize masonry plugin
94    var mas = $portfolioContainer.masonry({
95      itemSelector: '.grid-item',
96      columnWidth: 285,
97      gutter: 5,
98      fitWidth: true,
99      transitionDuration: '1s',
100    });
101    // Bind event listener
102    $portfolioFilters.on('click', 'li.portfolio-filter', function() {
103      $portfolioFilter.removeClass('active');
104      $(this).addClass('active');
105      filter($portfolioItems, $(this).data('filter'));
106    });
107
108    // Portfolio filtering
109    function filter(items, filter) {
110      items = items || '*';
111      var matches = [];
112      var hiddenMatched = [];
113      var visibleUnmatched = [];
114      if (filter !== 'all') {
115        // test each item
116        for (var i = 0; i < items.length; i++) {
117          var item = items[i];
118          var isMatched = $(item).data('category') === filter;
119          // add to matches if its a match
120          if (isMatched) {
121            matches.push(item);
122          }
123          // add to additional group if item needs to be hidden or revealed
124          if (isMatched && $(item).is(':hidden')) {
125            hiddenMatched.push(item);
126          } else if (!isMatched && !$(item).is(':hidden')) {
127            visibleUnmatched.push(item);
128          }
129        }
130      } else {
131        for (var i = 0; i < items.length; i++) {
132          hiddenMatched.push(items[i]);
133        }
134      }
135      $(visibleUnmatched).hide();
136      $(hiddenMatched).show();
137      mas.masonry('layout');
138    }
139  };
140  portfolioFilteringMasonry();
141
142  // Prepare page for animation
143  var prepareAnimation = function() {
144    // Find all elements to animate
145    var $slideAnim  = $('.slide-anim'),
146        $fadeInAnim = $('.fadeIn-anim');
147    // Hide all elements
148    $slideAnim.css('opacity', 0);
149    $fadeInAnim.css('opacity', 0);
150
151    $slideAnim.each(function() {
152      var $this             = $(this),
153          animationDelay    = $this.data('anim-delay') || 1,
154          animationDuration = $this.data('anim-duration') || 500;
155      // Wrap in container

156      var animContainer = $('<div/>', {
157        'class': 'anim-container',
158      });
159      $this.wrap(animContainer);
160      // Calculate delay
161      var delay = (animationDuration / 1000) + (animationDelay / 10);
162      // Prepare transition
163      var transitions =
164            'right ' + animationDuration / 1000 + 's ' + animEasing + ' ' + animationDelay / 10 + 's, ' +
165            'left ' + animationDuration / 1000 + 's ' + animEasing + ' ' + delay + 's';
166      // Create mask
167      var animMask = $('<div/>', {
168        'class': 'anim-mask',
169        css: {
170          'transition': transitions,
171        },
172      });
173      $this.css('transition', 'opacity 0s linear ' + delay + 's');
174      // Insert mask
175      animMask.insertAfter($this);
176    });
177  };
178  prepareAnimation();
179
180  var animateSection = function(index) {
181    var $section = $('.section-' + index);
182    if (!$section.hasClass('animated')) {
183      // Slide animation
184      var $slideAnim = $section.find('.slide-anim');
185      $slideAnim.each(function() {
186        var $this = $(this);
187        $this.parent('.anim-container').addClass('animm');
188      });
189      // FadeInLeft animation
190      var $fadeInAnim = $section.find('.fadeIn-anim');
191      $fadeInAnim.each(function() {
192        var $this = $(this);
193        var animationDelay = $this.data('anim-delay') || 1;
194        var animationDuration = $this.data('anim-duration') || 500;
195        var transitions = 'all .5s ease, ' +
196          'transform ' + animationDuration / 500 + 's ' + animEasing + ' ' + animationDelay / 10 + 's, ' +
197          'opacity ' + animationDuration / 500 + 's ' + animEasing + ' ' + animationDelay / 10 + 's';
198        $this.css({
199          'transition': transitions,
200          'opacity': 1,
201        });
202      });
203      $section.addClass('animated');
204    } else {
205      return false;
206    }
207  };
208
209  /* -----------------------
210   * Fullpage.js
211   * --------------------- */
212  $('#main').fullpage({
213    anchors: ['home', 'about', 'skills', 'portfolio', 'contact'],
214    responsiveWidth: maxW(),
215    responsiveHeight: maxH(),
216    navigation: true,
217    afterLoad: function(anchorLink, index) {
218      if (!siteLoad) {
219        $onLoadTrigger.on('click', function() {
220          animateSection(index);
221        });
222      } else {
223        animateSection(index);
224      }
225    },
226  });
227
228  /* ---------------------------------------------
229   Portfolio gallery
230   --------------------------------------------- */
231  var $portfolioContainer = $('.portfolio-grid');
232  $portfolioContainer.magnificPopup({
233    delegate: 'a',
234    type: 'inline',
235    removalDelay: 100,
236    closeBtnInside: true,
237    showCloseBtn: true,
238    mainClass: 'mfp-img-mobile',
239    gallery: {
240      enabled: true,
241      navigateByImgClick: true,
242      preload: [0, 1],
243    },
244    callbacks: {
245      beforeOpen: function() {
246        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
247        this.st.mainClass = 'mfp-zoom-in';
248      },
249      open: function() {
250        // disable fullpage.js scrolling
251        $.fn.fullpage.setAllowScrolling(false);
252      },
253      close: function() {
254        // enable fullpage.js scrolling
255        $.fn.fullpage.setAllowScrolling(true);
256      },
257    },
258  });
259
260  /* ---------------------------------------------
261   Menu
262   --------------------------------------------- */
263  // Caching selectors
264  var $menu           = $('.menu'),
265      $showMenuButton = $('.show-menu-button'),
266      $menuMask       = $('.menu-mask'),
267      $fpNav          = $('#fp-nav');
268
269  // Variables
270  var menuAnimTime = 400;
271
272  // Show menu function
273  var showMenu = function() {
274    $body.addClass('showMenu');
275    // disable fullpage.js scrolling
276    $.fn.fullpage.setAllowScrolling(false);
277    $showMenuButton.addClass('active');
278    $menuMask.addClass('mask-center');
279    $menu.addClass('show');
280    window.setTimeout(function() {
281      $fpNav.hide();
282      $menuMask.addClass('mask-right');
283    }, menuAnimTime);
284  };
285
286  // Hide menu function
287  var hideMenu = function() {
288    $body.removeClass('showMenu');
289    // enable fullpage.js scrolling
290    $.fn.fullpage.setAllowScrolling(true);
291    $showMenuButton.removeClass('active');
292    $menuMask.removeClass('mask-right');
293    window.setTimeout(function() {
294      $menu.removeClass('show');
295      $menuMask.removeClass('mask-center');
296      $fpNav.show();
297    }, menuAnimTime);
298  };
299
300  /* Add event listener */
301  $showMenuButton.on('click', function() {
302    if (!$body.hasClass('showMenu')) {
303      showMenu();
304    } else {
305      hideMenu();
306    }
307  });
308
309  /* Menu links */
310  var $menuLinksUl = $menu.find('.menu-links-ul');
311  $menuLinksUl.on('click', 'a', function(e) {
312    e.stopPropagation();
313    e.preventDefault();
314    var target = $(this).attr('href').split('#')[1];
315    $.fn.fullpage.silentMoveTo(target);
316    hideMenu();
317  });
318
319  /* ---------------------------------------------
320   Contact Form
321   --------------------------------------------- */
322  var $form = $('form.mail-form');
323  var $statusMassage = $form.find('.status-massage');
324
325  $form.submit(function() {
326    $statusMassage.find('*').remove();
327    var hasError = false;

328    $form.find('.form-controller').each(function() {
329      if (jQuery.trim($(this).val()) === '') {
330        var field = $(this).attr('name');
331        $statusMassage.append('<span class="error">Please fill out ' + field + ' field.</span>');
332        $(this).addClass('inputError');
333        hasError = true;
334      } else if ($(this).hasClass('email') && (this).attr('name') === 'email') {
335        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
336        if (!emailReg.test(jQuery.trim($(this).val()))) {
337          $statusMassage.append('<span class="error">You entered an invalid email.</span>');
338          $(this).addClass('inputError');
339          hasError = true;
340        }
341      }
342    });
343    if (!hasError) {
344      var formInput = $(this).serialize();
345      $.post($(this).attr('action'), formInput, function() {
346        $statusMassage.find('*').remove();
347        $statusMassage.append('' +
348          '<span class="success">' +
349          '<i class="icon ion-checkmark-round"></i>  ' +
350          'Thank you. Your email was sent successfully.' +
351          '</span>');
352      });
353    }
354  });
355
356  window.onload = init;
357
358})(jQuery);