iPad shine effect using CSS3 and JavaScript

Nowadays, CSS3 and JavaScript combined together make some awesome effects and the one that we are showing todays is one of them. Tom Giannattasio has putted a few lines of JavaScript code together to make a iPad shiny effect. He used the power of CSS3 and played with gradients, masks, box shadows and transforms.

The code is quite explanatory and currently works best (only) in webkit browsers (Safari, Chrome). The code is provided bellow and feel free to modify it to suite your needs or upgrade it.

$(document).ready(function() {
    $(document).mousemove(function(e) {
        var horizontal = e.pageX / $(document).width();
        var vertical = e.pageY / $(document).height();
        $('.ipad').css({
            '-webkit-transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg) rotateY(' + ( - 10 + (horizontal * 20)) + 'deg)'
        });
        $('.specular').css({
            'background-position': ( - 200 + (horizontal * -500)) + 'px ' + ( - vertical * 600) + 'px',
            'opacity': 1 - (horizontal * .45) - (vertical * .45)
       });
        $('.home-btn').css({
            'background': '-webkit-linear-gradient(-' + (80 - horizontal * 20) + 'deg, transparent 50%, rgba(255, 255, 255, .05) 50.1%, rgba(255, 255, 255, ' + (.4 - (horizontal * .1) - (vertical * .1)) + '))'
        });
        $('.ipad.white .home-btn').css({
            'background': '-webkit-linear-gradient(-' + (80 - horizontal * 20) + 'deg, rgba(0, 0, 0, ' + (.05 + (horizontal * .05) + (vertical * .05)) + '), rgba(0, 0, 0, 0) 50%, transparent 50.1%)',
            '-webkit-box-shadow': '0 0 1px rgba(0, 0, 0, .1)'
        });
        $('.shadow').css({
            '-webkit-transform': 'rotateX(' + (65 + (vertical * 20)) + 'deg) rotateY(' + (10 - (horizontal * 20)) + 'deg) skewX(-15deg)'
        });
    }
});

To get this in your page you can view source and copy the HTML, CSS (base.css) and JavaScript code and make your working example.

iPad shine effect with CSS3 and JavaScript: Preview

iPad shine effect with CSS3 and JavaScript

Demo

Related Posts

CSS3 pulse effect

Write your text in ticker type effect: jTicker

Leave a Reply