Skip to content

Instantly share code, notes, and snippets.

@EarMaster
Created June 24, 2014 16:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EarMaster/935846a9d919cc6d8224 to your computer and use it in GitHub Desktop.
Save EarMaster/935846a9d919cc6d8224 to your computer and use it in GitHub Desktop.
The Simpsons in CSS with a little JS
(function () {
var mouse = { x: 0, y: 0 };
document.addEventListener('mousemove', function (event) {
mouse.x = (event.clientX || event.pageX)/window.innerWidth;
mouse.y = (event.clientY || event.pageY)/window.innerHeight;
}, false);
// shim layer with setTimeout fallback
// @see http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
requestAnimFrame(animloop);
[].forEach.call(
document.querySelectorAll('.eye,.left-eye,.right-eye'),
function (eye) {
var pupil = eye.querySelector('.pupil,.left-eye-pupil,.right-eye-pupil');
pupil.style.position = 'relative';
pupil.style.left = ((0.325+0.35*mouse.x)*100)+'%';
pupil.style.top = ((0.325+0.35*mouse.y)*100)+'%';
}
);
})();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment