brewhk / Takeoff
Labels
Projects that are alternatives of or similar to Takeoff
takeoff
A smooth landing page to help your app take off!
Demo
A demo speaks a thousand words.
Dependencies
- jQuery
- EventEmitter
- Lethargy (Soft dependency)
- smartscroll
Getting Started
Download the repository and have a look at the examples. If you get stuck, refer back to these examples.
Elements with an id
or class
beginning with takeoff__
has a function within Takeoff. You may add additional classes but do not change or remove the takeoff__
ID/class.
Structure
The landing page is made up of a header and/or footer, and a series of slides. Every slide has three blocks - the screens, the texts, the decorations.
The header and footer will stay in place, but the slides can be changed with up/down scroll, keyboard and swipe.
Theme
The look of your page is determined by the theme, which is just a CSS file on top of the base CSS. Use this to position and scale your decorations. In the examples, the theme files are named after the theme's name.
Usage
We have created a barebone template to help you get started - it contains no content but many comments to guide you along.
-
Add in your title, favicons, theme CSS, header and footer
-
Add your screens, text blocks and decoration blocks. Make sure the quantity of blocks of each type is the same.
-
Download and include the
EventEmitter.min.js
,lethargy.min.js
,smartscroll.min.js
,takeoff.min.js
(in that order) before the</body>
closing tag and initiate the plugin.<script src="https://rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js"></script> <script src="https://rawgit.com/d4nyll/lethargy/master/lethargy.min.js"></script> <script src="https://rawgit.com/d4nyll/smartscroll/master/smartscroll.min.js"></script> <script src="/js/takeoff.min.js"></script>
You may wish to combine and minify the
.js
files into one file. Just be sure to keep the load order described above.
-
Initiate and take off!
<script> $(function() { $.takeoff({ changingBackground: true, slideDuration: 700 }); }); </script>
You can pass an options object into $.takeoff()
; the properties are detailed in the following section.
Options
changingBackground
Takeoff can subtly change the background colour of your page between different slides. Set the changingBackground
option to true and add a data-tf-background-color
to every .takeoff__backgroundBlock
element. .takeoff__backgroundBlock
blocks without a data-tf-background-color
attribute will have a white (#ffffff
) background.
<section class="takeoff__backgroundBlock" data-tf-background-color="#ff556b">
Section 1
</section>
slideDuration
The duration of the slide animation, in miliseconds (ms).