28112 sujets

CSS et mise en forme, CSS3

Garder le même rendu d'une animation qu'en position fixed

Bonjour,

J'aimerais avoir de l'aide, j'ai intégré une timeline animée sur mon site, mais le contenant du texte reste fixe. J'aimerais pouvoir avoir le même rendu de la div contenttl lorsqu'il est fixe mais j'aimerais qu'il soit visible que lorsque nous arrivons à la timeline, et pas avant. Savez-vous comment faire ?
Vous comprendrez sûrement mieux en regardant mes codes. Désolé si j'explique mal, je suis débutante.
En enlevant sur la div contenttl la position fixed le rendu n'est pas bon, et je n'ai pas trouvé comment faire le même rendu avec une position relative.

Merci d'avance pour votre aide!

Voici mon code HTML

<div class="contenttlb">
 					<h2>XXX</h2>
					<ul id="timeline">
					  <li class="entry">
						<input checked="checked" class="radio" id="trigger5" name="trigger" type="radio">
						<label for="trigger5">
						  <span>
							X1
						  </span>
						</label>
						<span class="date">xx à xx</span>
						<span class="circle"></span>
						<div class="contenttl">
						  <h3>X1</h3>
						  <p>
							xxxxx<br>
						  </p>
						</div>
					  </li>
						<li class="entry">
						<input checked="checked" class="radio" id="trigger4" name="trigger" type="radio">
						<label for="trigger4">
						  <span>
							X2
						  </span>
						</label>
						<span class="date">xx à xx</span>
						<span class="circle"></span>
						<div class="contenttl">
						  <h3>X2</h3>
						  <p>
							xxxxx<br>
						  </p>
						</div>
					  </li>
						<li class="entry">
						<input checked="checked" class="radio" id="trigger3" name="trigger" type="radio">
						<label for="trigger3">
						  <span>
							X3
						  </span>
						</label>
						<span class="date">xx à xx</span>
						<span class="circle"></span>
						<div class="contenttl">
						  <h3>X3</h3>
						  <p>
							xxxxx<br>
						  </p>
						</div>
					  </li>
						<li class="entry">
						<input checked="checked" class="radio" id="trigger2" name="trigger" type="radio">
						<label for="trigger2">
						  <span>
							X4
						  </span>
						</label>
						<span class="date">xx à xx</span>
						<span class="circle"></span>
						<div class="contenttl">
						  <h3>X4</h3>
						  <p>
							xxxxx<br>
						  </p>
						</div>
					  </li>
				</ul>
				</div>


Voici mon code CSS

@charset "UTF-8";

html {
	height: 100%;
}
body {
	width: 100%;
	font-family: montserrat !important;
	margin:0;
	padding:0;
	height:100%;
	background:#F5C6E7 !important;
}
h2 { 
	color: #343434;
	text-align: center;
}
p, li{
	padding: 20px;
	word-break: break-word;
	text-align: justify;
	color: #343434;	
}
.contenttlb {
	width:auto;
	height:auto;
	margin:10px;
	vertical-align: middle;
	margin-right: auto;
	margin-left: auto;
  	color: #eee9dc;
	background:#FFFFFF;
	border-radius:20px;
	overflow: hidden;
    position: relative;
}
#timeline {
  margin-top: 480px !important;
  padding-bottom: 20px;
  border-top: 5px solid #343434;
  list-style: none;
  display: flex;
}
#timeline li {
  padding-top: 30px;
  position: relative;
  flex: 1;
  transition: all 0.4s ease-in-out;
}
#timeline li:hover {
  padding-bottom: 80px;
  flex: 2;
}
#timeline li:hover label {
  opacity: 1;
  transform: translateY(10px);
}

label {
  max-width: 200px;
  margin: 0 auto;
  padding: 5px 10px;
  background: #F5C6E7;
  border-radius: 20px;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
label:before, label:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  bottom: 100%;
  pointer-events: none;
}
label:before {
  border-bottom-color: #F5C6E7;
  border-width: 15px;
  left: 52%;
  margin-left: -15px;
}
label:after {
  border-bottom-color: #F5C6E7;
  border-width: 12px;
  left: 52%;
  margin-left: -12px;
}
label span {
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.date {
  width: 100%;
  padding-bottom: 30px;
  text-align: center;
  position: absolute;
  top: -60px;
  display: block;
}

.circle {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #343434;
  border: 5px solid #343434;
  border-radius: 50%;
  position: absolute;
  top: -14px;
  left: 50%;
}

.contenttl {
  width: 50%;
  height: auto;
  margin-right:auto;
	margin-left:auto;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
  position: fixed;
  top: 200px;
  left: 0;
  right: 0;
  z-index: 100;
  background: #F5C6E7;
  transform: perspective(1000px) rotateY(20deg);
  animation: switching_back 0.8s;
}
.contenttl h3, .contenttl p {
  margin: 0 20px 10px;
  text-align: justify;
  opacity: 0;
}
.contenttl h3 {
  margin-top: 20px;
}
.radio {
  display: none;
}
.radio:checked + label {
  opacity: 1;
  transform: translateY(10px);
  transition: opacity 0.4s ease-in-out 0.25s, transform 0.3s ease-in-out 0.25s;
}
.radio:checked ~ .circle {
  background: #F5C6E7;
}
.radio:checked ~ .contenttl {
  z-index: 999;
  transform: perspective(1000px) rotateY(15deg) translate(40px, 25px);
  animation: switching 1s ease;
}
.radio:checked ~ .contenttl h3, .radio:checked ~ .contenttl p {
  opacity: 1;
  transition: opacity 0.4s ease-in-out 0.4s;
}

@keyframes switching {
  0% {
    transform: perspective(1000px) rotateY(20deg);
  }
  40% {
    transform: perspective(1000px) rotateY(15deg) translate(100px, 35px);
  }
  100% {
    transform: perspective(1000px) rotateY(15deg) translate(40px, 25px);
  }
}
@keyframes switching_back {
  0% {
    transform: perspective(1000px) rotateY(15deg) translate(40px, 25px);
    z-index: 200;
  }
  40% {
    transform: perspective(1000px) rotateY(15deg) translate(0px, 0px) scale(1.08);
  }
  100% {
    transform: perspective(1000px) rotateY(20deg);
    z-index: 100;
  }
}
Modérateur
Salut,

Un première piste serait de passer de fixed à absolute et de modifier 2 ou 3 trucs en conséquence. Tes contenttl seront placé par rapport à leur parent (les li).


.contenttl {
  width: 50vw; // une width fixe ou en vw
  height: auto;
  margin-right:auto;
	margin-left:auto;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
  position: absolute; // absolute au lieu de fixed
  bottom: 200px; // bottom au lieu de top sinon ca sort de l'écren en dessous
  left: 0;
// supprimer le right:0;
  z-index: 100;
  background: #F5C6E7;
  transform: perspective(1000px) rotateY(20deg);
  animation: switching_back 0.8s;
}


C'est pas un rendu ouf mais ca te fera peut etre avancé vers là ou tu veux aller.

La difficulté ici c'est que tout est dans le <li>...

Tu pourrais faire plus propre (et plus simple) avec un peu de Js (si tu maîtrise un minimum ou si tu veux l'apprendre)
Merci beaucoup pour ta réponse !!
Le rendu est déjà plus proche de ce que je recherche.
Je ne préfère pas m'aventurer sur javascript, je ne sais pas encore l'utiliser Smiley ohwell ...
J'essaie de modifier pour arriver au plus proche encore du rendu voulu.
Modérateur
mathildeth a écrit :
Je ne préfère pas m'aventurer sur javascript, je ne sais pas encore l'utiliser Smiley ohwell ...

C'est plus simple que tu ne le pense Smiley langue

Bon courage
Sujet clos
Aller à