Construire un robot dessin animé avec jQuery, CSS-Tricks
En plus d'être un exercice amusant, quel but quelque chose comme cela a? Aucun qui est clairement évident. Son à peu près aussi utile en tant que bateau miniature dans une bouteille. Pourtant, il a un objectif sous-jacent. Il pourrait inspirer quelqu'un à regarder au-delà des contraintes perçues des concepteurs et développeurs web.
Ce projet a été créé par la superposition de plusieurs divs vides sur l'autre avec PNGs transparents comme des images d'arrière-plan.
Les milieux ont été animés à des vitesses différentes en utilisant un plug-in jQuery par Alexander Farkas. Cet effet simule un faux 3-D arrière-plan animé baptisé origine « effet parallaxe » d'un côté old-school défilement des jeux vidéo.
Le robot est composé de la même à la scène d'animation de fond en superposant plusieurs DIVs ensemble pour créer les différentes pièces du robot. La dernière étape, le robot a été animant avec une jQuery.
La structure des divs ressemble à notre diagramme. Aucun des DIVs a l'attribut largeur spécifiée afin qu'ils se dilater pour remplir la taille d'une fenêtre du navigateur, ils sont affichés sur. NOTE: Toutes les images qui font l'effet paysage de fond de parallaxe sont 9999px de large. Bien au-delà de la largeur d'un écran d'ordinateur ou de télévision dans l'usage commun. Nous allons utiliser les CSS pour placer les images d'arrière-plan exactement où nous voulons dans chaque div particulier.
Avertissement: Le script original pour animer le robot était horrible. Les bonnes gens de codage cyborg ont eu la gentillesse de le nettoyer et ré-écrire.
Nous commençons par une nouvelle affirmation de la position d'arrière-plan d'origine de toutes les images.
Après avoir cliqué sur la div « de #klicker », une fonction indique jQuery pour animer les arrière-plans de leur position actuelle tout le chemin aux coordonnées indiquées pour chaque div. En séparant toutes les différentes couches d'images dans différentes DIVs nous pouvons animer les éléments de fond à des vitesses différentes. Le déplacement des éléments à différentes vitesses donne l'illusion d'une 3ème dimension. Nous déplaçons les éléments en arrière-plan à un rythme beaucoup plus lent que les éléments du premier plan. Remarquez sur cette animation que la vitesse des nuages en arrière-plan est plus lent que la vitesse des montagnes. Et les montagnes sont plus lentes que le sol qui est le plus rapide de tous. Enfin, après le tir de toutes ces commandes pour obtenir l'arrière-plan en mouvement la fonction « #klicker » appelle la fonction « startHim () ».
La fonction « startHim () », vous l'avez deviné droite, commence notre robot. Il commence son petit rebond et le fait bouger au centre de la #wrapper div. La fonction 'startHim () appelle la fonction « bounceHim () ». Et il continue en boucle.
Nous devons faire le robot semble comme il rebondissait sur un désert rude rode. Pour atteindre cet effet irrégulier plein d'entrain, nous allons utiliser la fonction « bounceHim () ». Il cible les robots DIVs séparés et « » les rebonds 5px et puis 5px vers le bas. Ce ne sera pas en assez bien, toutes les différentes pièces du robot rebondissant au même rythme semble trop raide. Nous devons le faire paraître un peu plus aléatoire et intéressant. Nous allons donc la div qui fait la partie de la poitrine du robot et de le déplacer à un rythme différent de celui des pièces de tête et du bassin. Nous allons « rebondir » la partie de la poitrine à 8px et 8px vers le bas. Cela donne le robot une belle off-beat effet plein d'entrain.
La fonction « leaveScreen () » est la dernière fonction appelée. Au bout de 15 secondes (15000) se déplace le robot 100% pour cent à la gauche de l'écran qui se déplace par conséquent le robot vers la droite de l'écran.
Anthony Calzadilla est un concepteur web indépendant basé sur Miami, FL. ETATS-UNIS.