Doppelcode für zweites animiertes Auge

Question

Ich fing an, Javascript zu lernen, und ich versuche, Codes auf Codepen zu erweitern.

Gerade jetzt versuche ich, dieses Auge hier zu kopieren, so dass zwei Augen meinem Cursor folgen. Ich begann die gesamte Funktionalität mit verschiedenen Variablen und auch die Keyframe-Animationen zu duplizieren, aber ich denke, dies ist nicht der richtige Weg ist, es zu tun und es ist auch nicht funktioniert ..

http://codepen.io/GottZ/pen/XbxBXw

var eye; 
var n_eye = document.querySelector(".eye"); 
var n_iris = n_eye.querySelector(".iris"); 
var size = n_eye.clientWidth; 

(window.onresize = function() { 
    eye = { 
     x: n_eye.offsetLeft + size/2, 
     y: n_eye.offsetTop + size/2 
    }; 
})(); 

window.onmouseout = window.onmouseleave = function() { 
    n_iris.setAttribute("class", "iris anim"); 
}; 

window.ontouchend = function (e) { 
    if (e.touches.length == 0) window.onmouseout(); 
} 

window.onmousemove = function (e) { 
    n_iris.setAttribute("class", "iris"); 
    var m = { 
     x: e.clientX - eye.x, 
     y: e.clientY - eye.y 
    }; 
    m.rx = 0 - m.y; 
    m.ry = m.x; 
    ["rx", "ry"].forEach(function (r) { 
     m[r] *= 0.1; 
     m[r] = Math.max(-60, m[r]); 
     m[r] = Math.min(60, m[r]); 
    }); 
    n_iris.style.transform = "rotateX("+m.rx+"deg) rotateY("+m.ry+"deg) translateZ(68px) scale(0.6)"; 
}; 

window.ontouchmove = window.ontouchstart = function (e) { 
    var touch = e.touches[0]; 
    window.onmousemove(touch); 
}; 

Kann mir jemand helfen raus hier? Ich würde in der korrekten und sauberen Weise interessiert sein, wie dies getan werden sollte ...

danke!

Answer 1

Ich habe Ihre CSS JQquery und HTML geändert. Schau mal. Ändern Sie die Augenposition nach Ihren Bedürfnissen.

$(function() { 
 

 
      var eyeL; 
 
      var n_eyeL = document.querySelector(".eyeL"); 
 
      var n_irisL = n_eyeL.querySelector(".irisL"); 
 
      var sizeL = n_eyeL.clientWidth; 
 

 
      var eyeR; 
 
      var n_eyeR = document.querySelector(".eyeR"); 
 
      var n_irisR = n_eyeR.querySelector(".irisR"); 
 

 
      var sizeR = n_eyeR.clientWidth; 
 

 
      (window.onresize = function() { 
 
       eyeL = { 
 
        x: n_eyeL.offsetLeft + sizeL/2, 
 
        y: n_eyeL.offsetTop + sizeL/2 
 
       }; 
 
       eyeR = { 
 
        x: n_eyeR.offsetLeft + sizeR/2, 
 
        y: n_eyeR.offsetTop + sizeR/2 
 
       }; 
 
      })(); 
 

 
      window.onmouseout = window.onmouseleave = function() { 
 
       n_irisL.setAttribute("class", "irisL anim"); 
 
       n_irisR.setAttribute("class", "irisR anim"); 
 
      }; 
 

 
      window.ontouchend = function (e) { 
 
       if (e.touches.length == 0) window.onmouseout(); 
 
      } 
 

 
      window.onmousemove = function (e) { 
 
       n_irisL.setAttribute("class", "irisL"); 
 
       n_irisR.setAttribute("class", "irisR"); 
 
       var m = { 
 
        x: e.clientX - eyeL.x, 
 
        y: e.clientY - eyeL.y 
 
       }; 
 
       m.rx = 0 - m.y; 
 
       m.ry = m.x; 
 
       ["rx", "ry"].forEach(function (r) { 
 
        m[r] *= 0.1; 
 
        m[r] = Math.max(-60, m[r]); 
 
        m[r] = Math.min(60, m[r]); 
 
       }); 
 
       n_irisL.style.transform = "rotateX(" + m.rx + "deg) rotateY(" + m.ry + "deg) translateZ(68px) scale(0.6)"; 
 

 

 
       var m = { 
 
        x: e.clientX - eyeR.x, 
 
        y: e.clientY - eyeR.y 
 
       }; 
 
       m.rx = 0 - m.y; 
 
       m.ry = m.x; 
 
       ["rx", "ry"].forEach(function (r) { 
 
        m[r] *= 0.1; 
 
        m[r] = Math.max(-60, m[r]); 
 
        m[r] = Math.min(60, m[r]); 
 
       }); 
 
       n_irisR.style.transform = "rotateX(" + m.rx + "deg) rotateY(" + m.ry + "deg) translateZ(68px) scale(0.6)"; 
 

 

 

 
      }; 
 

 
      window.ontouchmove = window.ontouchstart = function (e) { 
 
       var touch = e.touches[0]; 
 
       window.onmousemove(touch); 
 
      }; 
 
     });

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #333; 
 
    position: absolute; 
 
} 
 

 
.eyeL { 
 
    width: 150px; 
 
    height: 150px; 
 
    top: calc(50% - 75px); 
 
    left: calc(50% - 270px); 
 
    background-color: #ffefe2; 
 
    box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5); 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    -webkit-perspective: 500px; 
 
      perspective: 500px; 
 
    overflow: hidden; 
 
} 
 
.eyeR { 
 
    width: 150px; 
 
    height: 150px; 
 
    top: calc(50% - 75px); 
 
    left: calc(50% - 55px); 
 
    background-color: #ffefe2; 
 
    box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5); 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    -webkit-perspective: 500px; 
 
      perspective: 500px; 
 
    overflow: hidden; 
 
} 
 

 
.eyeL .irisL { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0%; 
 
    left: 0%; 
 
    position: absolute; 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    background: -webkit-radial-gradient(center ellipse, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%); 
 
    background: radial-gradient(ellipse at center, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%); 
 
    border-radius: 100%; 
 
} 
 

 

 

 

 

 

 
.eyeR .irisR { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0%; 
 
    left: 0%; 
 
    position: absolute; 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    background: -webkit-radial-gradient(center ellipse, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%); 
 
    background: radial-gradient(ellipse at center, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%); 
 
    border-radius: 100%; 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
.eyeL .irisL.anim { 
 
    -webkit-animation-duration: 10s; 
 
      animation-duration: 10s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-name: irisL; 
 
      animation-name: irisL; 
 
} 
 

 

 

 

 
.eyeR .irisR.anim { 
 
    -webkit-animation-duration: 10s; 
 
      animation-duration: 10s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-name: irisR; 
 
      animation-name: irisR; 
 
} 
 

 
@-webkit-keyframes irisL { 
 
    0%, 100% { 
 
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    10% { 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    30% { 
 
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
    } 
 
    45% { 
 
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    55%, 60% { 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
    } 
 
    90% { 
 
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
    } 
 
} 
 

 
@keyframes irisL { 
 
    0%, 100% { 
 
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    10% { 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    30% { 
 
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
    } 
 
    45% { 
 
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    55%, 60% { 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
    } 
 
    90% { 
 
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
    } 
 
} 
 

 
@-webkit-keyframes irisR { 
 
    0%, 100% { 
 
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    10% { 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    30% { 
 
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
    } 
 
    45% { 
 
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    55%, 60% { 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
    } 
 
    90% { 
 
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
    } 
 
} 
 

 
@keyframes irisR { 
 
    0%, 100% { 
 
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    10% { 
 
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    30% { 
 
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6); 
 
    } 
 
    45% { 
 
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6); 
 
    } 
 
    55%, 60% { 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6); 
 
    } 
 
    90% { 
 
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
      transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="eyeL"> 
 
     <div class="irisL anim"> 
 
     </div> 
 
    </div> 
 
    <div class="eyeR"> 
 
     <div class="irisR anim"> 
 
     </div> 
 
    </div>