Une semaine au poil – #18

Pour cette nouvelle semaine, je vous propose de découvrir un superbe site avec des animations en SVG, des conseils pour réaliser votre portfolio, des CodePen avec du paralax, et du mix-blind-mode. Pour finir, un peu de fun pour animer un effet de refresh.

Réaliser un effet paralax avec plusieurs calques

Réaliser un effet de paralax n’est pas forcément très complexe, mais le réaliser avec plusieurs calques l’est un peu plus. Voici une parfaite illustration de cet effet. Réalisé en CSS et JavaScript.

See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.

Sweet Magnolia Gelato : beau site avec du style

C’est sans aucun doute le site que je préfère cette semaine. Doté d’un graphisme qui colle très bien à l’univers, et agrémenté d’animations réalisées en SVG un peu partout sur le site. Juste ce qu’il faut.
Je vous conseille également d’aller jeter un oeil à la page our story.

A voir ici : http://www.sweetmagnoliagelato.com/

Quelques conseils pour la réalisation de votre portfolio

Vous vous demandez sans doute comment faire de votre portfolio le meilleur outil possible pour vous faire embaucher ou montrer ses compétences en tant que freelance. Invision, sur son blog, a mis en ligne un article avec quelques conseils vraiment bien sentis.

A voir ici (en anglais) : http://blog.invisionapp.com/creating-a-design-portfolio/

Utilisation de mix-blend-mode multiply

Vous avez des images à fond blanc sur votre site et vous n’avez pas envie de les détourer, ou tout simplement avoir un style différent, voici un effet très simple à mettre en place en CSS avec mix-blend-mode : multiply.

See the Pen knockout white backgrounds from images with mix-blend-mode by Wes Bos (@wesbos) on CodePen.