codepens/lonely-little-box/dist/script.js

89 lines
2.4 KiB
JavaScript

var rotationLimiter = 30;
var timerIID;
var cubie = $('.box'),
cubieSad = $('svg#cubie .sadface'),
cubieHappy = $('svg#cubie .happyface'),
cubieFaceLt = $('.face.lt'),
cubieFaceRt = $('.face.rt'),
cubieFaceBm = $('.face.bm'),
cubieFaceTp = $('.face.tp');
// cubie is fascinated by mousepointers :D
$(document).mousemove(function(e) {
clearInterval(timerIID);
cubieSad.attr("class", "sadface hidden");
cubieHappy.attr("class", "happyface");
var docX = $(document).width(),
docY = $(document).height(),
rotateX = -(((e.pageY / docY) * (rotationLimiter * 2)) - rotationLimiter),
rotateY = ((e.pageX / docX) * (rotationLimiter * 2)) - rotationLimiter;
lighting(rotateX, rotateY, 0.14, 'Power0.easeIn');
TweenMax.to(cubie,0.14,{
rotationX: rotateX,
rotationY:rotateY,
ease:Power0.easeIn
});
});
// leaving the viewport causes cubie to get depressed and go into panicmode, poor cubie :(
$( "html" ).mouseout(function() {
panic();
timerIID = setInterval('loop();', getRandomInt(300,1000));
});
// cubie's lighting
function lighting(rotationX, rotationY, duration, ease) {
TweenMax.to(cubieFaceLt,duration,{
backgroundColor: 'hsl(0, 0%, ' + (80 + rotationY) + '%)',
ease:ease
});
TweenMax.to(cubieFaceRt,duration,{
backgroundColor: 'hsl(0, 0%, ' + (80 - rotationY) + '%)',
ease:ease
});
TweenMax.to(cubieFaceBm,duration,{
backgroundColor: 'hsl(0, 0%, ' + (80 - rotationX) + '%)',
ease:ease
});
TweenMax.to(cubieFaceTp,duration,{
backgroundColor: 'hsl(0, 0%, ' + (80 + rotationX) + '%)',
ease:ease
});
}
// cubie's panicmode
function panic() {
var rotX = getRandomInt(-rotationLimiter, rotationLimiter),
rotY = getRandomInt(-rotationLimiter, rotationLimiter);
lighting(rotX, rotY, 0.4, 'Power3.easeInOut');
cubieSad.attr("class", "sadface");
cubieHappy.attr("class", "happyface hidden");
//console.log("noooooo! please come back! :'(");
TweenMax.to($('.box'), .4, {
rotationX: rotX,
rotationY: rotY,
ease:Power3.easeInOut
});
}
//random interval for panicmode
function loop() {
panic();
clearInterval(timerIID);
timerIID = setInterval('loop();', getRandomInt(300,1000));
}
timerIID = setInterval('loop();', getRandomInt(300,1000));
//handy functions
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}