5568 sujets

Sémantique web et HTML

HTML5 objet rebondissant

Bonjour , je me présente, paul favier étudiant en dèv sur Lyon !

Je donne un petit coup de jeune a mon site perse, paulfavier.com.

Je rencontre un petit problème, j'aimerais avoir en bas de mon écran un objet ( une balle ou autre ) avec un texte à l'intérieur tel que "scroll me it's free".

J'aimerais que cette objet suive le scroll de la page comme un objet en position:fixed mais j'aimerais en effet de rebond.

Voilà, je ne suis pas si je suis clair, je suis entrain de chercher du côté de la balise canvas !

En attente de toutes réponse, Merci d'avance !
Administrateur
À mon humble avis, le plus simple est dans un premier temps d'animer un élément HTML quelconque (img) avec du JavaScript (par exemple jQuery ou une bibliothèque équivalente, qui dispose déjà d'effets de type Bounce) ou de CSS Animations
Si par "effet rebond" tu entend un genre de "retard" par rapport au scroll, le plus simple serais d'après moi de combiner css et javascript de la manière suivante.
J'utilise la valeur du scroll pour définir le top de l'élément, ce qui simule une position fixed, j'ajoute une transition de 0.5s pour donner un effet fluide. Si jamais javascript est désactivé, l'élément sera en fixed car le javascript ne pourra pas intervenir pour le passer en absolute.

Edit; j'ai un peu mieux saisi ce que signifiait "effet rebond" j'ai adapté mon script avec un setTimout. J'ai ajouté des pochettes en arrière-plan juste pour avoir un repère (sinon on a du mal à percevoir le scroll).
Modifié par juliendargelos (30 Mar 2013 - 23:26)
Les animations CSS sont idéales pour ce genre d'effets, le JS ne sera nécessaire que pour IE9- (qui n'implémentent pas les anims).
Sujet clos
Aller à