[RÉGLÉ] Background changeant de couleur suivant la position sur la page

[reivilo78]

Hello,
sur la page d'accueil du site weinvest.be quand on descend dans la page, d'un coup le fond devient gris foncé, puis quand on continu de descendre, à un certain moment cela redevient blanc.
Auriez-vous une idée de comment est-ce réalisé ?

[pmleconte]

Bonjour,

Il s'agit de l'effet parallax, appelé aussi onepage.

Cela peut être fait soit par le template (si vous faites une recherche google "joomla template onepage", vous allez avoir pas mal de résultats), soit par un module.

J'ai fait un petit module qui fait cela : voir démo : https://www.conseilgouz.com/espace-tests/test-onepage

Pascal

[daneel]

Bonjour,

Les couleurs de fond sont définies dans la css. Des div divisent la page en plusieurs "sections".

Un code javascript ajoute une classe css à ces "div" lors du scroll à un certain nombre de pixels du haut de page,
ce même code supprime cette classe des que l'on depasse d'un nombre de pixel (addclass et removeclass).

Dans le fichier css, cette classe ne contient uniquement une couleur de fond avec un petit effet de transition css (pour eviter de changer brutalement de couleur).

C'est le même principe avec cette exemple sur le fond de la page (body) : https://codepen.io/Paulie-D/pen/rjJcB
La couleur change dès que l'on scroll à 200 px et plus...

 if (scroll >= 200) {
        $("body").addClass("blue");
    } else {
        $("body").removeClass("blue");
    }

Le code javascript est fusionné avec d'autres dans un seul fichier index.min.js pour optimiser le chargement.

Edit : ce n'est pas un effet parallax, juste une couleur avec un effet de transition
Par exemple avec sp pagebuilder, les sections sont définies avec un id ( section-id-1532439959882 ) donc il suffira de remplacer le $("body") de l'exemple par $("#section-id-1532439959882").addClass("nomdelaclassecss") pour obtenir le même effet.

[pmleconte]

.....
Edit : ce n'est pas un effet parallax, juste une couleur avec un effet de transition
...

Bonjour,

Sur la page donnée, il y a un peu de tout, donc, j'y avais vu l'effet parallaxe (avec l'image de fond qui change en scrolling),et il y a aussi d'autres effets sur les images, vidéos, compteurs, .... désolé d'avoir dérivé

Pascal

[reivilo78]

Bonjour,

Les couleurs de fond sont définies dans la css. Des div divisent la page en plusieurs "sections".

Un code javascript ajoute une classe css à ces "div" lors du scroll à un certain nombre de pixels du haut de page,
ce même code supprime cette classe des que l'on depasse d'un nombre de pixel (addclass et removeclass).

Dans le fichier css, cette classe ne contient uniquement une couleur de fond avec un petit effet de transition css (pour eviter de changer brutalement de couleur).

C'est le même principe avec cette exemple sur le fond de la page (body) : https://codepen.io/Paulie-D/pen/rjJcB
La couleur change dès que l'on scroll à 200 px et plus...

if (scroll >= 200) {
$("body").addClass("blue");
} else {
$("body").removeClass("blue");
}

Le code javascript est fusionné avec d'autres dans un seul fichier index.min.js pour optimiser le chargement.

Edit : ce n'est pas un effet parallax, juste une couleur avec un effet de transition
Par exemple avec sp pagebuilder, les sections sont définies avec un id ( section-id-1532439959882 ) donc il suffira de remplacer le $("body") de l'exemple par $("#section-id-1532439959882").addClass("nomdelaclassecss") pour obtenir le même effet.

Merci daneel
Je suis bien sous SP pagebuilder, mais je n'arrive pas trop à savoir où mettre ce code.
J'ai essayé dans dans custom css dans helix, mais ça ne fonctionne pas, ni dans custum javascript.
Le fichier index.min.js se trouve où ?

Je dois insérer ce qu'il y a ci-dessous pour mon site en test websseo.eu/Dehaut/

if (scroll >= 200) {
$("section-id-1532099412048").addClass("blue");
} else {
$("section-id-1532100883711").removeClass("white");
}

[daneel]

Bonjour,

pour du code js, il y a plusieurs techniques déjà évoquées sur le forum. ajouter au template, utiliser ou développer un plugin...
Par exemple on peut essayer de demander gentiment lomart avec up

https://up.lomart.fr/demo/action-addscript

[lomart]

Bonsoir,

Par exemple on peut essayer de demander gentiment lomart avec up
https://up.lomart.fr/demo/action-addscript

Bien vu Daneel, UP est une possibilité. Code à ajouter à un article ou un module personnalisé

{up addscript | jquery}
$(window).scroll(function(){
    if($(document).scrollTop() >=200)
        $("body").addClass("bg-bleuPale");
    else
        $("body").removeClass("bg-bleuPale");
});
{/up addscript}

bg-bleuPale est une classe standard de UP.

J'ai fait une démo sur cette page https://up.lomart.fr/demo/action-addscript. Il suffit de se déplacer pour voir le fond changer de couleur

Pour un module personnalisé, je recommande le mien (https://lomart.fr/extensions/lm-custom) qui permet de mettre du HTML, JS et CSS sans risque d'effacement
On n'a même pas besoin de UP. Dans l'onglet Javascript, on ajoute

 jQuery(document).ready(function($) {
  $(window).scroll(function(){
    if($(document).scrollTop() >=200)  
       $("body").addClass("bg-bleuPale");
   else
      $("body").removeClass("bg-bleuPale");
  });
});

et dans l'onglet CSS, on ajoute la classe pour le fond si nécessaire

.bg-bleuPale{background:LightBlue}

[lomart]

J'ajoute un petit effet, la couleur change progressivement avec ce shortcode (ou la règle CSS équivalente)

{up addcsshead=body[transition: background 2s ease-in]}

[Eddy.vh]

C'est mieux servi que sur un plateau.

[reivilo78]

Hello, merci daneel et lomart
Je viens de passer 2 bonnes heures à comprendre ces bouts de codes et en faire ce que je veux.
Suis pas du tout programmeur, mais j'aime bien comprendre au lieu de bêtement recopier, même si je me suis bien énervé dessus lol

lomart pour l'effet de transition, tu mets où ce petit bout de code ?

Question bête surement, mais comment faites-vous pour connaître la hauteur scrollTop() >=1000) ?

[lomart]

lomart pour l'effet de transition, tu mets où ce petit bout de code ?

Cela dépend de la méthode retenue. Mais c'est une simple règle CSS.

Question bête surement, mais comment faites-vous pour connaître la hauteur scrollTop() >=1000) ?

c'est une dimension en pixel.

[Eddy.vh]

Ca risque de poser probleme selon l'affichage non? Desktop, tablette, smartphone.

[lomart]

Bonsoir Eddy

Ca risque de poser probleme selon l'affichage non? Desktop, tablette, smartphone.

Je ne pense pas. la meta viewport doit définir l'échelle

https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Balise_meta_viewport

[reivilo78]

Cela dépend de la méthode retenue. Mais c'est une simple règle CSS.


c'est une dimension en pixel.

J'ai utilisé votre module LM CUSTOM et inséré le code javascript que j'ai modifié avec mes section id comme Daneel avait expliqué.
Puis j'ai inséré votre code css.
Par contre je ne trouve pas comment appliquer la transition :-(

[lomart]

Dans l'onglet CSS, il faut ajouter

body{transition: background 2s ease-in;}

La même chose que UP mais avec des accolades à la place des crochets