Cloud effect

Principe :

Animation de l’opacité de 4 images PNG supperposées avec jQuery.

HTML code :


<div id="cloud_effect1">
    <p id="rwControls">
        <a id="rwPlay" class="rwBtn" style="display: none;">Play animation</a>
        <a id="rwStop" class="rwBtn">Stop animation</a>
    </p>

    <div class="cloud" id="yellow"><img src="/demos/cloud_effect1/cloud-yellow.png" alt="yellow" /></div>
    <div class="cloud" id="red"><img src="/demos/cloud_effect1/cloud-red.png" alt="red" /></div>
    <div class="cloud" id="green"><img src="/demos/cloud_effect1/cloud-green.png" alt="green" /></div>
    <div class="cloud" id="blue"><img src="/demos/cloud_effect1/cloud-blue.png" alt="blue" /></div>

</div>

Javascript code :


function loopColor(pSelector, pOpacity, pTime1, pTime2){

    $(pSelector).animate({opacity: pOpacity}, pTime1, function() {
                $(pSelector).animate({opacity: 0}, pTime2);
    });

}

$(document).ready(function(){



	$("#yellow").animate({opacity: 0}, 0);
	$("#red").animate({opacity: 0}, 0);
	$("#green").animate({opacity: 0}, 0);
	$("#blue").animate({opacity: 0}, 0);

        var timer1;
        var timer2;
        var timer3;
        var timer4;

        function startCloud() {
            
            // display firstly :

            $('#yellow').animate({opacity: 0.7}, 1000, function() {
                $('#yellow').animate({opacity: 0}, 2000);
            });
            $('#blue').animate({opacity: 0.7}, 2000, function() {
                $('#blue').animate({opacity: 0}, 2000);
            });

            // then looping :
            
            timer1 = setInterval("loopColor('#yellow', '0.9', '3000', 1000)", 1200);
            timer2 = setInterval("loopColor('#red', '0.7', '2000', 1000)", 2200);
            timer3 = setInterval("loopColor('#green', '0.8', '2000', 1500)", 2700);
            timer4 = setInterval("loopColor('#blue', '0.6', '2300', 1700)", 3200);
            
        }
        
        startCloud();

        $('a#rwPlay').click( function() {
            $(this).hide();
            $('a#rwStop').show();

            startCloud();
        });

        $('a#rwStop').click( function() {
            $(this).hide();
            $('a#rwPlay').show();
            clearInterval(timer1);
            clearInterval(timer2);
            clearInterval(timer3);
            clearInterval(timer4);
        });






});

CSS code :


div#cloud_effect1 {
    position: relative;
    width: 100%;
    text-align: center;
    
}

div.cloud {
position:absolute;
top: 0px;
left: 10%;
}

#content {
    overflow: hidden;
    height: 500px;
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *