Gestion dynamique du z-index + divers effets en jquery

Dernière mise à jour le par pjcleder .

SUPERPOSITION DE DIVS AVEC EFFETS

  • CONSIGNES

Votre page doit être liée à la dernière version de jQuery (jquery-1.4.1.js).

Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/

Ensuite, placez le code suivant entre les balises <head></head> : <script type="text/javascript" src="jquery-1.4.1.js"></script>

  • HTML & jQuery

Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site :

<!DOCTYPE html>

<html>

<head>

<style>

/*Toutes les divs de cette page auront un z-index de 3. Cela signifie que tous les autres éléments ayant le même attribut css d’une valeur supérieure apparaitront devant.*/

div {

z-index:3;

}

</style>    

<script type="text/javascript" src="jquery-1.4.1.js"></script>

<script type="text/javascript">

//Récupération des dimensions de la fenêtre    

var yHeight = $(window).height();

var xWidth = $(window).width();

//Création au Chargement de la page d’une div ayant pour des dimensions égales à //celle de la fenêtre.         

$(document).ready(function(){

    var effet =jQuery("
", {

        id: "effet" ,

        css: {

        height: yHeight ,

        width: xWidth,

        position: "absolute",

        border:"1px solid #fff",

        background:"#ffff00",

        left:"0",    

        top:"0",

        opacity:"0.5"

        }                    

    }).appendTo('body');

    

    effet.fadeTo("fast",0.5);

                

});

//Série d’effets actives dés le Chargement de la page effectuée.

//La page contient donc notre div initialement construite et 4 paragraphes :

//"lorem","fin", "final" et "site".

$(function(){

//Disparition visuelle progressive à l’aide de l’attribut opacity sous le délai //indiqué.

    jQuery("#effet").animate({opacity:0},3000);

    jQuery("#lorem").animate({opacity:0},4000);

//Apparition et disparition progressive du paragraphe "fin"

    jQuery("#fin").fadeIn(10000);

    jQuery("#fin").animate({opacity:0},1000);

//Apparition progressive du paragraphe "final"

    jQuery("#final").fadeIn(20000);

//Le paragraphe "final" est initialement vide et nous allons y ajouter du html //et du texte à l’aide de la méthode append

jQuery('#site').append('');

    var temp = 6000;

    var texte = "www.patrickcleder.com";

    var extrait = texte.split("");

//Apparition progressive d’un texte découpé à l’aide de la méthode javascript //split temporisé avec un setTimeout

    for (i=0;i < extrait.length ;i++){

        setTimeout("jQuery('#site a').append('" + extrait[i * + "');",temp);

        temp+=200;

    }

setTimeout("jQuery('#site').append('

style=\"position:absolute;left:10%;font-size:20px;color:#9ACD32\">Redirection vers la page principale dans 15 secondes');",10200);

    temp = 11200;

//Ajout d’un texte apparaissant sous le forme d’un compte à rebours

    for (i=14;i > -1 ;i--){

setTimeout("jQuery('#cpt').text('Redirection vers la page principale dans " + i + " secondes');",temp);

        temp+=1000;

    }

//Redirection automatique vers la page indiqué    

    setTimeout("window.location.href='index.php';",25200);

});

</script>

</head>

<!--Premier paragraphe apparaissant sur la page entière. Notez le z-index à 2 permettant à la div (z-index :3) d’apparaitre devant. Ce paragraphe est tout de même lisible puisque l’opacité de la div a été réglée à 0.5(Semi-transparence)

-->    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna urna, varius ut molestie euismod, hendrerit ac sem. Etiam vitae libero odio. Pellentesque vitae turpis lacus. Etiam sit amet porttitor arcu. Etiam et mi vitae ligula tristique aliquet. Aliquam erat volutpat. Suspendisse semper sem vel neque luctus eget dictum dui malesuada. Mauris mollis nulla vitae elit volutpat eu rhoncus urna blandit. Suspendisse vehicula lobortis fermentum. Duis aliquam fringilla dapibus.

Aliquam consectetur, tortor sit amet tincidunt posuere, elit ante tincidunt mauris, sit amet condimentum sapien ante id nisl. Donec a risus non ligula molestie tempus. Proin arcu quam, consectetur ut egestas nec, pretium ut eros. Fusce enim lacus, pulvinar a volutpat lobortis, hendrerit a eros. Suspendisse dictum porttitor turpis ac laoreet. Aenean augue justo, pretium at suscipit eu, lobortis a tortor. Cras nibh ipsum, mollis vel mattis eu, consequat nec justo. Duis interdum odio suscipit tellus tristique in aliquet leo auctor. Nullam ac enim ante. Curabitur imperdiet turpis a lectus congue ut volutpat ligula hendrerit. Duis libero lectus, lacinia ac faucibus viverra, aliquam non metus. Cras tempus lorem a velit lacinia imperdiet eleifend nibh facilisis. Sed id felis eget lectus volutpat lacinia ut sed arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eget orci ac augue feugiat placerat at eu sapien. Integer volutpat consequat commodo. Aliquam erat volutpat. Mauris aliquet odio sit amet sem dignissim at suscipit enim convallis. Etiam mi augue, euismod vitae semper eu, tempus nec elit. Nunc vel dolor at ligula aliquet euismod. Curabitur suscipit pretium ante, eget vehicula magna consequat non. Pellentesque vehicula pulvinar lobortis. Nullam et metus massa. Aenean non urna eget lectus convallis tristique. Vivamus ultricies nisl at ligula eleifend gravida. Fusce sed sem urna, lacinia tincidunt nisi. Mauris eros urna, rutrum eget elementum ac, eleifend vitae erat. Proin id enim mauris, sed ullamcorper tortor. Fusce sollicitudin velit ac odio blandit sed posuere metus interdum. Nullam purus nibh, convallis quis porttitor sed, consectetur eu odio. Nulla in eros sem.

Aliquam tempor tincidunt augue, eget tincidunt velit egestas at. Fusce a magna mauris, eu suscipit turpis. Donec ullamcorper facilisis neque at pretium. Donec euismod, elit at venenatis consequat, leo diam facilisis nibh, a tincidunt odio erat rhoncus ipsum. Aenean vel orci non dui luctus consectetur. Vestibulum ultricies pulvinar scelerisque. Vivamus nec posuere erat. Vestibulum accumsan magna at mauris commodo nec bibendum erat tempor. Integer risus erat, vestibulum non mattis nec, tincidunt non neque. Donec volutpat velit vel erat tempor a imperdiet turpis congue. Praesent non mauris et ante rhoncus imperdiet. Etiam felis dui, venenatis interdum vestibulum vel, laoreet at urna.

Etiam sodales sollicitudin suscipit. Vivamus eget eros lorem, ac suscipit nunc. Duis ultrices sodales tellus, in consectetur ante ullamcorper non. Duis sit amet imperdiet enim. In sed magna ipsum. Maecenas justo massa, tincidunt a molestie a, ultricies vel sapien. Fusce sed mi risus. Maecenas condimentum lacus adipiscing elit eleifend ullamcorper. Duis non nisi mauris, a ullamcorper diam. Duis ut orci nec mauris ultricies aliquet. Duis non felis dolor. Aliquam tincidunt eleifend urna, eu suscipit nisi scelerisque at. Morbi lectus nulla, aliquet sit amet suscipit hendrerit, eleifend vel est.

Morbi ut lobortis lacus. Vestibulum nec lacus sed urna gravida laoreet. Duis pulvinar pharetra neque ut imperdiet. Maecenas a metus nibh, sed dignissim nulla. Fusce vitae mauris sit amet nibh viverra aliquam non convallis dolor. Fusce ultricies accumsan augue sit amet bibendum. Vestibulum luctus sollicitudin tellus, at tristique metus lobortis vitae. Quisque lacinia rhoncus mattis. Sed porta tortor eget elit ultrices aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vel diam eget nibh vulputate viverra. Nunc sollicitudin lacinia eros at pulvinar. Nulla placerat neque sit amet nibh lobortis vitae malesuada leo ullamcorper. Aliquam tempor egestas felis, sit amet mollis erat placerat id. Vestibulum ornare tincidunt velit a tristique. Quisque sed rutrum lorem. Sed facilisis consequat libero ut rhoncus. Nullam tempus pharetra diam eu posuere. Morbi suscipit laoreet laoreet.

Sed ut nunc eu leo tempus consectetur in non dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nisi turpis, malesuada sed semper a, bibendum ac quam. Donec laoreet ligula sit amet nisl semper quis pretium justo placerat. Quisque eget nibh ac est vulputate consequat. Ut lacinia lorem quis dolor blandit blandit. Pellentesque ac ipsum elit. Etiam elit nunc, sagittis sollicitudin iaculis nec, ornare id mauris. Curabitur quis turpis lacus, ut posuere lectus. Pellentesque libero purus, interdum sed scelerisque vel, bibendum ut massa. Mauris ultrices sagittis velit, sit amet aliquet libero eleifend sit amet.

Aenean ac lectus nisl, condimentum ultricies turpis.

<!--Les paragraphes "fin" et "final" ont l’attribut display réglé sur none pour ne pas apparaitre immédiatement.(La méthode fadeIn les rendra visibles)-->

Cette page peut vous inspirer pour jouer avec la superposition et l'apparition successive d'éléments dans le cadre de vos animations

Affichez le code source ou recevez le tutoriel commenté par mail en cliquant ici pour accéder à la page de script à la demande !

<!--Ce dernier paragraphe ne contient aucun texte au départ-->

</html>

Page de démonstration : http://www.patrickcleder.com/tuto_6.php

Adresse d'origine

Ce document intitulé « Gestion dynamique du z-index + divers effets en jquery » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Déroulez/enroulez vos bannières google adsense
La plus simple des galeries photo en jquery !
Rejoignez-nous