Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:27 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: Introduction to Sequence.js

Introduction

00:36
  • Overview
  • Transcript

Sequence.js is a CSS animation framework which you can use to create sliders, presentations, and other step-based applications. It has all the necessary functionality built in; all you have to do is add your content and styling. This short course will teach you the basics of using Sequence.js and lay the foundation for further exploration of all its options and features.

1. Introduction

1.1 Introduction

Sequence.js is a CSS animation framework used to create sliders, presentations and other step based applications. In this short course, I'm going to teach you the basics of using this framework by creating something very simple. A product feature slider. I'll show you how to install sequence, explain the HTML structure, launch the plugin, apply styling, animations. And finally, show you a couple of options and themes. I'm Ardi Perdilla. Welcome to introduction to Sequence.js. Let's begin.

2. Working with Sequence.js

2.1 Installation

Hello and welcome to lesson number one. Lets see how we can install Sequence.js, and the first method is to go to their website which is sequence.js.com and go to Download. And here, you have the option of downloading the files manually or if you're using GitHub, if you're familiar with it you can a fork the GitHub repository. Or additionally you can use it via command line using NPM or Bower. Now, if you don't know how to use NPM or Bower, then I suggest you use these two methods. Either one of these two methods. But, if you do, then go ahead and use whatever package manager you want. In my case, I'll be using Bower. So, I'm gonna open up my terminal window here. I am using a code editor. That has a terminal built in but if you don't have one then simply open a terminal in your OS. And, once you navigate to your working folder you would say bower or npm install sequencejs, and that created the bower_components folder. That contains sequencejs along with some optional plugins, like hammerjs, images loaded and so on. Now, the files that you need can be found inside the scripts folder, sequence.js or sequence.min.js, I recommend you use .min.js. Now, if you downloaded sequence from either the website or from GitHub, you might find a slightly different folder structure, but the important files are the same, either sequence.js or sequence.min.js. And that's the end of this lesson. In the next one, I'll explain how to write the proper markup. See you there.