A minimalist theme for showcasing products. Images and text become opaque as they slide in. Each pagination link is a preview of a steps product image.
This theme is powered by Sequence.js - The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
To add a Sequence.js theme to your web page, complete the following:
modern-slide-infolder to the same folder as the page you'd like the Sequence.js theme to appear on
<head></head>tags on your page, below existing stylesheets. For example:
modern-slide-in/index.html, copy everything inside the
<body></body>tags, then paste into the page you'd like the theme to appear on.
modern-slide-in/index.html, copy any
<script></script>elements found toward the bottom of the page and paste just before the closing
</body>tag. This should include a reference to the Sequence.js library, its third-party dependencies, and the theme's options, for example:
Save your file and view in the browser. You're done!
Optional: Internet Explorer 8 will show the mobile layout regardless of browser width. If you'd like to fix that, add a reference to respond.js after all references to CSS. This will add media query support to older browsers. For example:
<!--if lt IE 9><script src="modern-slide-in/scripts/respond.min.js"></script><!endif-->
To customize how a theme behaves, its Sequence.js options can be changed in
modern-slide-in/scripts/sequence-theme.modern-slide-in.js. See Options in the documentation.
To customize how a theme looks and how its step's transition, refer to the theme's stylesheet:
It is recommended to read Setting Up a Theme in the documentation for an overview of how transitions are applied to Sequence.js steps.
If you are familiar with Grunt.js, you can use it to automate common development tasks. This however is optional and isn't required for a theme to work.
Sequence.js and the themes it powers use Grunt.js to automate useful tasks. With Grunt.js installed (see Grunt.js' Getting Started), use the following command to install this theme's development dependencies:
Once development dependencies have installed you can use the commands
grunt serve and
This command will start a development environment with the following automated tasks:
.scssfiles found in the
scssdirectory, autoprefix them and then copy to
You only need to run
grunt serve per each development session as the watch task will continue to operate as you modify files.
grunt command is a manual version of the watch sub tasks listed for the
grunt serve command.
This theme is made available under a GPLv3 license.
Copyright © 2015 Ian Lunn Design Limited
This theme is powered by Sequence.js. Sequence.js is made available under the following licenses where applicable: