Photos en arrière-plan fixe

Bonjour à tous,
je viens vers vous pour bénéficier de votre expérience car perso je sèche.

Sur ce site : Vilapithaya, quand on scroll après "Spaces" on voit que le site semble devenir transparent pour laisser apparaître des photos fixes qui se dévoilent au fur et à mesure du scroll.

Je ne vous demande pas de me mâcher le travail mais simplement, sauriez-vous me dire comment on procède pour faire ce genre de chose ? C'est que du css ou y'a du JS ? Quelle est l'approche ?

Je vous remercie par avance !

salut, avec ceci en css, les div défilent et les images restent fixe:
avec 100vh pour la hauteur ou moins

.div {
position: relative;
background-image: url("image");
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
}

Modifié par drphilgood (21 May 2023 - 17:45)

div1 img1
div2 img2
...

Bonjour,
il y a deux particularités sur le site donné en référence. D'une part l'apparition de div (texte ou autres blocks) au scrool. Un grand classique, on en a parlé sur ce forum tout récemment.

Sinon pour ta question, ça se fait en css, ça se nomme "Background-Reveal" ou "Background-Révélé". Le site ne devient pas transparent, des images apparaissent en background. Il y a plusieurs méthodes, toutes très proches les unes des autres (drphilgood en donne une ci-dessus). Une description très succincte, il faut dans le html créer des div contenant des blocks de texte ou autres et dans le css créer autant de backgrounds renfermant chacun une image. Les différents sélecteurs des images background auront le même nom que la class du html. Exemple html pour une image:

<div class="fixed-bg bg-1-1">
Ici ce que tu veux (texte, même une autre image img)
</div>

Exemple css:

.bg-1-1 {
  	background-image:........}

C'est très sommaire comme description, il faut aller voir le code du lien donné plus bas. À mesure que l'on descend sur la page, l'image suivante background apparaît.
Voici le lien à partir duquel je me suis basé pour faire un site dans ce style. Je l'ai beaucoup remanié, mis en flexbox et adapté à mes besoins. La base est là, sur le pen :
https://codepen.io/Wendy-Ho/pen/gqEEpZ
Un autre lien, avec d'autres options et une seule image :
http://thenewcode.com/950/Background-Reveal-Scroll-In-Pure-CSS
Modifié par Bongota (21 May 2023 - 18:01)

Bonjour,

Ce que tu cherche à faire porte un nom, c'est un effet parallaxe.

en voici un exemple en CSS

https://codepen.io/time4t/pen/xJoxGq

Merci à tous pour vos réponses ! Je kiffe la communauté Alsacreations et sa bienveillance !

Je vais bosser sur les infos que vous m'avez fournies et si je galère je vous dirai.

Encore merci ! ????

@Bongota

Je peux me tromper mais je dirais oui et non, après avoir revus mes sources.

Parallaxe c'est un terme générique parállaxis mouvement alternatif voir altération selon la déclinaison. Je ne pensait pas que l'allais refaire du grec un jour moi.
Ça ne veux pas dire que les deux objets sont obligatoirement en mouvement au même moment.
Un exemple ici même :

https://www.w3schools.com/howto/howto_css_parallax.asp

Sur cet exemple cela nous donne un effet de perception de profondeur. En gros une différence de mouvement entre l’arrière plan fixe et son changement d'image à un instant T et le mouvement rapide de ce qui est proche quand on le fait défiler.

Dans parallaxe on à aussi le parallaxe scrolling, issu du monde du jeu vidéo qui là est l'effet de faire avancer différents claques superposés à différentes vitesses, ce qui est l'exemple que tu as donné.

Je passe les détailles sur le traveling, les champs, et tout le reste.

Mais je peux ma tromper.

[Edit] Entre temps, pendant que tu répondais, j'ai ressorti mon Lexicon, et deux trois autres livres sur le sujet. Désolé.
Modifié par uniuc (24 May 2023 - 07:45)

uniuc a écrit :
@Bongota

Je peux me tromper mais je dirais oui et non, après avoir revus mes sources.

Parallaxe c'est un terme générique parállaxis mouvement alternatif voir altération selon la déclinaison. Je ne pensait pas que l'allais refaire du grec un jour moi.
Ça ne veux pas dire que les deux objets sont obligatoirement en mouvement au même moment.
Un exemple ici même :

https://www.w3schools.com/howto/howto_css_parallax.asp

Sur cet exemple cela nous donne un effet de perception de profondeur. En gros une différence de mouvement entre l’arrière plan fixe et son changement d'image à un instant T et le mouvement rapide de ce qui est proche quand on le fait défiler.

Dans parallaxe on à aussi le parallaxe scrolling, issu du monde du jeu vidéo qui là est l'effet de faire avancer différents claques superposés à différentes vitesses, ce qui est l'exemple que tu as donné.

Je passe les détailles sur le traveling, les champs, et tout le reste.

Mais je peux ma tromper.

Merci, le Grec nous fait retourner à nos sources, en effet.
On en apprend tous les jours, j'ignorais que le W3schools nommait cette fonction aussi parallax. Tu as bien fait de le noter, mais faire la différence entre les deux effets avec le même nom n'est pas facile. D'autant plus que l'un se fait avec du simple css, l'autre avec JavaScript.
Enfin, comme dit, chacun trouvera l'effet qui lui convient.