DOMAssistant-doScroll : animez vos blocs simplement
Toujours dans le but d'améliorer l'ergonomie et l'agrément des visites sur vos pages, voici un tout nouveau plugin pour la librairie DOMAssistant qui vous permettra de transformer le contenu d'un élément défini d'une page en un bloc défilant de gauche à droite dans le style carousel...
Fonctionnalités
doScroll transforme automatiquement tous les blocs de niveau 1 d'un élément de page (i.e. tous les blocs dont le parent direct est cet élément) en colonnes et rend l'ensemble « scrollable » .
- Redimensionnement des colonnes au redimensionnement de la page.
- Possibilité d'appeler une colonne donnée au chargement de la page ou via un lien depuis le contenu.
- Largeur des colonnes configurable en % du bloc parent ou en pixels.
- Matérialisation des liens par des images modifiables via CSS.
Mise en oeuvre
pré-requis
Inclusion des scripts
<script type="text/javascript" src="path/to/scripts/DOMAssistantCompressed-2.7.4.js"></script> <script type="text/javascript" src="path/to/scripts/DOMAssistant-doScroll.js"></script>
Code html
<div id="toScroll"> <p>col 1</p> <div>col 2</div> <ul> <li>col 3</li> <li>col 3</li> </ul> <p>col 4</p> </div>
Lancer le script
Dans la page ou dans un script inclus :
DOMAssistant.DOMReady(function () {
$$("toScroll").doScroll({
"minPartWidth" : 100, /*col width ("100" = 100% - "100px" = 100 pixels*/
"marginLeftandRight" : 150, /*margin width (px)*/
"speed" : 80 /*anim speed*/
});
});
Télécharger DOMAssistant-doScroll
Des exemples de mise en oeuvre sont disponibles dans l'archive.
Cliquez sur l'icône ci-contre...
Labo