Il parait que 2012 sera l’année des sites ludiques et dynamiques, proposant des éléments mobiles dans leurs interfaces.
Et pour créer une réelle sensation de profondeur et de mouvements, quoi de mieux que de créer des ombres qui changent d’orientation lors du déplacement des éléments.
C’est ce que Daniel Kurdoghlian a réalisé avec une image PNG transparente et un peu de code JS avec jQuery.
Le code est relativement simple pour un effet que je trouve assez sophistiqué :
function moveShadow(){
lightX = parseInt(lightbulb.offset().left) + lightCenterX;
lightY = parseInt(lightbulb.offset().top) + lightCenterY;
logoX = parseInt(logo.offset().left) + logoCenterX;
logoY = parseInt(logo.offset().top) + logoCenterY;
distanceX = logoX - lightX;
distanceY = logoY - lightY;
distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
shadowDistance = distance * shadowOffset;
shadowPosLeft = (distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";
shadowPosTop = (distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";
logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });
}
Pour en savoir plus, rendez vous sur le site et testez la démo.