Comment faire ces animations dans un "Smartphone" ?

Par Louis2304, il y a 7 ans

Les bases HTML/CSS

Bonjour à tous,
Je ne cherche pas à avoir un code tout fait, mais à me diriger pour réussir ce que j'aimerai faire.

En effet, j'ai besoin de créer un site web avec une animation dans une image d'iPhone. L'animation est comme sur le site https://shine.fr en scrollant un iPhone se colle au dessus du site (j'ai déjà ça c'est simple.) mais je n'arrive pas à trouver comment les animations sont faites (en CSS? avec Animate CC?)

Donc si l'un de vous à déjà créer ce type d'animation, pourrait-il me dire quelle technologie il utilise (plugin?) parce que j'ai créé une div (de la taille de l'iPhone) sauf que c'est un vrai casse tête...

Merci beaucoup si vous savez m'aider.
Passez une agréable journée.

Louis

1 réponse

Laznet, il y a 7 ans

Bonjour,

Tout d'abord selon moi tu devrais détecter la position du scroll pour agir en fonction, après tu peux utiliser certaines librairie présenté sur ce site qui permette de créer des animations complexe avec des trucs qui s'enchaine. Par exemple il y a cette librairie.

Dans tous les cas tu auras besoin d'un minimum de javascript, déjà tout simplement pour la simple détection du scroll (car oui l'animation ne se joue pas tant que tu n'as pas atteint une certaines partie de la page).

Je t'invite à regarder cette page de présentation qui n'utilise pas forcément cette librairie, mais qui utilise le concept / l'idée derrière.

Sinon tu as ce tutoriel un peu plus ancien, mais tu peux toujours t'en inspirer.