ALBATROS CONCEPT 
Accueil : Contact : Tarifs : Présentation
   Assistance informatique      Développement Web      Formation      Logiciels      Multimedia   
Texte si le navigateur ne supporte pas le HTML Canvas
Pseudo ou Email
Mot de passe
S'inscrire
Mot de passe perdu ? Email non reçu ?
Développeur web expert, PHP5, MySQL5, JavaScript, HTML5, LE MANS METROPÔLE

Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), générique du film Star Wars/La guerre des étoiles (de 1977) : 2/07/2017

Pour cette animation, un des problèmes consistait à cacher ce qui apparaissait en dehors de l'image du ciel étoilé. Cela a pu se faire avec la propriété "overflow : hidden".

Il fallait aussi enchainer 2 animations à la suite. Malheureureusement, la seule solution que j'ai trouvée dans une optique de répétition infinie (la méthode delay de l'animation ne fonctionnant qu'une seule fois) était que les 2 animations aient la même durée. Du coup j'ai fait terminer la première animation à 8% des 80s, et démarré la seconde à 8%.

Enfin, il fallait trouver un moyen que le logo starwars disparaisse au bout de 9s. Ce qui a pu se faire en ajoutant la clause "visibility ; hidden" qui peut très bien s'intégrer aux étapes intermédiaires de l'animation (comme tout changement de propriété CSS d'ailleurs!)

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS. J'ai conçu cette animation à partir de la possibilité de faire de la 3D avec des cadres en CSS3.

C'est une époque de guerre civile. A bord de vaisseaux spatiaux opérant à partir d'une base cachée, les Rebelles ont emporté leur première victoire sur le maléfique Empire Galactique.

Au cours de la bataille, des espions rebelles ont réussi à dérober les plans secrets de l'arme absolue de l'Empire : l'Etoile de la Mort, une station spatiale blindée dotée d'un équipement assez puissant pour annihiler une planète tout entière. Poursuivie par des sbires sinistres de l'Empire, la princesse Leia file vers sa base dans son vaisseau cosmique, porteuse des plans volés à l'ennemi qui pourront sauver son peuple et restaurer la liberté dans la galaxie...

Liens directs

Valid CSS :: Valid XHTML
Copyright © 2011 par Albatros Concept
Maquette graphique par: GET CSS TEMPLATES modifiée par Albatros Concept