Scrollmagic: conception web amusante

Dans la conception de sites Web, une tendance est semblable au style adopté pour la réalisation des sites, qui est fortement accepté par les utilisateurs, généralement dans des périodes temporaires. Une partie des tendances à ce jour en 2016 et, apparemment, continuera de donner le ton en 2017, sont les animations et les longues sections avec beaucoup de défilement.

Ce n'est pas un secret que ce style est assez attrayant et amusant pour l'utilisateur, avec les animations que nous pouvons rendre la navigation sur le site intuitive et divertissante tant qu'elles sont bien utilisées. Pour cette raison, nous avons créé un tutoriel pour inclure des parchemins animés sur votre site Web, en utilisant le plugin jQuery ScrollMagic.

ScrollMagic: Fun Web Design

ScrollMagic est une bibliothèque faite en javascript pour réaliser des interactions lors du déplacement de sites Web. Il s'agit d'une réécriture complète de son prédécesseur Superscrollorama et son architecture est basée sur des plugins qui offrent une personnalisation et une extensibilité faciles.

C'est idéal si nous voulons implémenter certaines des choses suivantes:

• Animation basée sur la position ou le déplacement du site. Déclenchez l'animation ou synchronisez-la avec le mouvement du défilement. Ajoutez un effet de parallaxe sans trop d'effort. Créez une page avec un défilement infini, gérant le chargement du contenu avec ajax.

Fonctions ScrollMagic

• Performances optimisées, il est léger, flexible et permet une extensibilité. Gestion d'événements et programmation orientée objet. Il prend en charge la conception Web adaptative. Il prend en charge les mouvements dans les deux sens (horizontal et vertical) Il prend en charge les mouvements à l'intérieur des conteneurs (div), même multiple sur une seule page.Il fonctionne parfaitement pour les navigateurs: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Dans son référentiel GitHub, il a une documentation détaillée et de nombreux exemples d'application.

Obtenez ScrollMagic

Il est disponible pour l'obtenir de différentes manières.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Bower

bower install scrollmagic

3: gestionnaire de packages de nœuds

npm install scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Vous pouvez également lire Comment personnaliser la conception d'un e-mail dans Outlook

Installation et utilisation

L'installation est assez simple, nous n'incluons le fichier noyau que dans les fichiers html où nous voulons l'utiliser.

;

Pour l'utilisation, le plugin fournit un modèle de conception orienté contrôleur, auquel une ou plusieurs scènes sont ajoutées. Ces scènes sont utilisées pour définir ce qui se passe dans les conteneurs lorsqu'ils se déplacent vers un point spécifique.

Ce serait un exemple de base:

// init controller var controller = new ScrollMagic.Controller (); // crée une nouvelle scène ScrollMagic.Scene ({durée: 100, // la scène doit durer pour une distance de défilement de 100px offset: 50 // démarre cette scène après avoir fait défiler pour 50px}).setPin ("# my-sticky- element ") // épingle l'élément pendant la durée de la scène.addTo (contrôleur); // attribue la scène au contrôleur

Un exemple plus avancé serait, réaliser plusieurs décalages, son code source serait:

$ (function () {// attendre que le document soit prêt // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3,: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", durée: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // ajouter des indicateurs (nécessite un plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // build tween horizontal var tween_h = TweenMax.to ("# animate", 0, 5, {rotation: 360, easy: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({nom: "tourner"}) // ajouter des indicateurs (nécessite un plugin).addTo (controller_h);});

Vous pouvez trouver de nombreux autres exemples avec leur code source dans la documentation du plugin.

NOUS VOUS RECOMMANDONSComment faire une installation propre de Windows 10 à l'aide d'une clé USB