Un slider avancé avec jQuery, JSTween - Création d'un plugin
Bonjour à tous,
d'abord je tiens à préciser que je ne suis pas dévellopeur mais avant tout webdesigner et débutant en javascript.
Je travail à la création d'un spider un peu complexe et je ne suis pas très loin du résultat escompté. :D
Voici le modèle dont je m'inspire (l'excellent site) :www.kyan.com
(en haut du site)
Je souhaites donc créer un slider:
- dont chaque élément inclus dans les slides pourrais être animé séparément et selon ces propres paramètres
- que chacun de ces paramètres puissent êtres inclus dans des balises attribut à l'intérieur même du html, soit par des paramètres globaux intégrés dans des attributs du conteneur, soit directement par les attr des différentes div qui compose l'animation en cours
syntaxe du html :
Code:
<div id="inslide" easeDep='sineInOut' easeRet='easeOut' easeOp='' dur='200' xDep='430' xFin='120' yDep='600' yFin='100' opDep='0' opFin='100'>
ou xDep est la position de départ, xFin la position d'arrivée, etc
avec trois types de critères d'animation left, top, opacité et comme paramêtres durée, type de transition etc.
- qu'avec un certain balisage html le slider se génère automatiquement, avec chacun de ces slides
on peut dire que je suis (pratiquement) arrivé au résultat souhaité. voici un lien : ici le résultat en direct
télécharger un zip de la source :
ici les fichiers sources
Mon ambition maintenant est d'optimiser les performances de mon script, et là j'ai besoin de l'aide de pros, et de mettre cette extension en libre service à la disposition de tous !
Car il me semble que cela peut plaire à pas mal de webdesigners qui ne veulent pas trop se prendre la tête avec du JS
mes questions :
- j'ai un problème de fluidité arrivé au dernier slide, pk ? et comment ?
- qui est intérressé pour m'aider à fignoler ce (super) machin ?
- je désactive les boutons suivants et précédents pendant que l'animation est en cours, pour ne pas créer de conflits, mais cette option n'est pas top, je préfèrerais pouvoir accéder aux boutons suivant et précédents à tout moment
=> comment faire
- je suis débutant en JS, donc forcement je n'ai pas du utiliser la meilleur méthode, et là vos conseils de pro sont les bienvenus
Merci par avance aux intéressés :ccool:
ps : j'ai aussi réalisé une version qui fonctionne avec css3, pour ceux souhaitent
