5139 sujets

Le Bar du forum

Salut,
Toutes les animations du haut de la page sont des animations en pur CSS, pas du tout de JS pour cette partie de la page et c'est vrai que c'est assez cool ! Les poissons également, même la queue !
Wouahhh juste du css pour les poissons !

J'ai l'impression qu'ils sont généré aléatoirement !

Si quelqu'un a un tuto je suis preneur, je dois faire un site et j'aimerais m'en inspirer !
On est bien d'accord, c'est juste les animations qui sont en CSS, le corps du poisson et la queue sont 2 images...
Merci c'est ce genre de site que je recherche pour m'inspirer des animations! il est au top!
voici un résumé : super design par leap (pingpong)
-les poissons sont localisées dans la zone .landing-view .background-handler .element-handlers .... .fish-tank .fish-1 .fish-animation animated infinite
upload/48731-alsapoisso.jpg

-poisson composé de 2 image : fish-fin2.png ( queue) et fish2.png ( corps)
upload/48731-alsadeuxpo.jpg

-total de poissons : 10 appariés par 2 ( trajectoire dans sens différent , un gauche a droite et l'autre inversement) . Pour fish-2 les différences en rouge pour les 2 items sont :
<div class="fish fish-2 fish-animation animated infinite"><div class="fish-tail fish-fin-animation animated infinite"></div><div class="fish-head"></div></div>
---
<div class="fish invert fish-2 fish-invert-animation animated infinite"><div class="fish-tail fish-fin-animation animated infinite"></div><div class="fish-head"></div></div>

-ils sont crées sur les bords et après avoir traversé le centre ils ralentissent pour disparaitre sans atteindre l autre bord .

-tous les poissons ont des tailles vitesses et trajectoires différentes .

-le scroll vers le haut fait avancé vers la gauche en haut le sous marin et inversement .

-les bulles naissent au niveau du sol et disparaissent avant le niveau de la mer.

-en mode mobile le scroll (fleche gauche ) des bieres apparait alors que pas d item a gauche !! idem si on est tout a droite : l'icone droite reste présent alors que pas utile ( code ici ok ) !!
Modifié par 75lionel (09 Jun 2016 - 17:08)
Oh le design est peut-être bien fait... mais est-ce que l'on retient facilement le nom de la bière, est-ce que le site a atteint ses objectifs...
Smiley rolleyes

Que quelqu'un se soit bien amusé, ça, ça ne fait pas de doute...
Smiley smile