LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  overflow: hidden;
}

html, body, #lil {
  height: 100%;
}

#lil {
  -webkit-animation: oscillate 1000ms alternate ease-in-out infinite;
          animation: oscillate 1000ms alternate ease-in-out infinite;
}

audio {
  position: absolute;
  top: 0;
}
audio:nth-of-type(1) {
  top: 0rem;
}
audio:nth-of-type(2) {
  top: 2rem;
}
audio:nth-of-type(3) {
  top: 4rem;
}

#chano, #from-79th {
  height: 336px;
  width: 336px;
}

#chano {
  position: absolute;
  top: calc(50% - 168px);
  left: calc(50% - 168px);
  cursor: -webkit-grab;
  cursor: grab;
}

#from-79th {
  display: block;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  border-radius: 50%;
  -webkit-transform: scale(1);
          transform: scale(1);
}
#from-79th g {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes oscillate {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes oscillate {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.words {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}
.words div {
  opacity: 0;
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
body.audio-1 .words div.words-1 {
  opacity: 1;
}
body.audio-2 .words div.words-2 {
  opacity: 1;
}
body.audio-3 .words div.words-3 {
  opacity: 1;
}
.words div p {
  color: white;
  position: absolute;
  width: 800px;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 800px 0 0 rgba(255, 255, 255, 0.4), -800px 0 0 rgba(255, 255, 255, 0.4);
  opacity: 0;
}
.words div p:nth-child(odd) {
  right: 100%;
  -webkit-animation: drift-r 6s linear alternate infinite, opacity 300ms linear forwards;
          animation: drift-r 6s linear alternate infinite, opacity 300ms linear forwards;
}
.words div p:nth-child(even) {
  left: 100%;
  -webkit-animation: drift-l 6s linear alternate infinite, opacity 300ms linear forwards;
          animation: drift-l 6s linear alternate infinite, opacity 300ms linear forwards;
}
.words div p:nth-child(1) {
  top: 0%;
}
.words div p:nth-child(2) {
  top: 5%;
}
.words div p:nth-child(3) {
  top: 10%;
}
.words div p:nth-child(4) {
  top: 15%;
}
.words div p:nth-child(5) {
  top: 20%;
}
.words div p:nth-child(6) {
  top: 25%;
}
.words div p:nth-child(7) {
  top: 30%;
}
.words div p:nth-child(8) {
  top: 35%;
}
.words div p:nth-child(9) {
  top: 40%;
}
.words div p:nth-child(10) {
  top: 45%;
}
.words div p:nth-child(11) {
  top: 50%;
}
.words div p:nth-child(12) {
  top: 55%;
}
.words div p:nth-child(13) {
  top: 60%;
}
.words div p:nth-child(14) {
  top: 65%;
}
.words div p:nth-child(15) {
  top: 70%;
}
.words div p:nth-child(16) {
  top: 75%;
}
.words div p:nth-child(17) {
  top: 80%;
}
.words div p:nth-child(18) {
  top: 85%;
}
.words div p:nth-child(19) {
  top: 90%;
}
.words div p:nth-child(20) {
  top: 95%;
}
.words div p:nth-child(1), .words div p:nth-child(19) {
  -webkit-animation-delay: 0.12s, 0.12s;
          animation-delay: 0.12s, 0.12s;
}
.words div p:nth-child(2), .words div p:nth-child(18) {
  -webkit-animation-delay: 0.24s, 0.24s;
          animation-delay: 0.24s, 0.24s;
}
.words div p:nth-child(3), .words div p:nth-child(17) {
  -webkit-animation-delay: 0.36s, 0.36s;
          animation-delay: 0.36s, 0.36s;
}
.words div p:nth-child(4), .words div p:nth-child(16) {
  -webkit-animation-delay: 0.48s, 0.48s;
          animation-delay: 0.48s, 0.48s;
}
.words div p:nth-child(5), .words div p:nth-child(15) {
  -webkit-animation-delay: 0.6s, 0.6s;
          animation-delay: 0.6s, 0.6s;
}
.words div p:nth-child(6), .words div p:nth-child(14) {
  -webkit-animation-delay: 0.72s, 0.72s;
          animation-delay: 0.72s, 0.72s;
}
.words div p:nth-child(7), .words div p:nth-child(13) {
  -webkit-animation-delay: 0.84s, 0.84s;
          animation-delay: 0.84s, 0.84s;
}
.words div p:nth-child(8), .words div p:nth-child(12) {
  -webkit-animation-delay: 0.96s, 0.96s;
          animation-delay: 0.96s, 0.96s;
}
.words div p:nth-child(9), .words div p:nth-child(11) {
  -webkit-animation-delay: 1.08s, 1.08s;
          animation-delay: 1.08s, 1.08s;
}
.words div p:nth-child(10), .words div p:nth-child(10) {
  -webkit-animation-delay: 1.2s, 1.2s;
          animation-delay: 1.2s, 1.2s;
}

@-webkit-keyframes drift-r {
  from {
    right: 100%;
  }
  to {
    right: -800px;
  }
}

@keyframes drift-r {
  from {
    right: 100%;
  }
  to {
    right: -800px;
  }
}
@-webkit-keyframes drift-l {
  from {
    left: 100%;
  }
  to {
    left: -800px;
  }
}
@keyframes drift-l {
  from {
    left: 100%;
  }
  to {
    left: -800px;
  }
}
@-webkit-keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  font-family: Lato, Helvetica, sans-serif;
  font-weight: 400;
  background: #1F1F1F;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body:not(.playing) #chano .id-1 {
  opacity: 1;
  visibility: visible;
}
body:not(.playing) #from-79th:hover {
  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: -webkit-transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83), -webkit-transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
body.playing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-animation: background-color 2s linear infinite;
          animation: background-color 2s linear infinite;
}
body.playing #chano {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
body.playing #from-79th {
  -webkit-transition: -webkit-transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: -webkit-transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transition: transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83), -webkit-transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  -webkit-transform: scale(2);
          transform: scale(2);
}
body.playing .frame-1 #chano .id-1 {
  opacity: 1;
  visibility: visible;
}
body.playing .frame-2 #chano .id-2 {
  opacity: 1;
  visibility: visible;
}
body.playing .frame-3 #chano .id-3 {
  opacity: 1;
  visibility: visible;
}
body.playing .frame-4 #chano .id-4 {
  opacity: 1;
  visibility: visible;
}

@-webkit-keyframes background-color {
  0% {
    background: #7dd3e8;
  }
  10% {
    background: #81e87d;
  }
  20% {
    background: #d37de8;
  }
  30% {
    background: #e8867d;
  }
  40% {
    background: #e8b87d;
  }
  50% {
    background: #9fe87d;
  }
  60% {
    background: #a4e87d;
  }
  70% {
    background: #cae87d;
  }
  80% {
    background: #e87dc4;
  }
  90% {
    background: #7de8ad;
  }
  100% {
    background: #c17de8;
  }
}

@keyframes background-color {
  0% {
    background: #7dd3e8;
  }
  10% {
    background: #81e87d;
  }
  20% {
    background: #d37de8;
  }
  30% {
    background: #e8867d;
  }
  40% {
    background: #e8b87d;
  }
  50% {
    background: #9fe87d;
  }
  60% {
    background: #a4e87d;
  }
  70% {
    background: #cae87d;
  }
  80% {
    background: #e87dc4;
  }
  90% {
    background: #7de8ad;
  }
  100% {
    background: #c17de8;
  }
}
JS
var app = new App();

function App() {
  var A = {};
  
  init();
  
  return A;  
  
  /**************
  initialization
  **************/
  
  function init() {
    setupData();
    var setup_audios = setupAudios();
    setup_audios.then(function() {
      setupEvents();
    });
    var setup_images = setupImages();
    setup_images.then(function() {
      setupFrames();
      oscillateFrames();
    });
  }
  
  /**************
  setters
  **************/
  
  function setupData() {
    A.datas = {};
    A.audios = {};
    A.audio = 1;
    A.audio_playing = false;
    A.img_di = 56;
    A.lil   = document.getElementById("lil");
    A.chano = document.getElementById("chano");
    A.svg   = document.getElementById("from-79th");
    var di = A.img_di;
    A.svg.height = di;
    A.svg.width  = di;
  }
  
  function setupEvents() {
    A.chano.addEventListener("mousedown", playAudio);
    document.addEventListener("mousemove", chanoTransform);
    document.addEventListener("mouseleave", pauseAudio);
    document.addEventListener("mouseup", pauseAudio);
    A.chano.addEventListener("touchstart", pauseAudio);
  }
  
  // setup images wrapped in a promise
  function setupImages() {
    return new Promise(function(resolve, reject) {
      var count  = 4,
          di     = A.img_di,
          loaded = 0;
      for(var i = 1; i <= count; i++) {
        var img = new Image();
        img.crossOrigin = "Anonymous";
        var url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/chano-" + i + ".png";
        img.src = url;
        img.setAttribute("data-order", i);
        
        img.onload = function(e) {
          var image = e.target,
              cvs = document.createElement("canvas"),
              ctx = cvs.getContext("2d");
          cvs.height = di; cvs.width  = di;
          cvs.style.height = di + "px"; cvs.style.width  = di + "px";
          ctx.drawImage(image, 0, 0, di, di);
          
          var img_data = ctx.getImageData(0, 0, di, di);      
          A.datas["id-" + image.getAttribute("data-order")] = img_data;
          loaded++;
          if(loaded === count) {
            resolve("Images Loaded!");
          }
        }
      }
    });
  }
  
  // setup audios
  function setupAudios() {
    var lyrics = [
      "Neh neh neh neh neeeeeeeeh...neh neh neh neh neeeeeh.",
      "‘member sittin’ in class the first time listening to Dilla. Everything’s good.",
      "Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh! Ahh!"
    ];
    return new Promise(function(resolve, reject) {
      var count  = 3,
          loaded = 0;
        // do a thing, possibly async, then…
      for(var i = 1; i <= count; i++) {
        var url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/chano-0" + i + ".mp3";
        var audio = new Audio(url);
        var words = document.querySelector(".words");
        var el = document.createElement("div");
        el.className = "words-" + i;
        words.appendChild(el);
        for(var p = 0; p < 20; p++) {
          var paragraph = document.createElement("p");
          paragraph.innerHTML = lyrics[i - 1];
          el.appendChild(paragraph);
        }
        A.audios["id-"+i] = audio;
        audio.setAttribute("preload", "auto");
        audio.setAttribute("controls", "controls");
        audio.setAttribute("loop", true);
        audio.setAttribute("data-order", i);
        // document.body.appendChild(audio);
        audio.addEventListener("canplaythrough", function(e) {
          loaded++;
          if(loaded === count) {
            resolve("Audios Loaded!");
          }
        });
      }
    });
  }

    
  /**************
  events
  **************/
    
  function chanoTransform(e) {
    if(!A.audio_playing) return;
    var halfw = window.innerWidth / 2,
        halfh = window.innerHeight / 2,
        x = e.clientX,
        y = e.clientY,
        posx = x > halfw,
        posy = y > halfh,
        ratx = posx ? (x - halfw) / halfw : -1 - (x / -halfw),
        raty = posy ? (y - halfh) / halfh : -1 - (y / -halfh);
    var max_deg = 15,
        max_move = 30;
    var transform = [
      "rotateX("+(max_deg * -raty)+"deg)", 
      "rotateY("+(max_deg * -ratx)+"deg)",
      "skewX("+(max_deg * raty)+"deg)", 
      "skewY("+(max_deg * ratx)+"deg)",
      "translateX("+(max_move * -ratx)+"px)", 
      "translateY("+(max_move * -raty)+"px)"
    ].join(" ");
    A.chano.style.webkitTransform = transform;
    A.chano.style.transform = transform;    
  }
    
  function killTransform() {
    A.chano.style.webkitTransform = "";
    A.chano.style.transform = "";
  }
  
  function playAudio() {
    A.audio_playing = true;
    document.body.className = "playing audio-" + A.audio;
    A.audios["id-"+A.audio].play();
  }
  
  function pauseAudio() {
    killTransform();
    var audio = A.audios["id-"+A.audio];
    audio.pause();
    audio.currentTime = 0;
    if(A.audio_playing) {
      A.audio++;
      document.body.className = "";
      A.audio_playing = false;    
      if(A.audio > 3) A.audio = 1;
    }
  }
  
  /**************
  drawers
  **************/
  
  function oscillateFrames() {
    var current_image = 1;
    var timer = 0;
    var down = true;
    requestAnimationFrame(loop);    
    function loop() {
      timer++;
      if(timer % 2 === 0) {
        drawFrame(current_image);
        if(down) {
          if(current_image === 1) {
            current_image++;
            down = false;
          } else {
            current_image--;
          }
        } else {
          if(current_image === 4) {
            current_image--;
            down = true;
          } else {
            current_image++;
          }
        }
      }
      requestAnimationFrame(loop);
    }
  }
  
  // switch classname and let css handle the animation for us
  function drawFrame(which) {
    A.lil.setAttribute("class", "frame-" + which);
  }
  
  // draw all the svg elements
  function setupFrames() {
    var xmlns = "http://www.w3.org/2000/svg";
 
    for(var f in A.datas) {
      var set = A.datas[f].data;
      var group = document.createElementNS(xmlns, "g");
      group.setAttributeNS(null, "class", f);      
      A.svg.appendChild(group);
      for(var i = 0; i < (set.length / 4); i++) {
        var row_length = A.img_di;
        var x = (i % A.img_di);
        var y = Math.floor(i / A.img_di);
        var rel_i = i * 4;
        var r = set[rel_i], g = set[rel_i+1], b = set[rel_i+2], a = set[rel_i+3];
        if(r+g+b+a !== 0) {
          var fill = "rgb(" + [r,g,b].join(",") + ")";
          var rect = document.createElementNS(xmlns, "rect");
          rect.setAttributeNS(null, "x", x);
          rect.setAttributeNS(null, "y", y);
          rect.setAttributeNS(null, "width", 1);
          rect.setAttributeNS(null, "height", 1);
          rect.setAttributeNS(null, "fill", fill);
          group.appendChild(rect);
        }
      }
    }
  }
  
}

Description

WARNING: Audio on click. Grab Chance the Rapper and he will sing until you let go. Only really working well on desktop chrome because of the experimental technique.
Term
Mon, 11/27/2017 - 21:30

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv