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 ! ????

Précision.
Non, le site qui est montré, ce n'est pas l'effet parallaxe. Il ne suffit pas de nommer un sélecteur ".parallax-one" pour que la fonction le soit. L'effet parallaxe, ce sont deux parties du site, souvent un background et des images ou des block de texte, qui bougent à des vitesses différentes au moment du scroll, l'une par rapport à l'autre. Le même effet que lorsque l'on regarde un paysage qui défile quand on est en voiture ou en train. Les parties les plus proches défilent plus rapidement devant nos yeux que les parties les plus éloignées.
Sur l'exemple, le background reste fixe et le reste bouge. Cet effet a parfois été nommé "faux parallaxe".
Un exemple d'effet parallaxe, parmi des centaines d'autres http://www.iutopi.com/
L'effet parallaxe consomme beaucoup de ressources.

@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)

Pas de problème, je m'étais aussi fait prendre, il y a deux ou trois années, pensant faire du parallax.
J'ai abandonné l'idée du "vrai" parallax pour le moment. D'une part, ça consomme beaucoup de ressources, le navigateur calcule constamment les positions à travers le JavaScript. D'autre part, c'est un avis personnel, mais ça a tendance à me fatiguer, ces blocs qui bougent dès qu'on touche la souris. Parfois c'est pourtant bien réussi.
Bonne journée.
@vahia
Ne soit pas dérouté par cette conversation, si tu veux obtenir l'effet que tu as montré en exemple, il faut bien utiliser la première méthode que j'ai préconisée, ou celle de de drphilgood, mais pas le site parallax dans le post du 23 05 à 9 h 35.

@Vahia
Après j'oserais te dire que ce qui compte c'est que tu obtienne l'effet que tu recherche quel-qu’en soit le nom et qu'il soit fluide et fonctionnel.

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.