pal-home-front/html/js/common.js

$(function(){
  new WOW().init();
  AOS.init();

  //$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
    new fullpage('#fullpage', {
      licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
      //options here
      anchors:['home', 'works', 'mobility','skills', 'news'],
      autoScrolling:true,
      scrollHorizontally: true,
      navigation:true,
      navigationPosition:'right',
      scrollBar: true,
        afterLoad: function(origin, destination) {   
          if(destination.index === 0) {
            $('.topBtn').css('display','none');
          }
          
          if(destination.anchor === 'skills' || destination.anchor === 'news') {
            $('.gnb_1da').css('color', '#000');
            $('.wh_logo').css('display', 'none');
            $('.color_logo').css('display', 'block');
            $('#hd').on('mouseenter', function () {
              $('.wh_logo').css('display', 'block');
              $('.color_logo').css('display', 'none');      
            });
            $('#hd').on('mouseleave', function () {
              $('.wh_logo').css('display', 'none');
              $('.color_logo').css('display', 'block');     
              $('.gnb_1da').css('color', '#000');      
            });
          } else {
            $('.gnb_1da').css('color', '#fff');
          }
        },
        onLeave: function(origin, destination){
          new WOW().init(); 
          console.log(destination)
          if(destination.anchor === 'skills' || destination.anchor === 'news') {
            $('.gnb_1da').css('color', '#fff');
          } else {
            $('.gnb_1da').css('color', '#fff');
            $('.wh_logo').css('display', 'block');
            $('.color_logo').css('display', 'none');
            $('#hd').on('mouseenter', function () {
              $('.wh_logo').css('display', 'block');
              $('.color_logo').css('display', 'none');      
            });
            $('#hd').on('mouseleave', function () {
              $('.wh_logo').css('display', 'block');
              $('.color_logo').css('display', 'none');     
              $('.gnb_1da').css('color', '#fff');      
            });
          } 
        },        
    });
  
    //methods
   $.fn.fullpage.setAllowScrolling(false);
});


$(function(){
  new Swiper('.swiper-container');
  const swiper = new Swiper('.swiper-container', {
     //기본 셋팅 
     //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
     direction: 'horizontal', 
     //한번에 보여지는 페이지 숫자
     slidesPerView: 4,
     //페이지와 페이지 사이의 간격 
     spaceBetween: 100, 
     //드레그 기능 true 사용가능 false 사용불가 
     debugger: true, 
     //마우스 휠기능 true 사용가능 false 사용불가 
     mousewheel: false, 
     //반복 기능 true 사용가능 false 사용불가 
     loop: true, 
     //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 
     centeredSlides: true, 
     // 페이지 전환효과 slidesPerView효과와 같이 사용 불가 
     // effect: 'fade', 
     //자동 스크를링 
     autoplay: { 
       //시간 1000 이 1초 
       delay: 2500, 
       disableOnInteraction: false, 
      }, 
      //페이징 
      pagination: { 
        //페이지 기능 
        el: '.swiper-pagination', 
        //클릭 가능여부 
        clickable: true, 
      }, 
        //방향표 
        navigation: { 
        //다음페이지 설정 
        nextEl: '.swiper-button-next', 
        //이전페이지 설정 
        prevEl: '.swiper-button-prev', 
      }, 
    });

});


$(function(){

  "use strict";

  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
      
    hue = 217,
    stars = [],
    count = 0,
    maxStars = 1000;
  
  // Thanks @jackrugile for the performance tip! https://codepen.io/jackrugile/pen/BjBGoM
  // Cache gradient
  var canvas2 = document.createElement('canvas'),
      ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
  var half = canvas2.width/2,
      gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#fff');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');
  
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();
  
  // End cache
  
  function random(min, max) {
    if (arguments.length < 2) {
      max = min;
      min = 0;
    }
    
    if (min > max) {
      var hold = max;
      max = min;
      min = hold;
    }
  
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  function maxOrbit(x,y) {
    var max = Math.max(x,y),
        diameter = Math.round(Math.sqrt(max*max + max*max));
    return diameter/2;
  }
  
  var Star = function() {
  
    this.orbitRadius = random(maxOrbit(w,h));
    this.radius = random(60, this.orbitRadius) / 12;
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 1000000;
    this.alpha = random(2, 10) / 10;
  
    count++;
    stars[count] = this;
  }
  
  Star.prototype.draw = function() {
    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
        y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
        twinkle = random(10);
  
    if (twinkle === 1 && this.alpha > 0) {
      this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
      this.alpha += 0.05;
    }
  
    ctx.globalAlpha = this.alpha;
      ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
  }
  
  for (var i = 0; i < maxStars; i++) {
    new Star();
  }
  
  function animation() {
      ctx.globalCompositeOperation = 'source-over';
      ctx.globalAlpha = 0.8;
      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
      ctx.fillRect(0, 0, w, h)
    
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 1, l = stars.length; i < l; i++) {
      stars[i].draw();
    };  
    
    window.requestAnimationFrame(animation);
  }
  
  animation();


});

$(function() { 
  $('.topBtn').css('display','none');
  $(window).scroll(function() { if ($(this).scrollTop() > 300) { 
    $('.topBtn').fadeIn();
      } else { 
        $('.topBtn').fadeOut(); 
      } 
  });
	$('.topBtn').click(function(){
		$('html, body').animate({scrollTop:0},300);
	});
});


$(function(){
  new Swiper('.swiper-container-history');
  const swiper = new Swiper('.swiper-container-history', {
     //기본 셋팅 
     direction: 'horizontal', 
     slidesPerView: 1, // 슬라이드를 한번에 3개를 보여준다
     slidesPerGroup :1, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
     spaceBetween: 100, // 슬라이드간 padding 값 30px 씩 떨어뜨려줌
     
     // 그룹수가 맞지 않을 경우 빈칸으로 메우기
     // 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
     loopFillGroupWithBlank : true,

     loop: true,
     autoplay: false,
      //방향표 
        navigation: { 
        //다음페이지 설정 
        nextEl: '.swiper-button-next', 
        //이전페이지 설정 
        prevEl: '.swiper-button-prev', 
      }, 
    });

});

$(function(){
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
    AOS.refresh();
	})
});

$(function(){
  new Swiper('.swiper-container-work');
  const swiper = new Swiper('.swiper-container-work', {
     //기본 셋팅 
     //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
     direction: 'horizontal', 
     //한번에 보여지는 페이지 숫자
     slidesPerView: 3,
     //페이지와 페이지 사이의 간격 
     spaceBetween: 10, 
     //드레그 기능 true 사용가능 false 사용불가 
     debugger: true, 
     //마우스 휠기능 true 사용가능 false 사용불가 
     mousewheel: false, 
     //반복 기능 true 사용가능 false 사용불가 
     loop: true, 
     //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 
     centeredSlides: true, 
     // 페이지 전환효과 slidesPerView효과와 같이 사용 불가 
     // effect: 'fade', 
     //자동 스크를링 
     speed : 1000, // 슬라이드 속도 2초
     autoplay: { 
       //시간 1000 이 1초 
       delay: 3000, 
       disableOnInteraction: false, 
      },
        //방향표 
        navigation: { 
        //다음페이지 설정 
        nextEl: '.swiper-button-next', 
        //이전페이지 설정 
        prevEl: '.swiper-button-prev', 
      }, 
    });

});