Partage

Une transition d'image en CSS

Besoin d'aide dans la réalisation d'une transition CSS

Sujet résolu

29 septembre 2013 à 15:07:36

Bonjour,

Je fais appel vous aujourd'hui afin de résoudre un problème. je sais qu'il a souvent été répondu dans plein d'autres sujets, mais je n'arrive pas/ne comprend pas comment adapté à mon cas.

Ce que j'aimerais faire, c'est une sorte de "bouton" contenant une image. Lorsque la souris passe sur le bouton, je souhaite qu'il se déplace de 20 Pixels, et je souhaite faire apparaitre pendant le déplacement un bords coloré pour simuler un effet relief du bouton, comme s'il se désenfonçait. Pendant la transition, je souhaite que l'image change. Je souhaite par la suite de l'animation que la page se déplace à un autre endroit de la page ou en ouvre une autre par dessus, mais vraiment après la transition.

Pour le moment, je souhaite générer le déplacement et la transition d'image sur le bouton.

Voiçi le code Html + CSS :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Test CSS transition image</title>
	</head>
	<body>
		<audio src="01 - Intro - A Shell in the Pit.mp3" autoplay></audio>
		<style type="text/css">
			.image
			{
				position: absolute;
				right: 200px;
				bottom: 150px;
				transition: 300ms
			}
			.image:hover
			{
				position: absolute;
				right: 220px;
				bottom: 170px;
			}
		</style>
			
		
		<p><a href="#lienPage"><image class="image" src="carré.png" /></a></p>
</body>
</html>

Ce que je souhaite faire, c'est de pouvoir changer d'image pendant la transition "hover" (en 300ms également). Ainsi, je souhaite que mon image se déplace et change en même temps pendant une durée fixée.

J'ai lu plein de choses comme le background-image dans le CSS, mais étant débutant, j'ai beau essayer, ça ne fonctionne pas du tout. Si vous m'expliquez comment faire, je préférerais tout de même une méthode alternative à celle citée. Sinon, expliqué moi bien clairement ce qu'il faut faire pour que ça fonctionne de cette façon.

Je sais qu'il est possible de le faire en Javascript, mais ne connaissant pas du tout le langage, je pense qu'il est préférable de le faire en CSS, langage que je connais plus ou moins et que je suis en train d'approfondir.

Voiçi l'image que je souhaite utiliser :

Et voiçi l'image par laquelle j'aimerais faire transition :

Tant que j'y suis, j'avoue ne pas vraiment savoir comment je ferrais pour faire ouvrir une page ou déplacer vers un endroit de la page juste après la transition. Si quelqu'un sait par hasard comment je peux faire, je suis preneur.

Merci d'avance de vos réponses.

-
Edité par Nicotyrox 29 septembre 2013 à 15:15:46

raynak

29 septembre 2013 à 15:22:10

Salut,

Déjà, pour info la balise style doit être placée dans le head.

Ensuite, je ne comprend pas bien ce que tu veux faire : tu veux, au survol, remplacer l'image actuelle par une autre ?

Nicotyrox

29 septembre 2013 à 15:33:33

Yep, j'avais pas vu, j'ai voulu tout mettre en un seul truc pour pas avoir à faire un deuxième encart pour le CSS.

Je veux qu'au survol, l'image se déplace et pendant le déplacement (géré par un transition dans le CSS) je souhaite que l'image change. Celà permettra d'évoluer après vers la modélisation d'un bouton qui se désenfoncera lors du survol et s'enfoncera lorsqu'on ne survol pas :

SURVOL : PAS DE SURVOL :

La partie noire, je verrais plus tard, pour le moment, je voudrais déplacer juste la partie Rouge. Et dan mon exemple, j'ai dis que je souhaitais une transition image1 vers image2 pour pouvoir changer la partie rouge par justement cette transition.

Lucky13

29 septembre 2013 à 17:00:40

Salut,

Un tutoriel assez complet, compréhensible et fait pour les débutants qui pourrait t'aider.

un exemple -> http://jsfiddle.net/iamvdo/S4nLy/

-> http://letrainde13h37.fr/17/transitions-et-animations-css/

-
Edité par Lucky13 29 septembre 2013 à 17:02:07

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

philiga

29 septembre 2013 à 17:08:25

Bonjour,

Quelque chose comme ça ? : http://jsbin.com/UYAKakA/2/edit

<div class="bouton">Mon bouton</div>

CSS

.bouton {
/* Height and Width */
    height: 170px;
    width: 170px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transition: 300ms;
    background-color: #c30707;
    background-color: #c30707;
/* Border */
    border: 2px outset #c30707;
/* Border-Radius */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:gold;
    font-size:1.5em;
}

.bouton:hover {
/* Border */
    border: 4px outset #c30707;
/* Box-Shadow */
    -webkit-box-shadow: 8px 8px 10px 7px #000;
    -moz-box-shadow: 8px 8px 10px 7px #000;
    box-shadow: 8px 8px 10px 7px #000;
/* Transform */
-webkit-transform:translate(-20px,0px);
   -moz-transform:translate(-20px,0px);
    -ms-transform:translate(-20px,0px);
     -o-transform:translate(-20px,0px);
        transform:translate(-20px,0px);
/* Text-Shadow */
    text-shadow: 0 0 0 #000;
}

Fait avec l'aide de cet outil : http://css3.pascal-seven.de/

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Nicotyrox

29 septembre 2013 à 17:21:40

Merci lucky, je vais lire de suite

Philiga, oui le principe est bon, mais je souhaite également que, dans l'exemple que tu as montré, la partie rouge et le texte à l'intérieur soit une image, et que cette image change. Et j'avais pensé aussi de faire l'animation avec un "masque de fusion", se déplaçant au même rythme que la partie rouge et dévoilant petit à petit la bordure noire simulant l'effet relief

philiga

29 septembre 2013 à 18:37:02

Pas de difficulté à mettre deux background-image différents (normal/hover), mais le problème est le maintien de la progressivité à la sortie du hover.

Cela semble aléatoire.

Pour le reste, je ne vois pas trop ce que tu veux faire...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Nicotyrox

29 septembre 2013 à 18:49:58

Le problème est que justement, avec un background-image, ça ne marche pas :

.image
		{
			position: absolute;
			right: 200px;
			bottom: 100px;
			z-index: 1;
			background-image:url(carré.png);
			transition: 300ms;
		}
.image:hover
		{
			-webkit-transform: translate(-20px, -20px);			
			-moz-transform: translate(-20px, -20px);								
			-o-transform: translate(-20px, -20px);									
			z-index: 1;
			background-image:url(carré2.png);

C'est bien aligné normalement dans le code, mais ça ne l'a pas bien aligné en le transposant sur le site, désolé.

En faisant ceci, ça ne marche pas, mon problème est içi. Et même, je pense pas que ça fonctionne, puisque je n'ai pas de texte à l'intérieur, juste une image. et sauf erreur de ma part, le background image ne s'applique que sur un texte.

Pour le reste, en fait, je compte créer un masque de fusion pour masquer une partie d'image (la partie noir évoquée, servant à donner le relief). Via Photoshop, je peux découper la forme noir comme si elle était déployé, puis je compte l'aligner à l'image rouge dans l'exemple évoqué. Entre l'image rouge de l'exemple et cette forme noire simulant le relief, un masque de fusion serait lié à l'image rouge, ce qui fait que quand l'image rouge se déplacera, le masque ferait le même déplacement, ce qui dévoilerait petit petit l'effet relief. Si je compte faire cette méthode, c'est parce que j'ai cru comprendre que c'était possible de faire ainsi.

-
Edité par Nicotyrox 29 septembre 2013 à 18:54:20

gcyrillus

29 septembre 2013 à 18:50:17

bonsoir,

voici un point de départ en CSS peut-être

http://codepen.io/gcyrillus/pen/hnrGs

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

philiga

29 septembre 2013 à 19:33:14

Je comprends toujours pas trop l'effet recherché et pourquoi vouloir le faire avec des images alors que les fonctions CSS sont si pratiques, d'autant que cela fonctionne très bien avec les background-image : la preuve : http://jsbin.com/UYAKakA/7/edit

-
Edité par philiga 29 septembre 2013 à 19:49:44

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

gcyrillus

29 septembre 2013 à 19:50:05

philiga a écrit:

Je comprends toujours pas trop l'effet recherché et pourquoi vouloir le faire avec des images alors que les fonctions CSS sont si pratiques, d'autant que cela fonctionne très bien avec les background-image : la preuve : http://jsbin.com/UYAKakA/6/edit
-
Edité par philiga il y a 11 minutes

Idem pour l'effet recherché

Dans ton exemple , le fondu entre image n'est pas applicable ;),

C'est pourquoi je le distribue sur deux éléments , la technique est similaire a cette démo sur 3 bg en fondue sur body http://codepen.io/gcyrillus/pen/DJdja (z-index + opacity + transition)

Cdt

-
Edité par gcyrillus 29 septembre 2013 à 19:50:45

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Nicotyrox

29 septembre 2013 à 19:58:28

Effectivement, ça fonctionne très bien, autant pour moi. C'est vrai que j'ai cherché à me compliquer, finalement. mais c'est louche que ça ne fonctionnait pas sur mon truc lorsque je l'ai fait. M'enfin, Problème résolu.

Petite question pour finir : je ne connaissais pas la propriété shadow que tu applique, mais est-ce qu'il est possible d'appliquer de la couleur sur l'ombre ?

-
Edité par Nicotyrox 29 septembre 2013 à 20:04:55

gcyrillus

29 septembre 2013 à 20:04:24

oui,

tu devrais prendre l'habitude de rechercher sur le W3C (ou ailleurs) les "définitions" des choses que tu utilises ou veut utiliser.

Un tuto parmis d'autres : http://www.alsacreations.com/tuto/lire/1338-css3-box-shadow-ombre.html

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

philiga

29 septembre 2013 à 20:13:36

Oui, on peut tout changer en CSS ; tu peux bidouiller mon exemple sur jsbin et aussi t'aider d'outils comme : http://css3.pascal-seven.de/

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Nicotyrox

29 septembre 2013 à 20:55:03

Ok merci beaucoup, Vous m'aurez tout les deux bien aidé

Juste pour finir (oui c'est la deuxième fois, mais promis la dernière), en bidouillant justement la feuilel de style que tu m'a montré, j'ai fait à peu prés comme je souhaitais. je m'inscrirais sur le site plus tard, en attendant voiçi le CSS obtenu :

.bouton {
/* Height and Width */
  position:relative;
  left:50px;
    height: 170px;
    width: 170px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transition: 300ms;
    background-color: #c30707;
    background-image:url("http://lorempixel.com/output/nature-q-c-170-170-4.jpg");


}

.bouton:hover {
/* Box-Shadow */
    -webkit-box-shadow: 10px 10px 0px 0px #000;
   // -moz-box-shadow: 8px 8px 0px 1px #000;
   // box-shadow: 8px 8px 0px 1px #000;
/* Transform */
-webkit-transform:translate(-10px,-10px);
  -moz-transform:translate(-10px,-10px);
    -ms-transform:translate(-10px,-10px);
     -o-transform:translate(-10px,-10px);
        transform:translate(-10px,-10px);

background-image:url("http://lorempixel.com/output/nature-q-c-170-170-7.jpg");
 
}

Cependant, la seule chose qui me manque, c'est qu'entre l'ombre et l'image déplacée, ça ne se rejoint pas, du coup, l'effet réalisé est que l'image est comme "surélevée", alors que j'aimerais joindre tout comme dans l'image que j'avais montré plus haut :

Si c'est possible (je maitrise pas encore assez bien pour le savoir) il faudrait dupliquer en remontant de 1 pixels en x et en y à chaque fois jusqu'à ce qu'on atteigne l'objet, mais si c'est possible, ça risque d'être lourd.

Avez-vous une solution ?

philiga

29 septembre 2013 à 21:16:28

Ah non, essaye ceci : http://jsbin.com/UYAKakA/10/edit

Pour me rapprocher de ton dessin, j'ai supprimé le radius (les bords arrondis) et le blur (le flou sur l'ombre), mais cela reste un effet d'ombre et non de 3D.

Pas si simple à réaliser exactement ton effet 3D, même en ayant recours à des images, le déplacement de la 1ère la déconnectera du fond noir.

Il faudrait le faire en vrai 3D.

(NB: Il faudra si tu utilises ce code décommenter les lignes 20-21 ci-dessus pour ceux qui n'ont pas Chrome)

Code modifié:

.bouton {
/* Height and Width */
  position:relative;
  left:50px;
    height: 170px;
    width: 170px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transition: 300ms;
    background-color: #c30707;
    background-image:url("http://lorempixel.com/output/nature-q-c-170-170-4.jpg");
/* Border */
    border: 4px ridge #c30707;
/* Border-Radius */
/*    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; // ANNULE ==*/ 
    color:gold;
    font-size:1.5em;
}

.bouton:hover {
/* Border */
    border: 4px outset #c30707;
/* Box-Shadow */
    -webkit-box-shadow: 10px 10px 0px 0px #000;
    -moz-box-shadow: 10px 10px 0px 0px #000;
    box-shadow: 10px 10px 0px 0px #000;
/* Transform */
-webkit-transform:translate(-10px,0px);
  -moz-transform:translate(-10px,0px);
    -ms-transform:translate(-10px,0px);
     -o-transform:translate(-10px,0px);
        transform:translate(-10px,0px);

  background-image:url("http://lorempixel.com/output/nature-q-c-170-170-7.jpg");
 
}

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Nicotyrox

29 septembre 2013 à 21:34:51

Ok ok, bah pas de souçis alors.

Et je suis en train de me poser la question : avec un polygon SVG, ça serait pas faisable par hasard ?

EDIT : oups, question idiote, SVG n'est pas CSS, il me semble. Desolé. Sujet résolu néanmoins merci !

-
Edité par Nicotyrox 29 septembre 2013 à 21:35:42

philiga

30 septembre 2013 à 0:36:35

Bon, une dernière avant d'aller se coucher : http://jsbin.com/UYAKakA/12/edit

Voici le résultat avec une ruse pour les angles: des triangles en css (repris sur http://css-tricks.com/examples/ShapesOfCSS/) rendus visibles au hover et venant se placer pour combler les angles vides. Du bricolage, mais ça rend l'effet.

<body>
  <div class="bouton">Mon bouton
  <div id="triangle-topright"></div>
  <div id="triangle-bottomleft"></div>
  </div>
</body>

CSS

.bouton {
/* Height and Width */
  position:relative;
  left:50px;
    height: 170px;
    width: 170px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transition: 300ms;
    background-color: #c30707;
    background-image:url("http://lorempixel.com/output/nature-q-c-170-170-4.jpg");
    border: 4px ridge #c30707;
    color:gold;
    font-size:1.5em;
}

.bouton:hover {
    border: 4px ridge #c30707;
/* Box-Shadow */
    -moz-box-shadow: 10px 10px 0px 0px #000;
    box-shadow: 10px 10px 0px 0px #000;
/* Transform */
-webkit-transform:translate(-10px,0px);
  -moz-transform:translate(-10px,0px);
    -ms-transform:translate(-10px,0px);
     -o-transform:translate(-10px,0px);
        transform:translate(-10px,0px);
  background-image:url("http://lorempixel.com/output/nature-q-c-170-170-7.jpg");
}

.bouton:hover #triangle-bottomleft{
  border-bottom: 10px solid black;
  right:-14px;
  top:-4px;  
}
.bouton:hover #triangle-topright{
  border-top: 10px solid black;
 left:-4px;
  bottom:-14px;
}

#triangle-bottomleft {
  transition: 300ms;
  position:absolute;
  right:0;
  top:0;
	width: 0;
	height: 0;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
}
#triangle-topright {
  transition: 300ms;
  position:absolute;
  left:0;
  bottom:0;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
}

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Nicotyrox

30 septembre 2013 à 11:55:18

Ca rend bien l'effet souhaité, merci beaucoup