Scroll avec effet de parallax diagonal + effet de perspective

Bonjour à tous et à toutes,

Voici mon image de départ :


Je souhaiterai positionner des éléments de ma maquette sur ce fond et faire en sorte que, quand on scrolle :
- Les éléments défilent en suivant la flèche, c'est-à-dire du haut à droite au bas à gauche (donc un effet de parallaxe diagonal) avec, une difficulté supplémentaire, un effet de perspective (lui aussi en diagonal puisque le point de fuite est en haut à droite) de sorte que les éléments soient petits en haut à droite et grands en bas à gauche
- Le fond lui, ne bouge pas

Étant loin d'être un expert en HTML/CSS et encore moins en JS, je voulais savoir : est-ce que c'est possible de faire ça en HTML/CSS et JS ?
Si oui, comment ?

Je vous remercie par avance pour vos réponses

Bonne journée

P.S : Je suis parfaitement conscient que c'est pas du tout responsive mon histoire. C'est juste un défi technique. Quoique, ça pourrait en être un autre (défi technique) justement que ça soit aussi responsive

Salut,
c'est quoi tes "éléments de maquette" ?
"Quand on scrolle", tu parles d'un scroll verticale ? (même si c'est moins courant, il y aussi la possibilité de faire apparaître une bar de scroll horizontale)

Je pense qu'il doit être possible de faire quelque chose du genre avec du javascript :
- Intercepter les mouvement de scroll
- Calculer la nouvelle taille des éléments (je suppose qu'on doit pouvoir definir un genre de ratio entre la taille de ta grosse fleche de gauche et la taille de la petite fleche de droite, et qu'il faudra qu'une fois arriver en haut l'element est subit une réductino qui correspond à ce ratio)
- Calculer la nouvelle position des éléments
- Faire apparaître le nouvel élément.

Et ensuite idéalement réussir à affiner tout ça avec des jolies transitions css

Hello,

Je vois deux points qui pourraient te faire avancer.

1. En (re)lisant l'énoncé, le rendu que tu veux avoir ne me semble pas super clair. Est-ce que c'est un contenu texte qui va scroller en diagonale (comme le générique de Star Wars mais en diagonal ?) En que c'est un système de bloc qui vont se superposer (comme le coverflow de macOS mais en diagonal ? ? du coup, où irait les blocs déjà vu ?)

2. Il me parait évident que pour un code si conséquent, personne ne prendra suffisamment de temps pour l'écrire from scratch. Proposes déjà un code, des pistes et ensuite en pourra te donner d'autres pistes pour faire évoluer l'affaire

Si j'ai bien compris, le contenu serait "inversé à une page classique" (contenu à lire toujours en bas à gauche), est-ce que tu scroll vers le haut pour faire dérouler le contenu ou vers le bas ?

Dernière chose, c'est vrai que ca semble drôle à faire d'un point de vue technique, maintenant comme tu l'as dis, il faut bien réfléchir UI/UX/compatibilité en amont. Si j'étais toi, je créerais des maquettes beaucoup plus avancées qu'une simple flèche pour pouvoir déjà repérer les futurs problèmes.

Yordi

Bonjour,

je suis pas spécialiste de ce qui bouge mais quelques pistes / expériences tout de même :

- les CSS de perspective et transform 3D (MDN) permettent pas mal de choses bien puissantes. Par contre tu ne cherches pas à l'animer en fonction du temps mais du scroll donc le pur CSS n'est pas suffisant.
- mon collègue a utilisé https://github.com/Prinzhorn/skrollr pour https://www.4murs.com et c'est bien puissant. La configuration me paraît intuitive mais il est fort probable que ça ne le soit pas pour tout le monde… J'ai adapté ce qu'il avait déjà fait ; je crois pas que je me serais pas dépatouillé aussi facilement s'il avait pas autant mâché le travail, mais là il y a plein d'éléments animés différemment et beaucoup beaucoup de résolutions à prendre en compte et où vérifier que non jamais ça ne se superpose méchamment. Ce ne sont pas tes contraintes heureusement. Il y a bien d'autres scripts mais je ne me tiens pas du tout au courant sur ce sujet-là
Modifié par Felipe (04 Mar 2020 - 10:10)

Pour plus de précision, voici le rendu avec les éléments sur une maquette fictive et une double-flèche indiquant la direction du scroll :

Est-ce que ça vous aide comme explication du rendu final que je souhaiterais ?
En fait, c'est un effet de parallax 3D que je souhaiterais. Ou comment est-ce qu'on pourrait l'appeler ?
Modifié par spip93 (04 Mar 2020 - 10:51)

C'est déjà un peu plus clair.

Par contre vu que cela m'a l'air parallèle à gauche et à droite du texte, c'est que cela ne rapetisse pas en allant vers le fond ?

Ok, même si cela me semble illisible et une mauvaise idée à première vue, j'aime l'idée du challenge parce que je pense qu'il serait possible de trouver une manière simple de le faire.

J'avais une idée mais j'ai un petit problème et j'aimerais de l'aide … J'ai crée le codepen mais mon calc() basé sur ma var() css ne fonctionne pas comme je le pensais. Une idée ?

L'idée est donc simplement de transform le tout, et puis avec le petit JS qui va bien pour calculer la position du scroll et updater la valeur, de simplement translateX ce bloc.

Hop j'ai regardé un peu de mon coté et j'arrive à ça : https://jsfiddle.net/6yng4m82/

Edit : Quelques explications quand même

Pour le css :

overflow-x:hidden;

sur body permet de ne pas avoir de scrollbar horizontale.

transform: rotateZ(45deg);
transform-origin:top left;

sur le contenu permet de faire pivoter l'angle de vue à partir du coin supérieur gauche

   
position:absolute;
   left:50vw;
   width:50vw;

permet ensuite de "centrer" l'angle gauche au milieu de l'écran.

Ensuite on joue en javascript pour décaler la position au fur et a mesure que l'on scroll vers le bas :

function diagonale_scroll()
{
document.getElementById("pivote").style.left=(50+(window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight))*100)+"vw";
}

Le premier 50 de la formule correspond à la "position initiale" que j'ai mis également à 50 dans le css. Ensuite on calcule juste un ratio entre le scroll dans la fenetre et le scroll maximale que l'on peut faire et on le multiplie par 100.

L'idée con au départ, c'est que je décalais en même temps left et top pour simuler un mouvement en diagonale (cela me semblait "logique" de décalé en hauteur et en largeur pour faire une diagonale..) et en fait il ne faut pas toucher à la hauteur vu qu'elle bouge déjà automatiquement quand on scroll -_-, je me retrouvais à deplacé trop vite le contenu dans un sens par rapport à l'autre, du coup j'ai cru que je m'étais loupé dans ma formule au départ..
Modifié par Mathieuu (04 Mar 2020 - 15:53)

je ne suis pas certain que ce soit un effet de parallax, je vois juste un contenu penché avec une perspective, je me trompe peut-être .

pour caché la barre de scroll de html, tu peut éventuellement la repasser dans body en la laissant à l’extérieur de HTML (en overflow:hiden) pour ne pas la voir.

exemple bricolé sans js avec une perspective approximative et des margin et padding autour de body pour y (con)centrer le contenu a voir https://codepen.io/gc-nomade/pen/ZEGXGOm
Modifié par gcyrillus (04 Mar 2020 - 17:58)