Quelqu'un saurait-il comment reproduire l'effet de scroll reproduit ici
https://framapic.org/1In3944I1QL9/1r7wslHxL9LB.jpg
L'idée est d'avoir un div A "fixe" qui se fait recouvrir par les divs inférieurs lors du scroll de la page.
La difficulté est que le site est responsive : la hauteur du DIV A
n'est pas constante
Quelqu'un a fait des choses similaires ?
Merci (beaucoup) d'avance !
Bonjour,
je n'ai pas fait ça précisément, mais d'autres choses un peu similaires ( des animations en js liées au scroll ).
Pour cela, je me suis basé sur cette lib :
http://scrollmagic.io/
Et a vue de nez, on doit pouvoir faire aussi ce genre de choses avec, mais il va falloir coder un peu de js autour pour gérer les div affichées et celles qui ne le sont pas encore.
salut,
et si la div A était en fait un background fixé, la div B glisserait dessus de la même façon…
Le 01/03/17 à 08:11, chankalan@choc0.net a écrit :
salut,
et si la div A était en fait un background fixé, la div B glisserait
dessus de la même façon...
Pourquoi pas, mais,la difficulté, c'est de gérer "la hauteur" apparente du DIV A puisqu'elle est variable... Je ne vois pas trop quel principe adopter...
soit une marge définie suivant les tailles d’écran avec des règles css @media pour que ça colle ?
soit un petit peu de javascript qui peut calculer une marge par un rapport avec la largeur ?
Le 01/03/17 à 08:28, chankalan@choc0.net a écrit :
soit une marge définie suivant les tailles d'écran avec des règles css
@media pour que ça colle ?
Ah !, je ne vois pas : la marge haute n'est pas constante...
Il faudrait dans ce cas que l’image soit en background de body par exemple, et que la div .header ait un padding-bottom de la taille de l’image…
NB : Si le site se redimensionnait selon des paliers moins progressifs, ça ferait que quelques tailles à gérer, à chaque palier, et disons que dans cet exemple ce serait plus facile à régler en css…
Bonjour, (je ne sais pas si je réponds au bon endroit...)
Si .page_sommaire #header { position: fixed; }
et que .sommaire-content { margin-top: 58.85vw; }
ça devrait donner une orientation à ta question, si j'ai bien compris ta problématique 
Cordialement,
françois
Le 28/02/2017 23:17, Manu a écrit :
Quelqu'un saurait-il comment reproduire l'effet de scroll reproduit ici
https://framapic.org/1In3944I1QL9/1r7wslHxL9LB.jpg
L'idée est d'avoir un div A "fixe" qui se fait recouvrir par les divs
inférieurs lors du scroll de la page.
La difficulté est que le site est responsive : la hauteur du DIV A
n'est pas constanteQuelqu'un a fait des choses similaires ?
Merci (beaucoup) d'avance !
Le 04/03/17 à 14:44, Graphie a écrit :
Bonjour, (je ne sais pas si je réponds au bon endroit...)
Si .page_sommaire #header { position: fixed; }
et que .sommaire-content { margin-top: 58.85vw; }
ça devrait donner une orientation à ta question, si j'ai bien compris ta
problématique
Ça aurait été trop facile ! Pour un site non responsive oui, ça fonctionnerait (hauteur constante) mais, là, non... Quand la fenêtre du navigateur est redimensionnée, le contenu se redistribue et la hauteur varie et il faudrait que margin-top varie en parallele...
... l'unité vw est proportionnelle !! Je viens de le tester quand même !!
Bien évidement que 58.85vw est "responsive" si tu vas par là : testes et tu verra
Le 04/03/2017 15:20, Manu a écrit :
Le 04/03/17 à 14:44, Graphie a écrit :
Bonjour, (je ne sais pas si je réponds au bon endroit...)
Si .page_sommaire #header { position: fixed; }
et que .sommaire-content { margin-top: 58.85vw; }
ça devrait donner une orientation à ta question, si j'ai bien compris ta
problématiqueÇa aurait été trop facile ! Pour un site non responsive oui, ça
fonctionnerait (hauteur constante) mais, là, non... Quand la fenêtre du
navigateur est redimensionnée, le contenu se redistribue et la hauteur
varie et il faudrait que margin-top varie en parallele...
Un peu de lecture ?
Le 04/03/2017 15:20, Manu a écrit :
Le 04/03/17 à 14:44, Graphie a écrit :
Bonjour, (je ne sais pas si je réponds au bon endroit...)
Si .page_sommaire #header { position: fixed; }
et que .sommaire-content { margin-top: 58.85vw; }
ça devrait donner une orientation à ta question, si j'ai bien compris ta
problématiqueÇa aurait été trop facile ! Pour un site non responsive oui, ça
fonctionnerait (hauteur constante) mais, là, non... Quand la fenêtre du
navigateur est redimensionnée, le contenu se redistribue et la hauteur
varie et il faudrait que margin-top varie en parallele...
