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

$(function(){
  new WOW().init();
  AOS.init();
  new Swiper('.swiper-container');
  const swiper = new Swiper('.swiper-container', {
     //기본 셋팅 
     //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
     direction: 'horizontal', 
     //한번에 보여지는 페이지 숫자
     slidesPerView: 1,
     //페이지와 페이지 사이의 간격 
     spaceBetween: 30, 
     //드레그 기능 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', 
      }, 
    });
    
    new fullpage('#fullpage', {
      licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
      //options here
      autoScrolling:true,
      scrollHorizontally: true,
      navigation:true,
      navigationPosition:'right',
      scrollBar: true
    });
  
    //methods
   $.fn.fullpage.setAllowScrolling(true);
});


$(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();


});