Pdf/BaladeNature/Js/balade_nature.js
author Patrick PIERRE
lun., 18 mars 2013 13:35:48 +0100
changeset 81 a5c597d9a1f3
parent 74 58e48a5c5ca2
child 94 d8344a68c91f
permissions -rw-r--r--
Ajout d'une animation
patrick@17
     1
// $Id$
patrick@17
     2
// balade_nature
patrick@17
     3
patrick@17
     4
var text = null;
patrick@17
     5
var spot = null;
patrick@17
     6
var box = null;
patrick@17
     7
var boxProperty = '';
patrick@17
     8
patrick@17
     9
patrick@17
    10
window.addEvent('domready', function(){
Patrick@74
    11
    // Hotspots
patrick@17
    12
    (function initialize() {
Patrick@74
    13
        var scenario;
Patrick@74
    14
        var content;
Patrick@74
    15
        $$(".pdocHotspot").each(function(hotspot) {
Patrick@74
    16
            scenario = hotspot.getElement("span");
Patrick@74
    17
            content = $(hotspot.get('id').replace("x", "z"))
Patrick@74
    18
            if (scenario && content) {
Patrick@74
    19
                
Patrick@74
    20
                hotspot.addEvent("click", function() {
Patrick@74
    21
                    var content = $(this.get('id').replace("x", "z"));
Patrick@74
    22
                    content.setStyles({"opacity": 0, "display": "block"});
Patrick@74
    23
                    this.setStyle("display", "none");
Patrick@74
    24
                    content.tween("opacity", 1);
Patrick@74
    25
                    (function() {
Patrick@74
    26
                        content.setStyle("display", "none");
Patrick@74
    27
                        hotspot.setStyle("display", "block");
Patrick@74
    28
                    }).delay(12000);
Patrick@74
    29
                });
patrick@17
    30
Patrick@74
    31
                content.addEvent("click", function() {
Patrick@74
    32
                    this.setStyle("display", "none");
Patrick@74
    33
                    $(this.get('id').replace("z", "x"))
Patrick@74
    34
                        .setStyle("display", "block");
Patrick@74
    35
                });
patrick@17
    36
            }
patrick@17
    37
        });
Patrick@74
    38
    }).delay(100);
patrick@17
    39
     
patrick@17
    40
    // Effect: glow
patrick@17
    41
    var effectGlow = $("effectGlow");
patrick@17
    42
    if (effectGlow) {
patrick@17
    43
        text = $("effectGlowText");
patrick@17
    44
        spot = $("effectGlowSpot");
patrick@17
    45
        box = $("effectGlowBox")
patrick@17
    46
        if (typeof box.style.webkitBoxShadow == 'string') {
patrick@17
    47
            boxProperty = 'webkitBoxShadow';
patrick@17
    48
        } else if (typeof box.style.MozBoxShadow == 'string') {
patrick@17
    49
            boxProperty = 'MozBoxShadow';
patrick@17
    50
        } else if (typeof box.style.boxShadow == 'string') {
patrick@17
    51
            boxProperty = 'boxShadow';
patrick@17
    52
        }
patrick@17
    53
patrick@17
    54
        if (text && spot && box) {
patrick@17
    55
            effectGlow.onmousemove = onMouseMove;
patrick@17
    56
            effectGlow.ontouchmove = function (e) {
patrick@17
    57
                e.preventDefault();
patrick@17
    58
                e.stopPropagation();
patrick@17
    59
                onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});
patrick@17
    60
            }
patrick@17
    61
        }
patrick@17
    62
    }
patrick@17
    63
});
patrick@17
    64
patrick@17
    65
patrick@17
    66
function onMouseMove(e) {
patrick@17
    67
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
patrick@17
    68
        return;
patrick@17
    69
    }
patrick@17
    70
    
patrick@17
    71
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
patrick@17
    72
    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
patrick@17
    73
    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
patrick@17
    74
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
patrick@17
    75
    
patrick@17
    76
    if (boxProperty) {
patrick@17
    77
        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
patrick@17
    78
    }
patrick@17
    79
    
patrick@17
    80
    xm = e.clientX - Math.floor(window.innerWidth / 2);
patrick@17
    81
    ym = e.clientY - Math.floor(window.innerHeight / 2);
patrick@17
    82
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
patrick@17
    83
}
patrick@17
    84