27816 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ais fais une section qui devrait servir d'arrière plan qui bouge en fonction de la postion de la souris pour mon site, seul problème est qu'elle agis comme une section normale et q'elle bloque la superposition des autres éléments.
J'ais fais des recherches et je suis tombé sur la propriété z-index, pour l'utiliser, il faut que ma section soit fixée, je l'ais fais et j'ais mis le z-index a -1. Les autres éléments censés la superposer ne le font pas et le background ne bouge plus en fonction de la souris !

Voici mon code :
<p>test</p>
        <section class="module" id="module"></section>


css:
body{padding: 0;margin: 0;}

section{
    height: 500px; width: 500px;
    background: url(../background.png);
    background-color: #2c2f33;
    overflow: hidden;

    background-attachment: fixed;
    position: fixed;
    z-index: -1;
}


C'est la première fois que je le fais et si sa fonctionne sa rajoutera quelque chose de sympa au site, merci d'avance. Smiley biggrin


J'ais trouvé une piste ! Mon site référent est celui de YAGPDB, j'ais entendu parler de parralax.js et BINGO, j'ais retrouvé un parramètre de parralax.js dans la code source de https://yagpdb.xyz/ . Je vais maintenant essayer d'y voir plus clair. Smiley edit Modifié par AnderCSS (12 Aug 2020 - 17:29)
J'ais donc trouvé la solution pour ceux que sa interesse, il faut utiliser la librairie js Parallax.js, mettre section en position relative, et ensuite 2 div en position absolute qui seront respectivement, le background parallax et le contenu superposé, le contenu aura un z-index de 1 et le background 0. Les 2 éléments devraient se superposer, ne reste plus qu'a les placer. Cela devrait donner un joli résultat tel que celui du site https://matthew.wagerfield.com/parallax/.

Bonne chance ! Smiley lol
Modifié par AnderCSS (15 Aug 2020 - 13:34)