SlapAndThink

Sur le web on trouve des tonnes et des tonnes de tutoriaux et ça c’est plutôt pas mal. Très utile pour apprendre à réaliser des choses toujours plus compliquées et précises, ils le sont nettement moins quand on ne parviens pas à les incorporer dans nos créations (ou à la faire incorporer par d’autres …).

Et oui, parce que je suis sûre que lors de votre navigation, vous remarquez des sites web sur lesquels se trouve un effet et un design que vous voulez absolument reproduire.

Nous voici donc sur ce billet où sont réunis plusieurs tutoriaux qui sont utilisés par de vrais sites internet. Et par « vrais sites » j’entends bien sure des sites qui ont réussis une intégrations parfaite de ces différentes méthodes que nous galérons parfois à incorporer à notre design.

Le point commun de tout ces sites est donc de se construire autour d’un effet, en le subliment et en l’utilisant pleinement.

1 L’effet de parallax

Effet de parallax

Cet effet de parallaxe est vraiment sympa. En effet, il permet d’enchaîner différents backgrounds dans la même page, ainsi, lorsque le visiteur scroll dans la page, il peut voir ces images en fond, superposées les unes par rapport aux autres. Un effet toujours unique malgré le fait que de plus en plus de site l’utilisent.

Le site | Le tutoriel

2 Mouse Drag

Mouse Drag

Le site | Le tutoriel

Cet effet de glissade vous permettra de réaliser, comme sur le site ci-dessus, un bel effet de transition pour la création d’un slide ou toute autre idée que vous auriez.

3 Panneau coulissant

Panneau coulissant

Le site | Le tutoriel

Un effet vraiment sympa pour les formulaires de connexion ou de contact.

4 Effet de survol

Effet de survol

Le site | Le tutoriel

Un effet de survol au passage de la souris peut permettre d’afficher plus d’informations relatives à l’image survolée. Utilisé principalement dans les galeries, ce petit effet est apprécié.

5 Chargement de la page

Chargement de la page

Le site | Le tutoriel

Un chargement de page est utile lorsque cette dernière doit afficher de lourdes images. Le chargement est donc là pour indiquer à l’utilisateur que le site est en train de se charger, et lui permet de patienter pour voir le résultat final.

6 Scrollbar

Scrollbar

Le site | Le tutoriel

Quoi de pire que d’avoir les scrollbars de votre site qui ne se fondent absolument pas dans le design générale de votre site web ?

Dans ce tutoriel vous allez pouvoir transformer les barres de scroll, en de véritable élément HTML pouvant être personnalisés grâce au CSS.

7 Mouse Wheel

Mouse wheel

Le site | Le tutoriel

Ce tutoriel vous permettra d’utiliser la molette de votre souris pour pourvoir naviguer de façon fluide dans une galerie ou dans un site web entier.

8 Slide Navigation

Slide navigation

Le site | Le tutoriel

Les menus en slides permettent une pointe d’originalité dans vos webdesigns. Attention, il s’agit de réaliser un effet en trouvant le juste milieu entre le nombre d’informations à afficher et la fluidité de l’ensemble.