Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Faire se stopper deux images défilantes...

230 appréciations
Hors-ligne
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, 

2974 appréciations
En ligne
Bonsoir Mi Neth

Je ne pense pas que ce soit possible.
Essaie toutefois de rechercher sur Google, "images défilantes".

"La vie ce n’est pas d’attendre que l’orage passe, c’est d’apprendre à danser sous la pluie".

1839 appréciations
Hors-ligne
Coucou

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

Je ne pense pas que ce soit possible mais regardes ici



230 appréciations
Hors-ligne
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, 

1839 appréciations
Hors-ligne
Une image qui défile puis revient dans l'autre sens ! --->elle stop au survol de la souris.



 





230 appréciations
Hors-ligne
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, 

526 appréciations
Hors-ligne
tous le monde

Mi Neth

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? 

Avec balise HTML MARQUEE  comme la indiqué 

En ajoutant :

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

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


Mais il faudrait que j'arrive à faire se stopper le défilement

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="slidewidth="250"

Nom de votre image ou une information   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



 ce site sur les Paramètres modifiables  ici



A toi d'exploiter toutes les possibilités 

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

230 appréciations
Hors-ligne
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, 

2974 appréciations
En ligne
@Mi Neth@ ce serait bien de liker ceux qui t'aident, çà leur ferait plaisir car ils se creusent vraiment la tête.

"La vie ce n’est pas d’attendre que l’orage passe, c’est d’apprendre à danser sous la pluie".

526 appréciations
Hors-ligne
Re Mi Neth

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, 


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

Nom de votre image ou une information   Google est ton ami !


Nom de votre image ou une information   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="slidewidth="345"


Nom de votre image ou une information   Google est ton ami !


Nom de votre image ou une information   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.




Ce serait bien de liker ceux qui t'aident, çà leur ferait plaisir car ils se creusent vraiment la tête.

Merci gros  



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

295 appréciations
Hors-ligne


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



230 appréciations
Hors-ligne
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, 

526 appréciations
Hors-ligne
 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
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 


230 appréciations
Hors-ligne
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, 

295 appréciations
Hors-ligne


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)





Code dans le HTML de l'article




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



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

230 appréciations
Hors-ligne
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

295 appréciations
Hors-ligne
 Mi Neth

Je pense que  ou  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



230 appréciations
Hors-ligne
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, 

230 appréciations
Hors-ligne
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, 

295 appréciations
Hors-ligne
 Mi Neth
 

230 appréciations
Hors-ligne
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 ,  ou  ont une tite minute pour clore, Merci, 
A tous, Bonne journée, 
Mi Neth, 

2974 appréciations
En ligne

"La vie ce n’est pas d’attendre que l’orage passe, c’est d’apprendre à danser sous la pluie".
Ce sujet est fermé, vous ne pouvez pas y répondre
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits conseils.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5884 autres membres