scripts.js

$( document ).ready(function() {

  // Progress bar
  // let containerA = document.getElementById("circleA");

  // let circleA = new ProgressBar.Circle(containerA, {

  //   color: '#65DAF9',
  //   strokeWidth: 8,
  //   duration: 1400,
  //   from: { color: '#aaa'},
  //   to: { color: '#65DAF9'},

  //   step: function(state, circle) {
  //     circle.path.setAttribute('stroke', state.color);

  //     var value = Math.round(circle.value() * 60);
  //     circle.setText(value);

  //   }

  // });

  // let containerB = document.getElementById("circleB");

  // let circleB = new ProgressBar.Circle(containerB, {

  //   color: '#65DAF9',
  //   strokeWidth: 8,
  //   duration: 1600,
  //   from: { color: '#aaa'},
  //   to: { color: '#65DAF9'},

  //   step: function(state, circle) {
  //     circle.path.setAttribute('stroke', state.color);

  //     var value = Math.round(circle.value() * 254);
  //     circle.setText(value);

  //   }

  // });

  // let containerC = document.getElementById("circleC");

  // let circleC = new ProgressBar.Circle(containerC, {

  //   color: '#65DAF9',
  //   strokeWidth: 8,
  //   duration: 1800,
  //   from: { color: '#aaa'},
  //   to: { color: '#65DAF9'},

  //   step: function(state, circle) {
  //     circle.path.setAttribute('stroke', state.color);

  //     var value = Math.round(circle.value() * 32);
  //     circle.setText(value);

  //   }

  // });

  // let containerD = document.getElementById("circleD");

  // let circleD = new ProgressBar.Circle(containerD, {

  //   color: '#65DAF9',
  //   strokeWidth: 8,
  //   duration: 2000,
  //   from: { color: '#aaa'},
  //   to: { color: '#65DAF9'},

  //   step: function(state, circle) {
  //     circle.path.setAttribute('stroke', state.color);

  //     var value = Math.round(circle.value() * 5423);
  //     circle.setText(value);

  //   }

  // });

  // iniciando loaders quando a usuário chegar no elemento
  let dataAreaOffset = $('#data-area').offset();
  // stop serve para a animação não carregar mais que uma vez
  let stop = 0;

  $(window).scroll(function (e) {

    let scroll = $(window).scrollTop();

    if(scroll > (dataAreaOffset.top - 500) && stop == 0) {
      circleA.animate(1.0);
      circleB.animate(1.0);
      circleC.animate(1.0);
      circleD.animate(1.0);

      stop = 1;
    }

  });

  // Parallax

  // setTimeout serve para carregar primeiro as imagens
  setTimeout(function() {
    $('#data-area').parallax({imageSrc: 'img/cidadeparallax.png'});
    $('#apply-area').parallax({imageSrc: 'img/pattern.png'});
  }, 200);

  // Filtro portfólio

  $('.filter-btn').on('click', function() {

    let type = $(this).attr('id');
    let boxes = $('.project-box');

    $('.main-btn').removeClass('active');
    $(this).addClass('active');

    if(type == 'dsg-btn') {
      eachBoxes('dsg', boxes);
    } else if(type == 'dev-btn') {
      eachBoxes('dev', boxes);
    } else if(type == 'seo-btn') {
      eachBoxes('seo', boxes);
    } else {
      eachBoxes('all', boxes);
    }

  });

  function eachBoxes(type, boxes) {

    if(type == 'all') {
      $(boxes).fadeIn();
    } else {
      $(boxes).each(function() {
        if(!$(this).hasClass(type)) {
          $(this).fadeOut('slow');
        } else {
          $(this).fadeIn();
        }
      });
    }
  }

  // scroll para as seções

  let navBtn = $('.nav-item');

  let bannerSection = $('#mainSlider');
  let aboutSection = $('#about-area');
  let servicesSection = $('#services-area');
  let teamSection = $('#team-area');
  let portfolioSection = $('#portfolio-area');
  let contactSection = $('#contact-area');

  let scrollTo = '';

  $(navBtn).click(function() {

    let btnId = $(this).attr('id');

    if(btnId == 'about-menu') {
      scrollTo = aboutSection;
    } else if(btnId == 'services-menu') {
      scrollTo = servicesSection;
    } else if(btnId == 'team-menu') {
      scrollTo = teamSection;
    } else if(btnId == 'portfolio-menu') {
      scrollTo = portfolioSection;
    } else if(btnId == 'contact-menu') {
      scrollTo = contactSection;
    } else {
      scrollTo = bannerSection;
    }

    $([document.documentElement, document.body]).animate({
        scrollTop: $(scrollTo).offset().top - 70
    }, 1500);
  });

});