willaengine/public/js/scripts.js

// ---------- Loading Screen ---------- //



;(function(){


  function id(v){ return document.getElementById(v); }
  function loadbar() {
      var loading = id("loading"),
          stat = id("progstat"),
          img = document.images,
          c = 0,
          tot = img.length,
          loadedEls = document.querySelectorAll(".hideOnLoad");

      disableScroll();

      setTimeout(function () {
          for (var i = loadedEls.length - 1; i >= 0; i--) {
              var loadedEl = loadedEls[i];
              loadedEl.style.display = "block";
          };

          init(); // canvas three js init
          animate(); // canvas three js animate
          run(); // canvas background animation
          setTimeout(start, 300);

      }, 100);



    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";

      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      setTimeout(function(){
        //loading.style.display = "none";

        appear();
        enableScroll();

      }, 2500);

    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());




if (/Edge/.test(navigator.userAgent) || /Safari/.test(navigator.userAgent)) {
  var isSafari = true;
} else {
  var isSafari = false;
}

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;



// ---------- Current Year for Copyright ---------- //


var currentYear = (new Date()).getFullYear();
var copyRight = document.getElementById('copyRightYear');
var copyRight2 = document.getElementById('copyRightYear2');

copyRight.innerHTML = currentYear;
copyRight2.innerHTML = currentYear;



// ---------- Custom Cursor + Section Tilt (Mousemove event) ---------- //



(function() {

  "use strict";

  var w = window;

  const b = document.getElementsByTagName("body")[0];
      b.addEventListener("mousemove", mouseMove);

  var cursor = document.getElementById('cursor');
      b.addEventListener("mousedown", cursorClick);
      b.addEventListener("mouseup", cursorUnclick);


  var panel = document.querySelectorAll(".section.active");
  var text = document.querySelectorAll(".section-tagline-wrapper");
  var img = document.querySelectorAll(".section-img-wrapper");
  var no = document.querySelectorAll(".section-no-wrapper");

  var cImg = document.querySelectorAll('.pattern');

  var patterns = document.querySelectorAll('.pattern');


  function mouseMove(e) {



    // Custom Cursor
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';

    if (menu.classList.contains('active')){return}

    if (!isFirefox) {

      // Tilt Effect
      var sxPos = (e.clientX*1.5) / w.innerWidth * 100 - 100;
      var syPos = (e.clientY*1.5) / w.innerHeight * 100 - 100;
      TweenMax.to(no, 2, {
        rotationY: 0.06 * sxPos,
        rotationX: -0.06 * syPos,
        transformPerspective: 500,
        transformOrigin: "center center -100",
        ease: Expo.easeOut
      });
      TweenMax.to(text, 2, {
        rotationY: 0.06 * sxPos,
        rotationX: -0.06 * syPos,
        transformPerspective: 500,
        transformOrigin: "center center -450",
        ease: Expo.easeOut
      });
      TweenMax.to(img, 2, {
        rotationY: 0.06 * sxPos,
        rotationX: -0.06 * syPos,
        transformPerspective: 500,
        transformOrigin: "center center -300",
        ease: Expo.easeOut
      });

    }

    //Pattern Clipping Mask

    if (isChrome) {
      for (var i = patterns.length - 1; i >= 0; i--) {
        var pattern = patterns[i];
        pattern.style.display = "block";
        clipMask(pattern, e);
      };
    }




  }

  function clipMask(pattern, e) {
    pattern.style.setProperty("--clip-position", e.clientX + 'px ' + e.clientY + 'px');
  }

  function cursorClick(e) {
    cursor.classList.add("clicked")
  }

  function cursorUnclick(e) {
    setTimeout(function() {
      cursor.classList.remove("clicked")
    }, 300);
  }


  function cursorHover(e) {
    cursor.classList.add("hover")
  }
  function cursorUnhover(e) {
    cursor.classList.remove("hover")
  }


  var hovers = document.querySelectorAll(".hover-target");

  for (var i = hovers.length - 1; i >= 0; i--) {
    var hover = hovers[i];
    hoverHandler(hover);
  };

  function hoverHandler(hover) {
    hover.addEventListener("mouseover", cursorHover);
    hover.addEventListener("mouseout", cursorUnhover);
  }

})();





// ---------- Smooth Scroll on Click ---------- //

function anchorLinkHandler(e) {
    const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);

    e.preventDefault();
    const targetID = this.getAttribute("href");
    const targetAnchor = document.querySelector(targetID);

    if (!targetAnchor) return;
    const originalTop = distanceToTop(targetAnchor);

    window.scrollBy({ top: originalTop, left: 0, behavior: "smooth" });

    const checkIfDone = setInterval(function() {
        if (distanceToTop(targetAnchor) === 0 /*|| atBottom*/) {
            targetAnchor.tabIndex = "-1";
            targetAnchor.focus();
            clearInterval(checkIfDone);
        }
    }, 100);
}

function navLinkHandler(e) {
    const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);

    e.preventDefault();
    const targetID = this.getAttribute("href");
    const targetAnchor = document.querySelector(targetID);

    if (!targetAnchor) return;
    const originalTop = distanceToTop(targetAnchor);

    window.scrollBy({ top: originalTop, left: 0 });

    const checkIfDone = setInterval(function() {
        if (distanceToTop(targetAnchor) === 0 /*|| atBottom*/) {
            targetAnchor.tabIndex = "-1";
            targetAnchor.focus();
            clearInterval(checkIfDone);
        }
    }, 100);
}

const linksToAnchors = document.querySelectorAll('.scroll');
const navToAnchors = document.querySelectorAll('.scroll-nav');

linksToAnchors.forEach(each => (each.onclick = anchorLinkHandler));
navToAnchors.forEach(each => (each.onclick = navLinkHandler));





// ---------- Initial Logo Appearance ---------- //


var a = document.getElementById('container');
function start(){ a.classList.add("start"); }
function appear(){
  a.classList.add("appear");
}


// ---------- Background Gradient Animation ---------- //


var c = document.getElementById('canvas__bg');
var $ = c.getContext('2d');

var col = function(x, y, r, g, b) {
  $.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
  $.fillRect(x, y, 1,1);
}

var R = function(x, y, t) {return( Math.floor(130 + 64*Math.cos( (x*x-y*y)/300 + t )) );}
var G = function(x, y, t) {return( Math.floor(0 + 64*Math.sin( (x*x*Math.cos(t/4)+y*y*Math.sin(t/3))/300 ) ) );}
var B = function(x, y, t) {return( Math.floor(250 + 64*Math.sin( 5*Math.sin(t/9) + ((x-100)*(x-100)+(y-100)*(y-100))/1100) ));}

var t = 0;

var run = function() {
  for(x=0;x<=35;x++) {
    for(y=0;y<=35;y++) {
      col(x, y, R(x,y,t), G(x,y,t), B(x,y,t));
    }
  }
  t = t + 0.030;
  window.requestAnimationFrame(run);
}


// ---------- Menu Open ---------- //


function openMenu(toggle, menu) {
  toggle.classList.add('is-active');
  menu.classList.add('active');
  disableScroll()
}

function closeMenu(toggle, menu) {
  toggle.classList.remove('is-active');
  menu.classList.remove('active');
  enableScroll()
}

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.ontouchmove = null;
    document.onkeydown = null;
}

(function() {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");
    const menu = document.getElementById("menu");
    var navs = document.querySelectorAll(".nav-menu");



    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle, menu);
    };

    function toggleHandler(toggle, menu) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("is-active") === true) ? closeMenu(toggle, menu) : openMenu(toggle, menu);
      });
    }

    for (var i = navs.length - 1; i >= 0; i--) {
      var nav = navs[i];
      navHandler(toggle, menu, nav);
    };

    function navHandler(toggle, menu, nav) {
      nav.addEventListener( "click", function(e) {
        closeMenu(toggle, menu)
      });
    }

})();



// ---------- Scroll Mask Fix ---------- //

// detect IE, Edge, Safari browsers
if (isSafari) {
  document.documentElement.className = 'scroll-update-fix';
}



// ---------- Text Letters Animation ---------- //


//function animateText() {
//  var lettr = document.getElementById("lettr");
//  var lines = lettr.querySelectorAll('font');
//  for (var x = lines.length - 1; x >= 0; x--) {
//    var line = lines[x];
//    lineHandler(line);
//  };
//  function lineHandler(line) {
//    var text = line.textContent;
//    var wordSplit = text.split("");
//    line.innerHTML = "";
//    for (w = 0 ; w < wordSplit.length; w++) {
//      line.innerHTML += "<span>" + wordSplit[w] + "</span>";
//    }
//    chars = line.querySelectorAll('span');
//    for (var x = chars.length - 1; x >= 0; x--) {
//      var char = chars[x];
//      charHandler(char, x);
//    };
//    function charHandler(char, x) {
//      char.style.transitionDelay = x * .1 + "s";
//    }
//  }
//}



// ---------- Canvas Three JS ---------- //



var renderer, scene, camera, composer, circle, skelet, particle;


function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClear = false;
  renderer.setClearColor(0x000000, 0.0);
  document.getElementById('canvas__three').appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;
  scene.add(camera);

  circle = new THREE.Object3D();
  skelet = new THREE.Object3D();
  particle = new THREE.Object3D();

  scene.add(circle);
  scene.add(skelet);
  scene.add(particle);

  var geometry = new THREE.TetrahedronGeometry(2, 0);
  var geom = new THREE.TetrahedronGeometry(7, 0);
  var geom2 = new THREE.IcosahedronGeometry(15, 0);

  var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  });

  for (var i = 0; i < 20; i++) {
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
    mesh.position.multiplyScalar(90 + (Math.random() * 700));
    particle.add(mesh);
  }

  var mat = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  });

  var mat2 = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    wireframe: true,
    side: THREE.DoubleSide

  });

  var planet = new THREE.Mesh(geom, mat);
  planet.scale.x = planet.scale.y = planet.scale.z = 16;
  circle.add(planet);

  var planet2 = new THREE.Mesh(geom2, mat2);
  planet2.scale.x = planet2.scale.y = planet2.scale.z = 10;
  skelet.add(planet2);

  var ambientLight = new THREE.AmbientLight(0x666666 );
  scene.add(ambientLight);

  var lights = [];
  lights[0] = new THREE.DirectionalLight( 0xffffff, 1 );
  lights[0].position.set( 1, 0, 0 );
  lights[1] = new THREE.DirectionalLight( 0xf000ff, 1 );
  lights[1].position.set( 0.75, 1, 0.5 );
  lights[2] = new THREE.DirectionalLight( 0x3c73ff, 1 );
  lights[2].position.set( -0.75, -1, 0.5 );
  scene.add( lights[0] );
  scene.add( lights[1] );
  scene.add( lights[2] );


  window.addEventListener('resize', onWindowResize, false);

};

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);

  particle.rotation.x += 0.0000;
  particle.rotation.y -= 0.0040;
  circle.rotation.x -= 0.0020;
  circle.rotation.y -= 0.0030;
  skelet.rotation.x -= 0.0010;
  skelet.rotation.y += 0.0020;
  renderer.clear();

  renderer.render( scene, camera )
};



// ---------- Active Section on Scroll ---------- //


function activateSection() {

  if (menu.classList.contains('active')){return}

  var scrollPos = window.scrollY;
  var sections = document.querySelectorAll('.section');

  for (var x = sections.length - 1; x >= 0; x--) {
    var section = sections[x];
    sectionHandler(section, scrollPos);
  };

  function sectionHandler(e, scrollPos) {

    var elemTop = e.offsetTop - (e.clientHeight/1.5);
    var elemBtm = elemTop + e.clientHeight + 200;

    if ( scrollPos > elemTop && scrollPos < elemBtm ) {
      e.classList.add("active");
    } else {
      e.classList.remove("active");
    }

  }


};



// ---------- Document Ready Events ---------- //




window.onload = function() {


  //animateText();


}



// --------------- On Scroll Events  --------------- //


window.addEventListener('scroll', function() {

  activateSection();


});