skyVA/main.js at master · erfanva/skyVA · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var initialDeg = -30;
var initialLeft = 100;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$(document).ready(function(){
    var top = $(window).scrollTop();
    var maxTop = $(document).height() - $(window).height();
    var ratio = top/maxTop;

    // Sun & Moon
    var angle = (180 - 2*initialDeg) * ratio + initialDeg;
    $('#skyva-sm-container').height(2*$(window).height());
    $('#skyva-sm-container').rotate(angle);

    // Clouds
    var left = ($(window).width() - 2*initialLeft) * ratio + initialLeft;
    $('#skyva-cloud-container').css({left: left + "px"});
    console.log("(angle:", angle, "left:", left,")");

    // Light
    $('#skyva-light-container').css('opacity', ratio*0.5);

    $(window).scroll(function() {
        top = $(window).scrollTop();
        maxTop = $(document).height() - $(window).height();
        ratio = top/maxTop;

        // Sun & Moon
        var angle = (180 - 2*initialDeg) * ratio + initialDeg;
        $('#skyva-sm-container').height(2*$(window).height());
        $('#skyva-sm-container').rotate(angle);

        // Clouds
        var left = ($(window).width() - 2*initialLeft) * ratio + initialLeft;
        $('#skyva-cloud-container').css({left: left + "px"});
        console.log("(angle:", angle, "left:", left,")");

        // Light
        $('#skyva-light-container').css('opacity', ratio*0.5);
    });
});