RiGaSa

Le laboratoire de recherche, de développement et d'expérimentation de RiGaSa.

Parallaxe
GMaps v3
Images
GEarth
Polices
Visualisation
Traduire
Vidéo
Autres labos
- labo.rigasa
- RiGaSa.Geek

Pur CSS
Défiler
Sequence

.seq-in .content { transform: translateY(0); transition: .2s; }

Étape 1

Ajoutez facilement des transitions CSS aux applications par étapes en utilisant les classes CSS « in » et « out »

L'étape 1 est actuellement dans sa in¹ position. Regardez ce qui se passe lorsque vous passez à l'étape suivante.
.seq-out .content { transform: translateY(-100%); transition: .2s; }

.content { transform: translateY(100%); }

.seq-in .content { transform: translateY(0); transition: .25s; }

Step 2

Sequence.js s'occupe de la fonctionnalité afin que vous puissiez vous concentrer sur la présentation de votre contenu dans le style

En passant à l'étape suivante, vous avez causé l'étape 1 à la transition de in¹ la transition vers et out² l'étape 2 à la transition de start³ in⁴ . Le tout avec seulement plusieurs lignes de CSS.

Lorsque vous naviguez vers l'arrière Sequence.js peut automatiquement inverser ces transitions.
.seq-in .rotate { animation-name: rotate; animation-duration: 1s; }

.seq-in .fade { animation-name: fade; animation-duration: 1s; }

.seq-in .threed { animation-name: threed; animation-duration: 1s; }
Step 3

Create unique animated applications using any CSS properties you wish

Sequence.js doesn't limit you to specific HTML/CSS. Use the properties, attributes, workflow, conventions, and libraries you're familiar with.
- Transform
- Scale
- Rotate
- Fade
- 3D
- & more
.seq-in .touch { animation-name: rotate; animation: .35s 1.8s; }

.seq-in .touch-title-1 { animation-name: fade-out; animation: .3s 1.5s; }

.seq-in .touch-title-2 p { animation-name: slide-in; animation: .3s 2.35s; }

Build for a multi-device, modern web...

Fully responsive with touch support
.seq-in .content { transform: translateZ(0); will-change: transform; }

.seq-next { /* Makes an element a functioning next button */ }

.seq-touch { /* Styles for touch devices */ }
Toutes les fonctionnalités dont vous avez besoin pour les applications animées
Fully documented, along with 30+ options, and an easy-to-use API.
- Support réactif
- Animation accélérée matérielle⁵
- Support tactile
- Interface à l'implémenter facile à ajouter⁶
- Jeu/Cycle automatique
- Classes d'État pour un style facile⁷
- Préchargement
- & Plus
.browser-icon { transform: scale(0); transition: .2s; transition-timing-function: cubic-bezier(.55,1.58,.63,.99); }

.seq-in .browser-icon { transform: scale(1); }

.seq-fallback { /* Styles spécifiques au repli */ }
Supported in modern browsers
- Firefox
- Opera
- Safari
- Chrome
- Edge/
  IE10+
Avec un thème de repli pour les navigateurs hérités

Un curseur latéral traditionnel s'affiche automatiquement lorsqu'un navigateur ne prend pas en charge les transitions et les transformations CSS. Utilisez la .seq-fallback classe pour style Sequence.js dans les anciens navigateurs⁸.
- IE9
- IE8
/* Installation via NPM */ npm install sequencejs

/* Installation via Bower */ bower install sequencejs

Cette présentation est propulsée par...

Faites votre application étape animée dès aujourd'hui...
Afficher les thèmes de l'exemple Télécharger maintenant