Eyeball

eyeball.markdown

Eyeball

This eyeball will follow your mouse on screen. Enjoy!

A Pen by Conner on CodePen.

License.

index.pug

#stage
  #ball
    #iris

script.js

var iris = document.getElementById('iris'),
    sclera = document.getElementById('ball'),
    delay = 0.5,
    offsetRadius = ((Math.PI / 180) * 90),
    posX, posY, offsetX, offsetY, containX, containY, translateX, translateY;

window.addEventListener('mousemove', function(e){
    posX = e.clientX;
    posY = e.clientY;
});

function moveEye(){
    var windowWidth = document.body.offsetWidth,
        windowHeight = document.body.offsetHeight,
        x, y;
    translateX = posX - windowWidth / 2;
    translateY = posY - windowHeight / 2;
    offsetX = (translateX > windowWidth / 4 || translateX < -windowWidth / 4) ? 1 : 2;
    offsetY = (translateY > windowHeight / 3 || translateY < -windowHeight / 3) ? 1 : 2;
    containX = (translateX > windowWidth / 30 || translateX < -windowWidth / 30) ? 80 : 10;
    containY = (translateY > windowHeight / 25 || translateY < -windowHeight / 25) ? 80 : 10;

    x = offsetRadius - Math.atan2(translateX, translateY);
    x = Math.cos(x) / offsetX;
    x *= containX;

    y = offsetRadius - Math.atan2(translateX, translateY);
    y = Math.sin(y) / offsetY;
    y *= containY;

    iris.prefixedStyle('transform', 'translateX('+x+'%) translateY('+y+'%) rotateX('+y / -1.5+'deg) rotateY('+x / 1.5+'deg)');
    iris.prefixedStyle('transition', delay + 's');
    ball.prefixedStyle('transform', 'translateX('+x / -10+'px)');
}
Element.prototype.prefixedStyle = function(property, style){
    var prefixes = ['webkit', 'moz', 'o'],
        i = 0;
    property = property.charAt(0).toUpperCase() + property.slice(1);
  
    while (prefix = prefixes[i++]){
        this.style[prefix + property] = style;
    }
};

window.setInterval(function(){
    moveEye();
}, delay * 400);

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

@import "compass/css3";

$size: 350px;
$irisColor: #4381b2; 
$bgColor: #BDC3C7; 


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: $bgColor;
}

#stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: $size;
    height: $size;
    display: block;
    margin: auto;
    z-index: 1;
    @include transform(translateX(-50%) translateY(-50%));
    @include perspective($size * 4);
    @include perspective-origin(50% 50%);
    &:before { // Shadow
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        @include background-image(radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 65%));
        @include transform(rotateX(90deg) translateZ(-$size / 2));
	    }
}

#ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    @include transition(0.5s);
    @include background-image(radial-gradient(50% 40%, circle cover, #fff, #eee 65%, #777 100%));
    &:after { // light source
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 5%;
        right: 10%;
        border-radius: 50%;
        @include background-image(radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7) 18%, rgba(255, 255, 255, 0) 30%));
        @include transform(translateX($size / 3.5) translateY(-$size / 3.3) skewX(20deg));
    }
}

#iris {
    position: absolute;
    width: 45%;
    height: 45%;
    margin: 27.5%;
    border-radius: 50%;
    @include background-image(radial-gradient(50% 50%, circle cover, $irisColor 0%, $irisColor 35%, darken($irisColor, 15%) 65%, darken($irisColor, 30%) 75%));
    @include transform(translateX(0) translateY(0) skewX(0) skewY(0));
    &:before { // Pupil stuff
        content: "";
        display: block;
        position: absolute;
        width: 37.5%;
        height: 37.5%;
        border-radius: 100%;
        top: 31.25%;
        left: 31.25%;
        background: black;
    }
}