Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

SCROLLMAGIC

Par Alexandre MARTIN Publié le 13/09/2017 à 14:53:09 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Présentation

Scrollmagic est une librairie Javascript qui permet une multitude d'interaction lors du scrolling d'une page web. Elle permet de facilement et rapidement rendre votre page web dynamique, interactive et donc plus attractive.

 

Les interactions sont nombreuses et les possibilités d'applications limitées à votre imagination : effet de parallaxe, défilement horizontal, changement de style ou de classe CSS, scroll infini, animations et bien d'autres encore. Il fonctionne sur desktop comme sur mobile, avec le scrolling vertical et/ou horizontal, et supporte le responsive design ce qui en fait un outil passe partout.

 

Le site http://scrollmagic.io/ (uniquement en anglais) propose une documentation bien fournie, ainsi qu'un espace de démo avec différentes interactions et le code associé.

Mise en place

Pour commencer, il faut faire référence à la librairie dans votre page web. Pour cela dans la balise "head" de votre page HTML, rajoutez la balise script suivante :

 

script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"

 

Il vous est aussi possible de télécharger les fichiers sources et les héberger avec votre site web pour en faire référence "localement". Cela a pour avantage de permettre un fonctionnement hors-ligne, ainsi que d'être à l'abri d'un éventuel changement d'adresse des sources ou d'une coupure de service. Pour le télécharger, il suffit de se rendre à cette adresse :

 

https://github.com/janpaepke/ScrollMagic/zipball/master

Fonctionnement

Le modèle de ScrollMagic fonctionne avec un Controller, une ou plusieurs Scènes et des Timelines.

 

La Timeline comprend une suite d'action que l'on veut faire faire aux élements de notre page, comme par exemple commencer par faire apparaitre une image, puis la faire doubler de taille, la faire ensuite tourner sur elle-même pour enfin la faire disparaitre pour laisser place à un texte.

 

Une Scène quant à elle va avoir une timeline, une durée définie en pixel pour savoir sur quelle "longueur de scroll" elle va avoir lieu, ainsi qu'un offset en pixel pour savoir à partir de quand elle commence.

 

Pour finir, le Controller gère les différentes scènes qui lui sont rattachées.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels