Oui, c'est tellement compliqué que je n'y arrive pas dans ma page
https://lapagetest.fr/index2%20copie.html
Mes CSS :
*, ::after, ::before {
box-sizing: border-box;
}
.grid {
position: relative;
display: grid;
grid-gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
height: 100%;
margin: 0;
}
.item {
padding: 1.5rem;
background-color: coral;
}
.text-content {
grid-column: 1 / 9;
}
.vertical {
position: absolute;
grid-column: span 4 / -1;
grid-row: 1 / 3;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.vertical>h2{
margin:0;
grid-column:1;
grid-row:2;
display:grid;
overflow:hidden;
transform: scale(-1);
font-size:2em;
color:ivory;
/*text-shadow: 0 calc(100vh - 3.2rem) ,0 calc(-100vh + 3.2rem); 3.2rem = body gap + hauteur/margin de nav */
}
.vertical>h2> up-text{
display:block;
writing-mode: vertical-rl;
animation: slide 6s linear infinite /*or*//*reverse*/;
filter: drop-shadow( 0 calc(100vh - 3.2rem)) drop-shadow( 0 calc(-100vh + 3.2rem));
}
@keyframes slide {
from{transform: translatey(100%);}
to{transform: translatey(-100%); }
}
/* le block conteneur */
.marquee-rtl {
max-width: 100%; /* largeur de la fenêtre */
overflow: hidden; /* masque tout ce qui dépasse */
height: 500px;
}
/* le bloc défilant */
.marquee-rtl.animated > :first-child { /* on ajoute la classe .animated */
display: inline-block; /* modèle de boîte en ligne */
padding-right: 2em; /* un peu d'espace pour la transition */
padding-left: 100%; /* placement à droite du conteneur */
white-space: nowrap; /* pas de passage à la ligne */
animation-name: defilement-rtl; /* référence à la règle @keyframes mise en oeuvre */
animation-duration: 15s; /* valeur à ajuster suivant la longueur du message */
animation-iteration-count: infinite; /* boucle continue */
animation-timing-function: linear; /* pas vraiment utile ici */
}
@keyframes defilement-rtl {
0% {
transform: translate3d(0,0,0); /* position initiale à droite */
}
100% {
transform: translate3d(-100%,0,0); /* position finale à gauche */
}
}
/* ---------------- */
/* défilement vertical */
.marque-ver {
position:relative;
max-width: 100%;
overflow: hidden;
}
.marque-ver > div {
position:relative;
animation: defilement-ver 10s infinite linear;
}
@keyframes defilement-ver {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(0,-100%,0);
}
}
/* ---------------- */
Qu'est-ce que j'ai encore mal fait ?
Merci
