Bande défilante

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Bande défilante

Message par Laférosse Jeu 7 Sep 2023 - 10:57

Bonjour j'aimerai faire une bande défilante avec un fond fixe et "Bubblegum" en défilant. J'aimerai aussi qu'il n'y ai pas de vide ni à gauche ni à droite et que le défilant et le fond soient sur toute la largeur du forum. Et enfin si possible, j'aimerai que la bande défilante se ralentisse quelques secondes (5) pour ensuite redéfiler à l'allure précedente.. (Cette bande défilante se trouvera dans la page d'accueil.)

Bande défilante Pp2s

Merci par avance.
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Toryudo Ven 8 Sep 2023 - 10:09

Bonjour !

Avec du texte, ce sera compliqué, mais avec une image en background, ce sera faisable.
Le principe devrait être le suivant :
- un div qui prend toute la largeur du forum donc
- une image en background de ce div, avec un repeat-x pour répéter l'image à l'infini horizontalement
- une animation pour bouger le background-position, ajouter un délai, etc.

Est-ce que vous pourriez fournir l'image suivante avec la qualité/taille souhaitée ?
Bande défilante Image189
Ce sera elle qui sera répétée.
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1323
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Laférosse Ven 8 Sep 2023 - 18:15

Bonsoir Toryudo merci beaucoup. Voici l'image. En hauteur elle fait 138px.
https://zupimages.net/up/23/36/qp88.png
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Toryudo Sam 9 Sep 2023 - 9:51

Bonjour !

Alors, dans votre Template overall_header, vous allez ajouter le code <div id="defilback"></div> juste en dessous de la partie du <div id="header-banner">, comme ceci :
Code:
<div id="header-banner">
    <div class="wrap">
        <!-- BEGIN switch_desc -->
        <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
        <!-- END switch_desc -->
    </div>
</div>

<div id="defilback"></div>

Plus qu'à ajouter le code CSS suivant qui permet d'afficher votre image et de la faire défiler.
Pour traiter le ralentissement et la reprise du défilement, j'ai opté pour un défilement "ease-in-out", j'espère que ça ressemble à ce que vous imaginiez !
Code:
#defilback {
  height: 138px;
  border: 1px solid black;
  background-image: url(https://www.zupimages.net/up/23/36/qp88.png);
  background-position: 0;
  animation: defilbackmove ease-in-out 20s infinite;
}

@keyframes defilbackmove {
  0% {background-position: 0;}
  100% {background-position: 1608px;}
}
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1323
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Laférosse Sam 9 Sep 2023 - 15:08

Bonjour Toryudo, merci beaucoup c'est très bien.  Yes J'aimerai juste que la bande défilante se place en dessous de l'image et du texte svp (avec un espace afin que cela ne soit trop collé).
Bande défilante Gvaa

Pour précision, l'image (femme) est placée dans le template overall_header , comme ceci :
Code:
  <div id="emplacementAccueil">
</div>
    <!-- BEGIN html_validation -->
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bande défilante

Message par Toryudo Sam 9 Sep 2023 - 17:08

Dans ce cas, il faut repositionner l'élément via CSS, parce qu'on ne pourra pas déplacer directement le <div> dans le Template (sinon, il ne sera plus sur 100% de la largeur de la page). On peut s'en sortir avec cette modification sur l'élément #defilback, ça semble convenir niveau positionnement et espacement :
Code:
#defilback {
  position: absolute;
  top: 550px;
  width: 100%;
  height: 138px;
  border: 0 solid #000;
  background-image: url(https://www.zupimages.net/up/23/36/qp88.png);
  background-position: 0;
  animation: defilbackmove ease-in-out 20s infinite;
}
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1323
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Laférosse Sam 9 Sep 2023 - 18:21

Désolée, j'ai mis résolu trop vite, peut-on remettre mon sujet en cours, svp ? Merci.
Il reste 2 ajustements.
Il faudrait que la bande défilante passe au dessus de la pub (sinon on la voit à peine).
Bande défilante Qh4a

J'aimerai que la bande défilante ne soit visible que sur la page d'accueil.
Bande défilante Msix

Merci.
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bande défilante

Message par Toryudo Lun 11 Sep 2023 - 11:51

Bonjour !

Pourriez-vous indiquer comment vous faites pour que l'image et le texte (qui se trouvent au-dessus de la pub) ne soient visibles qu'en page d'accueil ? Comme ça, on fait la même chose pour la barre qui défile.

Edit : j'ai bien reçu votre MP.

Ce que vous allez faire, c'est :
- dans votre Template overall_header, supprimez la partie <div id="defilback"></div> et déplacer la partie <div id="emplacementAccueil"></div> juste au-dessus de <div id="wrap">, comme ceci :

Code:

<div id="emplacementAccueil"></div>

<div id="wrap">

    <!-- BEGIN switch_ticker -->

- dans votre page /h3-, ajoutez <div id="defilback"></div> juste avant le </body>
- enfin, dans le CSS précédent, vous pouvez supprimer les propriétés position: absolute; et top: 550px;, vous n'en aurez plus besoin

Au final, on charge la barre défilante en même temps que le contenu de emplacementAccueil (qui ne s'affiche que sur l'accueil) et on fait en sorte que la barre ne passe plus derrière la pub.
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1323
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Laférosse Mar 12 Sep 2023 - 9:27

Bonjour Toryudo, Je pense avoir bien suivi les étapes. Malheureusement la bande défilante se trouve au dessus de l'image+texte. J'aimerai quelle soit en dessous svp.



Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bande défilante

Message par Toryudo Mar 12 Sep 2023 - 10:13

Bonjour !

Il faut vraiment que le <div id="defilback"></div> soit à la fin de votre page /h3- ; pour l'instant, je le vois au début, juste après le <meta charset="utf-8" />. C'est pour ça qu'il est au-dessus de l'image et du texte.
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1323
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bande défilante

Message par Laférosse Mar 12 Sep 2023 - 10:35

J'ai vu mon erreur. Merci infiniment pour votre aide. Yes ok

Avec l'aimable participation de Mäven sur La Tambouille des râleuses.
Laférosse

Laférosse
****

Messages : 359
Inscrit(e) le : 10/04/2022

https://omygod.forumactif.com
Laférosse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum