Du webdesign au Html, css et JS
Il nous arrive souvent de se balader sur Dribbble et de voir des animations gifs comme vous pouvez le voir sur des articles d’inspiration ui ux ou d’expérience utilisateur design. Certains intégrateurs se sont fait plaisir et nous font plaisir de transcrire ces design en code
Exemple de menu mobile
Cliquez sur le menu en haut à droite
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »aNYWKE » default_tab= »result » user= »karlovidek »]See the Pen <a href=’http://codepen.io/karlovidek/pen/aNYWKE/’>Mobile navigation animation</a> by Karlo Videk (<a href=’http://codepen.io/karlovidek’>@karlovidek</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple de formulaire
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »mPLPwj » default_tab= »result » user= »THEORLAN2″]See the Pen <a href=’http://codepen.io/THEORLAN2/pen/mPLPwj/’>Sign in and Sign up – Single Form</a> by Dany Santos (<a href=’http://codepen.io/THEORLAN2′>@THEORLAN2</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple de formulaire de contact animé
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »zrYrVb » default_tab= »result » user= »tari »]See the Pen <a href=’http://codepen.io/tari/pen/zrYrVb/’>Modal Contact Form</a> by ari (<a href=’http://codepen.io/tari’>@tari</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple de mac qui s’ouvre en 3D
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »vzeyc » default_tab= »result » user= »zacharyolson »]See the Pen <a href=’http://codepen.io/zacharyolson/pen/vzeyc/’>Css version of macbook dribbble</a> by Zachary Olson (<a href=’http://codepen.io/zacharyolson’>@zacharyolson</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple de chronomètre
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »ONZWoX » default_tab= »result » user= »hilotacker »]See the Pen <a href=’http://codepen.io/hilotacker/pen/ONZWoX/’>Stopwatch</a> by Hilo (<a href=’http://codepen.io/hilotacker’>@hilotacker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple d’accordéon mobile
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »eZVzBL » default_tab= »result » user= »SoufianeAbid »]See the Pen <a href=’http://codepen.io/SoufianeAbid/pen/eZVzBL/’>flat accordion</a> by Soufiane Abid (<a href=’http://codepen.io/SoufianeAbid’>@SoufianeAbid</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Exemple de formulaire de recherche
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »vGjbYJ » default_tab= »result » user= »poporetto »]See the Pen <a href=’http://codepen.io/poporetto/pen/vGjbYJ/’>Search Form</a> by Andrias (<a href=’http://codepen.io/poporetto’>@poporetto</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Un menu mobile en CSS uniquement
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »lKcvs » default_tab= »result » user= »poppe1219″]See the Pen <a href=’http://codepen.io/poppe1219/pen/lKcvs/’>Mobile menu, CSS only</a> by poppe1219 (<a href=’http://codepen.io/poppe1219′>@poppe1219</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Infini animé
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »BjRdRX » default_tab= »result » user= »ciprianionescu »]See the Pen <a href=’http://codepen.io/ciprianionescu/pen/BjRdRX/’>Infinity Loop (2D)</a> by Ciprian Ionescu (<a href=’http://codepen.io/ciprianionescu’>@ciprianionescu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Icon d’upload animée
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »QyeMKP » default_tab= »result » user= »clementGir »]See the Pen <a href=’http://codepen.io/clementGir/pen/QyeMKP/’>Dribble Upload Animation Concept</a> by Clement Girault (<a href=’http://codepen.io/clementGir’>@clementGir</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Liste de réseaux sociaux
[codepen_embed height= »600″ theme_id= »0″ slug_hash= »gzHDs » default_tab= »result » user= »gumetis »]See the Pen <a href=’http://codepen.io/gumetis/pen/gzHDs/’>gzHDs</a> by Erick (<a href=’http://codepen.io/gumetis’>@gumetis</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]