begin process at 2012 02 14 07:48:53
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > DYNAMIQUE.JS POUR FAIRE DE JOLIE ANIMATION ))

DYNAMIQUE.JS POUR FAIRE DE JOLIE ANIMATION ))


 Information sur la source

Note :
Aucune note
Catégorie :Graphique Classé sous :animation, dynamique, graphique Niveau :Initié Date de création :23/08/2008 Date de mise à jour :28/08/2008 19:33:34 Vu / téléchargé :10 173 / 1 001

Auteur : Kimjoa

Ecrire un message privé
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Librairie d'animation compatible prototype, basé sur une structure JSON.
Plein d'interpolation, une syntaxe intuitive, et une définition proche de celle d'un logiciel d'animation, avec définitions de piste et keyframing.
Reste encore quelque beug, au niveau des replayInverse pour l'animation, ainsi que les fonctions onStart.
Reste a faire la fonction affectContent , plus les reports proportionné du contenue si reportOrigine définit. Dimanche ou en début de semaine, j'espère avoir finit ce script, la doc est pour le moment assé peu détaillé, rdv dans quelque jours pour la version 1.

Source

  • //construction de la json des animations,on lui indique l'id de l anim + le delay + les replay //(replay , replayLessDelay, replayInverse, replayInverseLessDelay)
  • structureColor=[{
  • id:'color',
  • delay:0,
  • //tableau d'effet (tout effet pouvant etre animé au format javascript //ex:paddingTop,borderColor ...)
  • effects:[{
  • effect:'backgroundColor',
  • startValue:'#5e6fa1',//valeur de départ
  • key:[{ //tableau de clé (frame)
  • value:'#ff3587',//valeur de la clé
  • duration:3000,//durée en millisicond
  • interpolation :{//interpollation voir la fin du code source pour //connaitre toute les possibilité
  • type : 'spline'
  • }
  • },{
  • value:'#5e6fa1',
  • duration:3000,
  • interpolation :{
  • type : 'spline'
  • }
  • }]
  • }]
  • }];
  • new Dynamique.createAnimations(structureColor,30);//initialization de l anim(JSON + fps)
  • //definition du player (les animation sont enregistrer dans un tableau associatif
  • // Dynamique.animation passé lui l'id de l anim + appel de la fonction addPlayer avec dedans le
  • //nom du player de votre choix , + un tableau d'objet d' id d'element html)
  • Dynamique.animation['color'].addPlayer('colorPlayer',[{
  • element :'test1'
  • }]);
  • //lancé l 'anim avec comme argument le player
  • Dynamique.animation['color'].play('colorPlayer');
//construction de la json des animations,on lui indique l'id de l anim + le delay + les replay //(replay , replayLessDelay, replayInverse, replayInverseLessDelay)
structureColor=[{	
        id:'color',
	delay:0,
        //tableau d'effet (tout effet pouvant etre animé au format javascript //ex:paddingTop,borderColor ...)
	effects:[{
		effect:'backgroundColor',
		startValue:'#5e6fa1',//valeur de départ
		key:[{ //tableau de clé (frame)
                        value:'#ff3587',//valeur de la clé
			duration:3000,//durée en millisicond
                        interpolation :{//interpollation voir la fin du code source pour                //connaitre toute les possibilité
				type : 'spline'
			}
                 },{
                        value:'#5e6fa1',
			duration:3000,
                        interpolation :{
				type : 'spline'
			}
                 }]
         }]
}];

new Dynamique.createAnimations(structureColor,30);//initialization de l anim(JSON + fps)
//definition du player (les animation sont enregistrer dans un tableau associatif 
// Dynamique.animation passé lui l'id de l anim + appel de la fonction addPlayer avec dedans le 
//nom du player de votre choix , + un tableau d'objet d' id d'element html)
Dynamique.animation['color'].addPlayer('colorPlayer',[{
	element :'test1'
  }]);

//lancé l 'anim avec comme argument le player
Dynamique.animation['color'].play('colorPlayer');


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

23 août 2008 22:24:36 :
...
23 août 2008 22:25:48 :
...
23 août 2008 22:26:44 :
...
24 août 2008 17:00:24 :
ajout d'exemple
25 août 2008 20:16:16 :
correction de bug + ajout de la doc
28 août 2008 19:30:13 :
...
28 août 2008 19:31:38 :
...
28 août 2008 19:33:34 :
...

 Sources du même auteur

Source avec Zip SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip Source avec une capture MENU HORIZONTALE RÉALISÉ AVEC DYNAMIC par Kimjoa
Source avec Zip Source avec une capture DYNAMIC VERSION 0.9 par Kimjoa
Source avec Zip BARRE DE DÉFILEMENT PERSONNALISÉE STYLE MAGIQUE par abdelaziz_info
Source avec Zip UNE HEURE GRAPHIQUE SIMPLE EN JAVASCRIPT par reynum

Commentaires et avis

Commentaire de JJDai le 24/08/2008 19:26:01

Génial, je suis justement à la rechcerhe de script dans ce genre, pour intégrer dans n CMS, j'attends avec impatience le tuto.

Commentaire de XtremDuke le 25/08/2008 15:56:07

Très joli boulot.
J'ai pas regardé tout en détail mais ça m'a pas l'air mal.

Commentaire de Kimjoa le 25/08/2008 20:19:06

Merci, pour vos commentaire , dsl de vous répondre que maintenant mais j'ai plus internet :(.  Si vous utilisé se script , je serait très intéressée de voire se que vous en faite .
Sinon pas de note ?? bye.

Commentaire de JJDai le 26/08/2008 01:44:22

Ce que j'en fait ? Perso j'utilise Xoops comme cms et je développe des modules pour ce CMS.
etje suis en train de faire un module qui intègre des javascript pour générer des animations avec une gestion d'événement du style, faire tomber de la neige en décembre, traverser l'écran avec des clocjes à pâques, ect.
Ca va me prendre quelques semaine, mais quand j'y serai je te fait signe.
JJDAI

Commentaire de Kimjoa le 26/08/2008 15:10:45

Sympa ce cms, je connaissais pas, par contre il n'est pas du tout ajax. J'ai écrit une base de cms pour un site tout ajax, avec  gestion des menus et articles avec une treeview, ça serait bien de faire pareil sur xoops, car j'arrive pas à créer de menu , même si je viens juste de m'y mettre :). Concernant mon script, il est tout a fait possible dans faire une interface graphique sur un cms pour que l'utilisateur généré lui même ses animations. Je posterai dans la semaine des exemples pour faire des rollover ainsi qu'un menu animé, et peut-être si j'ai le temps une galerie photo . Je suis impatient de voir tout module a++.

Commentaire de JJDai le 26/08/2008 18:11:08

Bonjour
si il y a des partie ajax, notamment un des modules que j'ai fait, mais en ce qui concerne les menus, les solutions adoptée par xoops sont plutôt du type "css".
Par expérience je préfère cette solution car il y a pas mal de poste client ou le javascipt est bloqué.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu dynamique [ par mamy ] Bonjour,voilà je dois créer une page web pour un site de vente en lignesur ma page d'accueil je vais afficher le menu avec les grandes catégories de p Formulaire oui, mais dynamique ! [ par jpinneau ] Bonjour, j'ai un formulaire, dont les champs Dynamique tel que les champs nécessaires sont dans une base de données.Lors de l'affichage de la page, je Positionnement dynamique d'un DIV [ par jeanne38 ] Bonjour, Ma page est générée par ASP, et sa longueur peut varier selon l'utilisateur. Elle a des fleches (images) qui, quand on clique dessus, affiche recuperer le contenu d'une variable dynamique [ par raincevent ] /*Salut,si quelqu'un peu me dépanner pour cette fonction qui me permettré de verifier un formulaire dynamique.En effet chaque variable "testx,v_total_ Excel et macro pour web dynamique [ par fcdconnect ] Bonjour,Peut on convertir une feuille de calcul comportant des macros en une page web dynamique de type Xml ou encore avec du javascript...serait t'il Tablo HTML dynamique [ par bside8 ] Bonjour,je souhaite rendre dynamique un tableau HTML.L'objectif est de mettre en surbrillance la ligne du tablo sur laquelle pointe la souris.Je ne sa Menu dynamique [ par bside8 ] Bonjour,je souhaite réaliser un menu somme toute classique consistant à faire apparaître un menu détaillé lors du passage de la souris sur l'un des it Contenu dynamique [ par bside8 ] Bonjour,je voudrais, avec des flèches '-' et '+' incrémenter ou décrémenter dynamiquement une valeur :- valeur +Comment je dois m'y prendre ?Merci Création d'une galerie d'images dynamique [ par joujou0000 ] j ai besoin de votre aide s-v-p, je suis debutant et je veux créer un site web contenant une galrie de photos dynamique avec du XHTML et du JAVASCRIPT Menu dynamique [ par RapAttak ] BonjourJe souhaite intégrer un menu dynamique sur mon site et j'aimerais beaucoup avoir le meme menu que vous utilisez sur www.javascript.com.Je n'arr


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,259 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales