2番目のアニメーションの目のための重複コード

Question

私はjavascriptを学び始めました。私はcodepenでコードを拡張しようとしています。

今、私はこの目を複製して、2つの目が私のカーソルに追従するようにしています。私は別の変数ともキーフレームアニメーションで全機能を複製するために始めたが、私は、これはそれを行うには正しい方法ではありません推測しても、それは働いていない。..

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); 
}; 

誰かが私を助けることができますこっちで？私はこのことがどうやって行われるべきかを正確かつクリーンな方法に興味があります...

ありがとう！

Answer 1

あなたのcss jqqueryとhtmlが変更されました。見てみましょう。必要に応じて目の位置を変更してください。

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