Add files via upload

SCRIPT/carousel.js

@@ -0,0 +1,135 @@
+// set and cache variables
+var w, container, carousel, item, radius, itemLength, rY, ticker, fps;
+var mouseX = 0;
+var mouseY = 0;
+var mouseZ = 0;
+var addX = 0;
+
+
+// fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
+// no need to create my own :)
+var fps_counter = {
+
+    tick: function () {
+        // this has to clone the array every tick so that
+        // separate instances won't share state 
+        this.times = this.times.concat(+new Date());
+        var seconds, times = this.times;
+
+        if (times.length > this.span + 1) {
+            times.shift(); // ditch the oldest time
+            seconds = (times[times.length - 1] - times[0]) / 1000;
+            return Math.round(this.span / seconds);
+        } else return null;
+    },
+
+    times: [],
+    span: 20
+};
+var counter = Object.create(fps_counter);
+
+
+
+$(document).ready(init)
+
+function init() {
+    w = $(window);
+    container = $('#contentContainer');
+    carousel = $('#carouselContainer');
+    item = $('.carouselItem');
+    itemLength = $('.carouselItem').length;
+    fps = $('#fps');
+    rY = 360 / itemLength;
+    radius = Math.round((250) / Math.tan(Math.PI / itemLength));
+
+    // set container 3d props
+    TweenMax.set(container, {
+        perspective: 600
+    })
+    TweenMax.set(carousel, {
+        z: -(radius)
+    })
+
+    // create carousel item props
+
+    for (var i = 0; i < itemLength; i++) {
+        var $item = item.eq(i);
+        var $block = $item.find('.carouselItemInner');
+
+        //thanks @chrisgannon!        
+        TweenMax.set($item, {
+            rotationY: rY * i,
+            z: radius,
+            transformOrigin: "50% 50% " + -radius + "px"
+        });
+
+        animateIn($item, $block)
+    }
+
+    // set mouse x and y props and looper ticker
+    window.addEventListener("mousemove", onMouseMove, false);
+    ticker = setInterval(looper, 1000 / 60);
+}
+
+function animateIn($item, $block) {
+    var $nrX = 360 * getRandomInt(2);
+    var $nrY = 360 * getRandomInt(2);
+
+    var $nx = -(2000) + getRandomInt(4000)
+    var $ny = -(2000) + getRandomInt(4000)
+    var $nz = -4000 + getRandomInt(4000)
+
+    var $s = 1.5 + (getRandomInt(10) * .1)
+    var $d = 1 - (getRandomInt(8) * .1)
+
+    TweenMax.set($item, {
+        autoAlpha: 1,
+        delay: $d
+    })
+    TweenMax.set($block, {
+        z: $nz,
+        rotationY: $nrY,
+        rotationX: $nrX,
+        x: $nx,
+        y: $ny,
+        autoAlpha: 0
+    })
+    TweenMax.to($block, $s, {
+        delay: $d,
+        rotationY: 0,
+        rotationX: 0,
+        z: 0,
+        ease: Expo.easeInOut
+    })
+    TweenMax.to($block, $s - .5, {
+        delay: $d,
+        x: 0,
+        y: 0,
+        autoAlpha: 1,
+        ease: Expo.easeInOut
+    })
+}
+
+function onMouseMove(event) {
+    mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
+    mouseY = -(-(window.innerHeight * .5) + event.pageY) * .01;
+    mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY) - 200);
+}
+
+// loops and sets the carousel 3d properties
+function looper() {
+    addX += mouseX
+    TweenMax.to(carousel, 1, {
+        rotationY: addX,
+        rotationX: mouseY,
+        ease: Quint.easeOut
+    })
+    TweenMax.set(carousel, {
+        z: mouseZ
+    })
+    fps.text('Framerate: ' + counter.tick() + '/60 FPS')
+}
+
+function getRandomInt($n) {
+    return Math.floor((Math.random() * $n) + 1);
+}

SCRIPT/curseuranim.js

@@ -0,0 +1,100 @@
+//Fonction black
+function black() {
+    document.querySelector('#curseur').classList.add('black');
+}
+
+function white() {
+    document.querySelector('#curseur').classList.remove('black');
+}
+
+// Curseur
+window.addEventListener('mousemove', cursor);
+
+function cursor(e) {
+    document.querySelector('#curseur').style.top = e.pageY + 'px';
+    document.querySelector('#curseur').style.left = e.pageX + 'px';
+}
+
+//Hover sur input
+function hoverinput() {
+    document.querySelector('#curseur').classList.add('curseurinput');
+}
+
+function hoverinputleave() {
+    document.querySelector('#curseur').classList.remove('curseurinput');
+}
+
+//Contact, verif si y'a un email
+function contact() {
+    var StrObj = document.querySelector('#area').value;
+    var emailsArray = StrObj.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
+    if (emailsArray != null && emailsArray.length) {
+        document.querySelector('#Ty').classList.add('apparait');
+        document.querySelector('#Ty').classList.remove('disparait');
+    } else {
+        document.querySelector('#Ad').classList.add('apparait');
+        document.querySelector('#Ad').classList.remove('disparait');
+    }
+}
+
+function removealert() {
+    document.querySelector('#Ad').classList.remove('apparait');
+    document.querySelector('#Ad').classList.add('disparait');
+}
+
+function removeTy() {
+    document.querySelector('#Ty').classList.remove('apparait');
+    document.querySelector('#Ty').classList.add('disparait');
+}
+
+// fonctions copier
+function copieduno() {
+    document.querySelector('#tel').innerHTML = '📞 Copied';
+    navigator.clipboard.writeText('06 99 72 12 84');
+}
+
+function copieddos() {
+    document.querySelector('#mail').innerHTML = '📧 Copied';
+    navigator.clipboard.writeText('[email protected]')
+}
+
+//Typing Effect
+const typedTextSpan = document.querySelector(".typed-text");
+const cursorSpan = document.querySelector(".cursor");
+
+const textArray = ["Web Developpement", "Graphic Design", "3D Creation", "Video Editing"];
+const typingDelay = 200;
+const erasingDelay = 100;
+const newTextDelay = 2000; // Delay between current and next text
+let textArrayIndex = 0;
+let charIndex = 0;
+
+function type() {
+    if (charIndex < textArray[textArrayIndex].length) {
+        if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
+        typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
+        charIndex++;
+        setTimeout(type, typingDelay);
+    } else {
+        cursorSpan.classList.remove("typing");
+        setTimeout(erase, newTextDelay);
+    }
+}
+
+function erase() {
+    if (charIndex > 0) {
+        if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
+        typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
+        charIndex--;
+        setTimeout(erase, erasingDelay);
+    } else {
+        cursorSpan.classList.remove("typing");
+        textArrayIndex++;
+        if (textArrayIndex >= textArray.length) textArrayIndex = 0;
+        setTimeout(type, typingDelay + 1100);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
+    if (textArray.length) setTimeout(type, newTextDelay + 250);
+});

SCRIPT/timeline.js

@@ -0,0 +1,32 @@
+(function () {
+  "use strict";
+
+  // define variables
+  var items = document.querySelectorAll(".timeline li");
+
+  // check if an element is in viewport
+  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+  function isElementInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  function callbackFunc() {
+    for (var i = 0; i < items.length; i++) {
+      if (isElementInViewport(items[i])) {
+        items[i].classList.add("in-view");
+      }
+    }
+  }
+
+  // listen for events
+  window.addEventListener("load", callbackFunc);
+  window.addEventListener("resize", callbackFunc);
+  window.addEventListener("scroll", callbackFunc);
+})();