• Eklaslide.js

    1. Présentation

    Je vous ai préparé une petite classe javascript pour réaliser un slider de contenu html. Il peut donc comporter des images, du texte, du javascrit etc...

    C'est un slider qui comporte deux éléments, celui de gauche et celui de droite et dont vous pouvez paramétrer le temps des animations ainsi que les rotations dans les 3 directions.

    2. Mise en place

    Pour faire fonctionner ce slider, il faut charger les script suivants:

    Enregistrez ces deux fichiers parmi ceux de votre blog en leur donnant le nom des boutons ci-dessus.

    A noter que pour faire fonctionner ce slider dans l'entête de votre blog, tout le code suivant devra être placé dans un module simple html. Si par contre vous voulez placer le slider dans un article ou une page simple, alors vous placerez directement les codes dans l'article ou la page.

    Pour charger ces scripts, il suffit d'écrire:

    <script src="url du fichier Velocity.js"></script>
    <script src="url du fichier DualSlider.js"></script>

    3. Définition du slider

    La structure html est la suivante et est organisée à partir de balises div, ce qui permet d'y placer tout ce que l'on souhaite.

    Le conteneur doit avoir la classe eklaslide. Il comporte des conteneurs de classe itemslide qui contiennent eux-mêmes deux div de classe respective item_left et item_right. Ces dans ces deux dernières div que vous placerez le contenu que vous voulez voir défiler.

    Cela nous donne:

    <div class="eklaslide">
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 1er slide</div>
    		<div class="item_right">Contenu à droite du 1er slide</div>
    	</div>
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 2ème slide</div>
    		<div class="item_right">Contenu à droite du 2ème slide</div>
    	</div>
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 3ème slide</div>
    		<div class="item_right">Contenu à droite du 3ème slide</div>
    	</div>
    	....
    </div>

    4. Le CSS

    Le CSS par défaut est le suivant. Il faudra l'adapter en fonction de votre blog et de vos envies. En particulier width et height. 

    La Propriété overflow doit être à hidden.

    Il faudra peut-être aussi modifier bottom et left selon la position que vous voulez adopter pour le slider (en particulier dans le header). Ici il est placé en bas à gauche et fait la largeur du blog (974px).

    .eklaslide{    
        width:974px;
        height:220px;
        overflow:hidden;
        background-color:white;
        color:black;
        position:absolute;
        bottom:0;
        left:0;}

    Il vous est bien entendu possible d'ajouter du css pour les classes item_left et item_right.

    5. Les options

    Les options possibles sont les suivantes:

      HEADER:true          // true si doit être positionné dans le header
      DUREE_ANIM:2500      // durée d'une animation
      DELAI_1:1200         // délai lancement itemde gauche
      DELAI_2:1500         // délai lancement item de droite
      TEMPS_AFFICHAGE:4500 // temps de pause avant slide suivant
      SLIDE_SUIVANT:8000   // durée pour le lancement de l'item suivant
      RX:'360deg'          // Rotation selon X de l'image
      RY:'360deg'          // Rotation selon X de l'image
      RZ:'180deg',         // Rotation selon X de l'image
      FORCE:'300'          // Force appliquée pour la transition (max 500)
      AMORTI:'15'          // amortissement 

    Bien entendu, vous n'avez qu'à indiquer les options que vous souhaitez. Inutile de toutes les écrire si elles ne servent pas. De DUREE_ANIM à SLIDE_SUIVANT, ce sont les temps (en millisecondes) pour les animations et les transitions. Faites des essais pour voir ce que vous préférez.

    RX, RY, RZ sont les rotations dans les trois directions appliquées aux différents slides. Par exemple, lorsqu'un slide avec les options ci-dessus arrive, pendant son déplacement, il tourne de 360° selon X, 360° selon Y et 180° selon Z.

    FORCE et AMORTI sont les paramètres qui vont donner un effet linéaire ou élastique aux transitions. Pour avoir un effet élastique, on choisira une valeur faible pour AMORTI (par exemple 10). Si on le combine avec une FORCE de 300 par exemple, l'élément aura un comportement de ressort.

    Lorsque le slide s'en va, ce sont les mêmes effets mais inversés qui sont appliqués.

    6. Lancer le script

    Une fois les scripts chargés et le html réalisé, on va lancer le script du slider. Pour cela on le placera à la fin. Il ressemblera à ceci:

    <script>// <![CDATA[
    onJSFilesLoaded.push(function(){
    	var monslide=new EklaSlide('eklaslide');
    	var options = {
    		HEADER:true, // true si doit être positionné dans le header
    		DUREE_ANIM:2500, // durée d'une animation
    		DELAI_1:1200,    // délai lancement itemde gauche
    		DELAI_2:1500,    // délai lancement item de droite
    		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
    		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
    		RX:'360deg',     // Rotation selon X de l'image
    		RY:'360deg',     // Rotation selon X de l'image
    		RZ:'180deg',   // Rotation selon X de l'image
    		FORCE:'300',   // Force appliquee pour la transition >500
    		AMORTI:'15'    // amortissement 
    		};
    	monslide.init(options);
    });
    // ]]></script> 

    7. Un exemple complet

    Tout cela mis bout à bout nous donne:

    <script src="url du fichier Velocity.js"></script>  //Placez l'url de votre fichier
    <script src="url du fichier DualSlider.js"></script>//Placez l'url de votre fichier
    <div class="monslide">
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 1er slide</div>
    		<div class="item_right">Contenu à droite du 1er slide</div>
    	</div>
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 2ème slide</div>
    		<div class="item_right">Contenu à droite du 2ème slide</div>
    	</div>
    	<div class="itemslide">
    		<div class="item_left">Contenu à gauche du 3ème slide</div>
    		<div class="item_right">Contenu à droite du 3ème slide</div>
    	</div>
    </div>
    <style>
    .monslide{    
        width:974px;
        height:220px;
        overflow:hidden;
        font-family: kaushan-script, cursive;
        font-size:1em; 
        background-color:white;
        color:black;
        position:absolute;
        bottom:0;
        left:0;}
    </style>
    <script>// <![CDATA[
    onJSFilesLoaded.push(function(){
    	var slider=new EklaSlide('monslide');
    	var options = {
    		HEADER:false, // true si doit être positionné dans le header
    		DUREE_ANIM:2500, // durée d'une animation
    		DELAI_1:1200,    // délai lancement itemde gauche
    		DELAI_2:1500,    // délai lancement item de droite
    		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
    		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
    		RX:'360deg',     // Rotation selon X de l'image
    		RY:'360deg',     // Rotation selon X de l'image
    		RZ:'180deg',   // Rotation selon X de l'image
    		FORCE:'300',   // Force appliquee pour la transition >500
    		AMORTI:'15'    // amortissement 
    		};
    	slider.init(options);
    });
    // ]]></script> 

    8. Améliorations

    J'ai écrit ce script assez rapidement: il souffre donc surement d'imperfections, probablement de quelques bugs. Je compte sur vous pour me les remonter.

    Par la suite, j'envisage d'y ajouter des boutons de contrôle et de développer d'autres types de sliders pour les blogs Eklablog.  


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter