Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

takeoff

Takeoff Logo

A smooth landing page to help your app take off!

Demo

A demo speaks a thousand words.

Dependencies

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.

takeoff-anatomy

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.

  1. Add in your title, favicons, theme CSS, header and footer

  2. Add your screens, text blocks and decoration blocks. Make sure the quantity of blocks of each type is the same.

  3. 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.

  1. 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).

You can’t perform that action at this time.