Discussion :

[Yepazix]

Hello,

Bon en lisant l'intutilé, probablement que deux d'entre vous ont mis fin à leur jour, 6 sont restés pétrifiés et les autres cherchent un dictionnaire.
Comme toujours avec moi ce n'est pas simple

Donc voilà de quoi il est question.

Au départ on à une page avec un Background.
Devant se Background je veux avoir une image qui se transforme en "autre chose".
Pour le moment cet "autre chose" est une autre image.

C'est donc relativement simple, je fais un truc comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div#imgcont img#img2 {
    display: none;
}
 
div#imgcont:hover img#img2 {
    display: block;
}
 
div#imgcont:hover img#img1 {
    display: none;
}

(...)


<div id="imgcont">
<img src="images/delorean_retour_vers_le_futur.png" alt="Description alternative" title="Infobulle" id="img1" />
<img src="images/delorean_retour_vers_le_futur_feu.png" alt="Description alternative" title="Infobulle" id="img2" />
</div>

Du coup j'ai l'image et quand je passe dessus avec la souris elle change.
On peut voir ça ici : http://www.espaceimagi.be/mwp2/infos.html
Ps de panique je vais bien entendu redessiner les flammes pour qu'elles collent à l'image dès que j'ai le temps.

Première chose que je voudrais changer :
QU'on passe d'une image à un ensemble de choses a savoir :
- Une image et deux zones (colonnes ? de texte).

Donc au départ on aurait l'image de la voiture puis ensuite on aurait des flammes + du texte entre le flammes.
Donc de ça :

A ça :


Tout en sachant que le texte est du vrai texte et pas une image.

Et ensuite ça se corse vraiment, si j'ai le temps, si j'ai vraiment beaucoup d'aide de votre part et s'il existe un dieu pour les fous, je voudrais arriver à faire la chose suivante :

Etape 1, la voiture comme on l'a déjà vue, rien ne change.
Etape 2 après 2 secondes : la voiture disparait avec un effet de zoom au lointain, dans un même temps des vraies flames (que je vais dessiner apparaissent).
Etape 3 les flames disparaissent et apparait l'image qu'on a juste ici au dessus.

Je crois que c'est possible en JS, j'avais vu un script qui faisait disparaitre une image avec un effet zoom.

Bon allez si je trouvais déjà une belle solution pour mon numéro deux je serais déjà bien content :-)

Merci.

A peluches...

[Yepazix]

PS : S'il y a des amis Belges ou qui viennent à Bruxelles, des places gratuites en VIP si vous me pondez la solution 3 :-)
Et j'vous jure que ça va être juste un truc de ouf.

[Invité]

Bonjour,

l'animation peut se faire en full CSS.

C'est ça que tu cherches à faire ?

• Etape 2 : Back To The Future - animation full CSS

[Yepazix]

Putain, t'est une bête ! Et pas un Dalmatien, t'es un lion, une panthère noire, un T-Rex !
C'est un truc de tueur ton machin !
Dis moi que tu es en Belgique le 23/10 que tu viens à cette soirée de malade.
Tu verras que je picole mieux que je ne râle !
Je me voyais déjà parti avec du java pourri dans tous les sens.
Bon mainetannt je vais regarder ça et essayer de tout comprendre :-).

[Yepazix]

Bon en gros je pige.
Incroyable qu'on puisse faire tout ça avec le CSS !
Par contre je ne pige pas trop comment fonctionne le déclancheur de l'affaire.
Bon tu vas me dire ne touche pas à ca p'tit con mais :
1/ J'aime bien comprendre.
2/ Je voudrais faire quelques modifs la dessus pour que la voiture "flotte" +/- 3 seconde, puis décole et qu'ensuite elle ne revienne jamais quelle que soit les actions qu'on fait.
La pour le moment elle revient au bout d'un moment :-)

[Invité]

Bonjour,
j'ai mis le déclencheur sur #ville:hover (hover sur la page).

Mais on peut déclencher les actions, comme pour le logo et billetterie, à l'ouverture de page, avec un délai.

Ça, je ne le ferai pas à ta place. (par contre, j'ai ajouté la foudre ! )

Il te faut LIRE (et comprendre) LES TUTOS sur les ANIMATIONS CSS.

• Glossaire des propriétés CSS : VII. Propriétés de transformation et d'animation (CSS 3)

(pour la compatibilité, il faut aussi penser à ajouter les préfixes partout)
Voir aussi (exemples) :

• CSS3 : animations visuelles avec Animate.css
• Réaliser une horloge avec CSS3 et un peu de JavaScript
• Créez une animation de chargement avec CSS3

A TOI DE M'EPATER maintenant !


N.B. N'oublie pas qu'il reste les flammes à ajouter et à animer !

IMPORTANT : OPTIMISE la taille des images !!! (=> pas plus grande que leur taille d'affichage + il existe des logiciels pour diminuer le poids)

• Optimisation de l'image

[Yepazix]

Merci.
Je vais lire tout ça et ça va servir pour une prochaine page sur Sta....... chut je peux pas encore le dire :-)

La ici la graphiste veut finalement autres chose mais bon elle est jolie donc

Par contre c'est vraiment cool tu m'as fait découvrir un tas des trucs que je savais pas qu'on pouvait faire en CSS et je vais m'en servir plus souvent :-)
En plus pour une fois ce n 'est pas encore trop compliqué...

MERCI