Sujet Précédent Sujet Suivant

Question animation d'images

Fermé
ratchetone1 Messages postés 43 Date d'inscription lundi 5 novembre 2012 Statut Membre Dernière intervention 5 janvier 2021 - 26 oct. 2013 à 15:32
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 26 oct. 2013 à 17:31
Bonjour à tous, je suis en train de me faire un petit site web contenant beaucoup de chose "pratique" et que je n'ai jamais faites. Histoire qu'il y ai du challenge ^^.

Malheureusement je bloque sur mes images.

J'explique mes envies.

Il y a 3 images, l'une a coté de l'autre dans des format verticaux et rectangulaire avec 1 personnages sur chaque image. Mon objectif est d'arrivé à ce que lorsque la souris pointe l'un de 3 personnages, l'une des 3 images donc, celle-ci s'agrandisse couvrant ainsi les 2 autres images et faisant apparaitre du texte (une biographie par exemple). Lorsque la souris ne pointe plus l'image en question, l'image se réduit a son état d'origine lors d'une courte animation.

J'espère avoir été clair dans mes explications.

PS: J'ai récemment trouvé un site qui contient cet objectif, mais avec 2 images seulement.
https://www.rockstargames.com/V/restricted-content/agegate/form?redirect=https%3A%2F%2Fwww.rockstargames.com%2FV%2Ffr%2Flsbc%2Fleadership-you-can-trust&options=&locale=fr_fr

Merci de vos réponses.




2 réponses

Réponse 1 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 oct. 2013 à 16:22
J'm'y colle :)
0
Réponse 2 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 oct. 2013 à 17:31
Voici un exemple: http://prosthetiks.alwaysdata.net/chars/

Le code: 


<html>
	<head>
		<title></title>
		<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
		<style type="text/css">
			body{
				text-align: center;
				background-color: black;
				font-family: 'Belleza', sans-serif;
			}
			.mask{
				pointer-events:none;
				position: absolute;
				height: 1000px;
				width: 9999px;
				top:-100px;
				left: -500px;
				background-color: rgba(255,255,255,.9);
				opacity:0;
			}
			.description{
				pointer-events:none;
				position: absolute;
				z-index:2;
				opacity:0;
				width: 100%;
				display:none;
				color: black;
				transition: all linear .4s;
			}
			h1{
				margin:0;
				padding:0;
				margin-bottom: 20px;
			}
			.desc1{
				margin-left: 275px;
				margin-top: 50px;
				padding: 20px;
				text-align: left;
				width: 400px;
			}
			.desc2 .leftCol{
				float: left;
				text-align: left;
				width: 200px;
				margin-left: 50px;
				margin-top: 50px;
			}
			.desc2 .rightCol{
				float: right;
				text-align: left;
				width: 200px;
				margin-right: 50px;
				margin-top: 110px;
			}
			.desc3{
				margin-left: 50px;
				margin-top: 50px;
				padding: 20px;
				text-align: left;
				width: 430px;
			}
			#characters{
				margin:0 auto;
				background: #e2e2e2; /* Old browsers */
				background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
				background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
				width: 746px;
				height: 600px;
				position: relative;
				overflow: hidden;
			}
			.avatar{
				height: 600px;
				width: 250px;
				top: 0px;
				position: absolute;
				z-index:1;
				transition: all linear .5s;
				opacity: .5;
			}
			.picture{
				transition: all linear .3s;
				background: url('http://prosthetiks.alwaysdata.net/chars/chars.png');
				height: 507px;
				width: 248px;
				margin-top: 50px;
				position: absolute;
				z-index:5;
			}
			.avatar:hover{
				opacity:1;
				z-index:2;
			}
			.avatar:hover .mask{
				opacity:.8;
			}
			.avatar:hover + .description{
				opacity:1;
				display:block;
			}
			.avatar:hover .picture{
				margin-left:10px;
				transform: scale(1.2);
				-moz-: scale(1.2);
				-webkit-transform: scale(1.2);
			}
			.av2{
				left: 250px;
			}
			.av2 .picture{
				background-position: -250px 0;
			}
			.av3{
				left: 500px;
			}
			.av3 .picture{
				background-position: -500px 0;
			}
		</style>
	</head>
	<body>
		<div id="characters">
			<div class="avatar av1"><div class="mask"></div><div class="picture"></div></div>
			<div class="description desc1">
				<h1>Nom du type</h1>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet justo massa, non euismod enim laoreet nec. Maecenas aliquam tincidunt nisi eu laoreet. Aliquam erat volutpat. Phasellus accumsan elit vel molestie placerat. Duis interdum iaculis tristique. Proin volutpat, lectus et consectetur malesuada, augue eros sagittis leo, a egestas purus nulla eu erat. Phasellus consequat tellus massa, vitae pretium tortor accumsan vel. Donec dignissim magna arcu, non gravida enim ultrices ut. In vitae nisl ac dolor adipiscing congue. Nam dictum mi et porta ornare.

				Praesent in orci in velit aliquet suscipit. Suspendisse potenti. Curabitur fringilla dignissim porttitor. Integer ante nisl, convallis et scelerisque ut, congue a ligula. Sed et quam commodo, faucibus nunc at, lobortis quam. Vestibulum velit mi, scelerisque ac odio sit amet, viverra venenatis mauris. Cras augue nisl, posuere nec placerat vitae, adipiscing ac justo. Etiam non justo at mi pharetra laoreet non ac quam. Quisque vitae posuere dui, sed gravida augue. Duis sed tortor ultricies, convallis orci eget, lobortis leo. Sed ac vulputate nibh, non eleifend nisi.
			</div>
			<div class="avatar av2"><div class="mask"></div><div class="picture"></div></div>
			<div class="description desc2">
				<div class="leftCol">
					<h1>Nom du type</h1>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet justo massa, non euismod enim laoreet nec. Maecenas aliquam tincidunt nisi eu laoreet. Aliquam erat volutpat. Phasellus accumsan elit vel molestie placerat. Duis interdum iaculis tristique. Proin volutpat, lectus et consectetur malesuada, augue eros sagittis leo, a egestas purus nulla eu erat. Phasellus consequat tellus massa, vitae pretium tortor accumsan vel. Donec dignissim magna arcu, non gravida enim ultrices ut. In vitae nisl ac dolor adipiscing congue. Nam dictum mi et porta ornare.
				</div>
				<div class="rightCol">
					Praesent in orci in velit aliquet suscipit. Suspendisse potenti. Curabitur fringilla dignissim porttitor. Integer ante nisl, convallis et scelerisque ut, congue a ligula. Sed et quam commodo, faucibus nunc at, lobortis quam. Vestibulum velit mi, scelerisque ac odio sit amet, viverra venenatis mauris. Cras augue nisl, posuere nec placerat vitae, adipiscing ac justo. Etiam non justo at mi pharetra laoreet non ac quam. Quisque vitae posuere dui, sed gravida augue. Duis sed tortor ultricies, convallis orci eget, lobortis leo. Sed ac vulputate nibh, non eleifend nisi.
				</div>
			</div>
			<div class="avatar av3"><div class="mask"></div><div class="picture"></div></div>
			<div class="description desc3">
				<h1>Nom du type</h1>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet justo massa, non euismod enim laoreet nec. Maecenas aliquam tincidunt nisi eu laoreet. Aliquam erat volutpat. Phasellus accumsan elit vel molestie placerat. Duis interdum iaculis tristique. Proin volutpat, lectus et consectetur malesuada, augue eros sagittis leo, a egestas purus nulla eu erat. Phasellus consequat tellus massa, vitae pretium tortor accumsan vel. Donec dignissim magna arcu, non gravida enim ultrices ut. In vitae nisl ac dolor adipiscing congue. Nam dictum mi et porta ornare.

				Praesent in orci in velit aliquet suscipit. Suspendisse potenti. Curabitur fringilla dignissim porttitor. Integer ante nisl, convallis et scelerisque ut, congue a ligula. Sed et quam commodo, faucibus nunc at, lobortis quam. Vestibulum velit mi, scelerisque ac odio sit amet, viverra venenatis mauris. Cras augue nisl, posuere nec placerat vitae, adipiscing ac justo. Etiam non justo at mi pharetra laoreet non ac quam. Quisque vitae posuere dui, sed gravida augue. Duis sed tortor ultricies, convallis orci eget, lobortis leo. Sed ac vulputate nibh, non eleifend nisi.
			</div>
		</div>
	</body>
</html>
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
comment animer une soirée avec 30 personnes à table ?
sofi -
Nolly94 -

1 réponse
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses