Blog d'aide de Blog4ever

Bonjour, 
Ce n'est pas un souci, mais un projet,
Je voudrai faire se stopper, quelques secondes, deux images qui défileraient dans le sens inverse l'une de l'autre au moment où elles forment une troisième image, Comme une image coupée en deux dans le sens horizontal, 
Je sais faire défiler des images, comme des textes, comme les deux ensembles, Mais je n'ai pas trouvé ce que je cherche, Même quelque chose qui s'en approcherait, 
Du coup, je me demande si c'est possible? 
Merci d'avance à qui m'aidera, 
Bonne semaine, 
Mi Neth, 

Coucou

Moi j'ai réussi à voir des images défiler dans tous les sens et après j'ai arrêter la drogue.....:ptdr::ptdr::ptdr:

Je ne pense pas que ce soit possible mais regardes ici


Bonjour, 
Merci de m'avoir répondu, Au moins, je fais rire, C'est déjà ça,
J'ai vu ce site, il fait partie de ce que j'ai trouvé de plus proche, Mais les images ne s'arrêtent qu'au survol de la souris, 
J'ai même pensé à le faire en deux fois, Mais il faudrait que j'arrive à faire se stopper le défilement, au moins pour une image, sans l'aide de la souris, J'ai même pensé à laisser la deuxième image fixe, De cette façon, je réduis la synchronisation, 
Mais si ce n'est pas possible, je chercherai une autre idée, 
Je continue de chercher de mon côté, 
Bonne après-midi, 
Mi Neth, 

 

Merci, cette option est intéressante, 
Je vais essayer d'expliquer mieux ce que je cherche à faire,
Disons que ma première image représente un homme de la tête à la taille et qu'elle défile de gauche à droite, 
Et disons que ma seconde image représente ce même homme, mais là, de la taille au pieds et qu'elle défile de droite à gauche, 
Ce que je voudrais, c'est que les deux images s'arrêtent quelques secondes pour que l'homme apparaisse en entier, 
Il faudrait, si je prends l'option de la souris qu'elle stoppe les deux images en même temps, 
Je ne crois pas que ce soit possible, 
J'ai pensé à ne faire défiler qu'une des deux images, mais comment être certaine que lorsque l'autre va s'arrêter ce sera pile sur le première? 
Je continue mes recherches, 
Encore merci, 
Bonne nuit, 
Mi Neth, 

:b0:tous le monde

Mi Neth


Avec balise HTML MARQUEE  comme la indiqué simon

En ajoutant :

 la longueur de la zone de défilement par 'width'

le nombre de répétions de l'animation par "loop"



l'image s'arrête en bout de la  zone de défilement par "slide"

comme cette exemple si dessous:

Mon image n'a pas de répètition et défile avec une distance donné et stop au bout du défilement. car j'ai ajouté loop="1" behavior="slide" width="250"

  Google est ton ami !


Si tu creuses un peu et cherche bien c'est possible avec la balise HTML MARQUEE que deux images qui défileraient dans le sens inverse l'une de l'autre au moment où elles forment une troisième image, Comme une image coupée en deux dans le sens horizontal,  

en installant ton premier code à gauche de ta page
<*p style="text-align: right;"*>code image direction par la gauche<*/p>

et le deuxiéme à  droite de ta page
<*p style="text-align: left;"*>code image direction par à droite<*/p>



avec  les paramètres   width ,loop, et slide pour ses 2 codes



:oe: ce site sur les Paramètres modifiables  ici



A toi d'exploiter toutes les possibilités :ch:

Dernière modification le vendredi 16 Octobre 2020 à 11:07:58

Bonjour, 
Merci Stef, je n'avais pas ce site, je l'ai ajouté à mes favoris, j'y ai trouvé une information qui me manquait, 

Je crois que ce que je veux faire n'est pas possible parce que quelque soit la direction que je fais prendre à mes images, c'est right qui domine, Sauf, si je les fais aller toutes les deux dans le sens left, 

Passe une bonne journée, 
Mi Neth, 

Re Mi Neth



Pourtant j'ai fait l'essaie dans un brouillon sur mon blog et ça fonctionne j'ai deux direction différente et right ne domine pas

  Google est ton ami !

  Google est ton ami !

Par contre je me suis trompé  dans le code il faut la direction opposé

en installant ton premier code à droite de ta page
<*p style="text-align: left;"*>code image direction par la gauche<*/p>

et le deuxiéme à  gauche de ta page
<*p style="text-align: right;"*>code image direction par la droite<*/p>


Voila ce que sa donne sur ce forum
j'ai ajouté loop="3" behavior="slide" width="345"

  Google est ton ami !

  Google est ton ami !

Les 2 images s'arrêteront au bout de la 3éme répétition est seront l'un en dessous de l'autre.




MerciNana gros  



Dernière modification le vendredi 16 Octobre 2020 à 15:08:42

:bd:

J'ai trouvé ce sujet très intéressant. Alors je me suis aussi lancé dans les recherches, surtout ma préférence c'est toujours le web anglophone plus fourni avec Google Com.

Je suis tombé sur un site, avec une approche qui me permet d'arriver à ce test dans mon blog:

https://www.contrelecourant.com/test

J'ai essayé sur plusieurs navigateurs PC et sur Android, c'est nickel.

En retouchant judicieusement ces codes on devrait pouvoir se rapprocher du résultat escompté avec les images.

Voici le site en question:

https://www.quackit.com/css/codes/marquees/how_to_stop_a_marquee_automatically.cfm


:am:

Bonsoir, 

En aparté, Si je pense à remercier en rédigeant mes messages, c'est vrai que je ne pense pas à liker,  Ce n'est pas un réflexe chez moi, Mais ça ne veut pas dire que je n'apprécie pas l'aide qui m'est apportée, 

Concernant mon projet, J'ai pensé à tester en insérant mes images défilantes chacune dans un sens opposé à l'autre, 
D'abord dans un tableau à deux cellules, Elles sont allées dans le même sens, 
Ensuite dans deux tableaux à une cellule, Là, encore, elles sont allées dans le même sens, 
Je ne désespère pas si Stef y arrive, je ne vois pas pourquoi, je n'y parviendrai pas, 
Sinon, le test de Kiamgo, c'est pile ce que je veux faire avec mes images, 
Encore merci pour l'aide que vous m'apportez, 
Passez une bonne nuit, 
Mi Neth, 

:b0: tous le monde

 Kiamgo

J'adore les animations avec le CSS avec @keyframes.
 C'est ce que j'utilise  personnellement depuis un petit moment sur mon blog.
Car cela permet de faire des animations avec différents styles à différents moments de l'animation. 
 Combien de répétition sur l'animation doit avoir, à quelle vitesse elle doit s'exécuter, pendant combien de temps .

Je suis d'accord avec Mi neth:ch:
c'est pile ce qu'elle cherchait.
 Ton animation avec  @keyframes permet de faire une animation plus finement et plus moderne  que ce qu'on pourrait obtenir avec la balise HTML MARQUEE 

:am:

Bonsoir, 
Je progresse et régresse, Soi, j'obtiens que mes deux images défilent en sens inverse, mais seule l'image du haut reste dans mon cadre, celle du bas défile d'un bout à l'autre de mon écran, 
Soi, elles restent toutes les deux dans mon cadre, mais vont dans le même sens, 
Il arrive que l'image du haut apparaisse et disparaisse progressivement et qu'elle rebondisse, 
J'ai retenté de les inclure dans un tableau à deux cellules, puis dans deux tableaux à une cellule, 
Dans le deuxième cas, si je peux dire ça comme ça, j'ai un tableau qui mange l'autre, Du coup ma deuxième image n'apparaît pas, 
Donc pour le moment, j'essaie d'arriver à les faire défiler en sens inverse tout en les obligeant à rester dans mon cadre, 
Ensuite, je passerai à la deuxième étape, les faire s'arrêter l'une au dessus de l'autre quelques secondes, 
Merci pour l'aide, 
Passez une bonne nuit, 
Mi Neth, 

:bd:

J'ai remplacé le texte par des images, et ça fonctionne plutôt bien.

https://www.contrelecourant.com/test


Voici mes codes, à toutes fins utiles.

Code CSS personnalisé (dans le menu "Codes", à insérer dans l'article)

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



Code dans le HTML de l'article

<br /> <br /><div class="defilement1"> <br /><p><a class="zoomable" href="https://static.blog4ever.com/2006/04/162628/big_pommehaut_8790421.png"><img style="max-width: 100%; display: block; margin-left: auto; margin-right: auto;" src="https://static.blog4ever.com/2006/04/162628/pommehaut_8790421.png" alt="Pomme_haut" width="150px"></a></p> <br /></div> <br /><div class="defilement2"> <br /><p><a class="zoomable" href="https://static.blog4ever.com/2006/04/162628/big_pommebas_8790422.png"><img style="max-width: 100%; display: block; margin-left: auto; margin-right: auto;" src="https://static.blog4ever.com/2006/04/162628/pommebas_8790422.png" alt="Pomme_bas" width="150px"></a></p> <br /></div> <br /> <br />


Je ne sais pas pourquoi les "br" apparaissent partout. Ils ne font pas partie des codes. Il faudra donc les enlever.

:am:

Dernière modification le dimanche 18 Octobre 2020 à 01:35:27

Bonjour kiamgo et merci à toi, 

J'ai vu que tu as insérer tes images en html, moi je l'ai fais en lien direct, c'est peut-être ce qui pose problème, je vais tester et je reviens te dire, 
Encore merci, 
passe une bonne soirée, 
Mi Neth, 

Re, J'ai retenté et testé à partir de tes scriptes ...j'ai supprimer les br/br... j'ai vu que toi, tu as fais un seul script css pour les deux images, J'en avais un par images, Mais pour autant ça ne veut rien savoir,  

En fonction de mes nouveaux tests, que je les inclus dans un cadre ou non, je peux avoir les deux images, Mais soi elles sont fixes ou se déplacent dans le même sens, Soi, l'image du haut n'apparaît pas et celle du bas, ça me met une barre coulissante en bas et elle se trouve loin dans la marge, 
J'ai tenté une permutation entre les images, Ça ne change que l'image pas le résultat, Je m'en doutais, mais sait-on jamais, 




Dernière modification le dimanche 18 Octobre 2020 à 17:52:38

:bd: Mi Neth

Je pense que simon, Nana ou Bisonours sont mieux placés pour t'aider à ajuster ces codes dans ton blog, et intervenir directement si nécessaire.
Je ne fais que partager l'approche et mon expérience.

Tout ce que je peux te dire c'est ce que j'ai fait dans mon cas.

1. Par rapport au problème des images qui vont dans le même sens
Il faut veiller à ce que chaque image soit dans son "div" et "class"(defilement1 et defilement2). Parfois les deux peuvent se mélanger pendant que tu ajoutes des éléments dans l'éditeur de texte. tu dois donc toujours vérifier ton HTML.

2. Concernant les images qui n'apparaissent pas
Tu dois ajuster le paramètre "height" de defilement1 et defilement2 dans le CSS personnalisé.
Chez moi, comme tu peux le voir, j'ai mis le "height" "defilement1" à 133px, celui de "defilement2" à 150px, parce que c'est ce qui correspond le mieux à mes images. Dans ton cas il faut certainement ajuster. Je suis arrivé à mes paramètres après plusieurs essais.

Enfin, je te conseillerais de réussir d'abord à faire tout ça dans un nouvel article vide, et sans tableau, avant de l'appliquer dans d'autres contextes.

Bonne continuation
:am:

Merci Kiamgo, 

En effet dans la zone html, il arrive que ça se chamboule, Je ne désespère pas d'y arriver, Y'a pas de raison, 
Je viens de tester en version brouillon et ligne  deux autres projets qui eux fonctionnent bien, Alors, je ne vois pas pourquoi je ne parviendrai pas à installer cette petite animation, 
J'ai tenté sans les br de copier/coller tes codes, Même bug, 
Mais je ne désespère pas, 

Bonne nuit à toi, 
Mi Neth, 

Bonsoir, 

Je ne comprends pas pourquoi, mes tentatives se soldaient par du grand n'importe quoi et chaque fois que je retournais voir dans mon bloc html, soi tout était chamboulé, soi certains mots ou balises ou caractères avaient disparu, 
Là, je retente et YES!!!
Ça fonctionne, 
Merci pour l'aide, 
Passez tous une excellente soirée, 
Mi Neth, 

 Mi Neth
 :am:

Merci Kiamgo, 

Je suis très surprise d'avoir réussi, Je n'ai fais que recopier ma dernière tentative et là, vas savoir pourquoi, ça fonctionne, Pour le moment, c'est en brouillon, Mais j'ai fais une sauvegarde, 

Si Nana, simon ou Bisonours ont une tite minute pour clore, Merci, 
A tous, Bonne journée, 
Mi Neth,