Blog d'aide de Blog4ever

Bonjour 

Ce n'est pas un souci,  Il n'y a pas urgence,  Je ne sais pas comment on nomme cet effet, Je sais que je pourrai le réaliser en version gif animé, mais le rendu et le résultat ne serait pas géniaux, Je devine que tu es déjà bien occupé, mais comme tu sembles aimé les défis... 

Et comme des images sont parfois plus explicites que des mots ...Pour répondre à ta question, C'est toujours dans le but d'animer mes articles... 










 
... et dans le sens de la dernière à la première image...

J'ai bien trouvé des sites qui parlent d'images qui défilent dans des contenus, derrière d'autres images,  Mais pas qui glisse dans les deux sens, 
Comme un tiroir qui sort et rentre, 

Donc, si cela te dit de t'attaquer à ce projet, j'en serai ravie, 
Bonne fin d'après-midi, 
Mi Neth, 

Je me préparais un cacao quand il m'est revenu cet article, 
Tirelote de l'An

Je pense qu'une modification du code employé pour faire que les deux images se croisent mais se chevauchent serait un bon début,
Qu'en penses-tu? 

coucou

dans le code il faut remonter l'image du dessous.....

.defilement2 {
height: 300px;   
overflow: hidden;
position: relative;
 margin: -300px;   
}

_____________________________


.defilement1 {
 height: 300px;   
 overflow: hidden;
 position: relative;
}
.defilement1 p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);   
 transform:translateX(-100%);
/* Apply animation to this element */   
-moz-animation: defilement1 10s linear infinite;
-webkit-animation: defilement1 10s linear infinite;
animation: defilement1 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes defilement1 {
0%   { -moz-transform: translateX(-100%); }
40%   { -moz-transform: translateX(0%); }
60%   { -moz-transform: translateX(0%); }
100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes defilement1 {
0%   { -webkit-transform: translateX(-100%); }
40%   { -webkit-transform: translateX(0%); }
60%   { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100%); }
}
@keyframes defilement1 {
0%   {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);       
}
40%   {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);       
}
60%   {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);       
}
100% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
}
  .defilement2 {
height: 300px;   
overflow: hidden;
position: relative;
margin:-300px;  /* moins 300px*/
}
.defilement2 p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);   
transform:translateX(100%);
/* Apply animation to this element */   
-moz-animation: defilement2 10s linear infinite;
-webkit-animation: defilement2 10s linear infinite;
animation: defilement2 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes defilement2 {
0%   { -moz-transform: translateX(100%); }
40%   { -moz-transform: translateX(0%); }
60%   { -moz-transform: translateX(0%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes defilement2 {
0%   { -webkit-transform: translateX(100%); }
40%   { -webkit-transform: translateX(0%); }
60%   { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes defilement2 {
0%   {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);       
}
40%   {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);       
}
60%   {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);       
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}

Merci 

Elles sont bien au même niveau ...n'y ai même pas pensé, pffff, pauvre fille..., me reste plus qu'à combiner avec la position fixe ou sticky pour que seule une image glisse, J'y suis presque arrivée, mais dans un contenu et l'image qui glisse passe dessous ce dernier et non derrière l'autre image, 
Après, il faudra que j'adapte selon les dimensions, positions et transparence,

...Dans la version définitive de ce que je cherche à réaliser, pendant le laps de temps où les deux images se rassemblent, elles ne font plus qu'une...

Je verrai ça plus tard, 
Profite de ce temps clément, :sol:

Coucou

J'ai bien avancé, Bien, bien, bien, même, 
Je pense qu'il est encore possible d'ajuster, mais je peine, 
Bon, mes images ne sont pas top calées pile poil, Faut dire que je les ai faites fissa, 
Mais je crois que celle qui glisse et fait, en largeur, la moitié de l'image de fond devrait revenir un peu plus loin vers la droite, 
Tu peux regarder? c'est dans le brouillon test, code image kigliss, 
Merci, 
Bonne fin de soirée, 
Mi Neth, 

 

Tralala, larèreuh, Yesss,  Yeaah,  

Bonne après-midi
Tu peux clore ce post, 

Dernière modification le vendredi 17 Septembre 2021 à 15:46:37