Animation engine and custom HTML structures

Below we have described few custom HTML structures used in this theme and the animation engine used for the frontpage effects on scrolling.

Headers

The theme contains few additional header elements:

  • .gk-big-header – it creates a big header used on the demo frontpage:

    EVERYTHING YOU NEED TO CREATE A WEBSITE

    <h2 class="gk-big-header">Everything you need to create a website</h2>
  • .gk-small-header – it is combined with the .gkTimeIcon element on the demo frontpage:

    CREATE A WEBSITE QUICKLY & EASILY

    Quisque justo lorem, condimentum condimentum ornare vel, consectetur id justo? Phasellus leo lacus, rhoncus dictum auctor.

    <h3 class="gk-small-header">Create a website quickly & easily</h3>
<p class="gk-time-icon">Quisque justo lorem, condimentum condimentum ornare vel, consectetur id justo? Phasellus leo lacus, rhoncus dictum auctor.</p>

Columns layout

If you need to create a few columns of text as in the contact section of this demo at frontpage, please use the following structure:

<div class="vertical-column-WIDTH">
<h3>HEADER</h3>
<p>CONTENT</p>
</div>

Where WIDTH is a value: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55 or 60 and means a column of 10%, 15%, 20%, 20%, 30%… etc. width.

Other important elements

Features section

To create the features section, please use the following structure:

<div class="gk-features gk-perspective">
<a href="#" class="gk-rocket"><span>Rocket</span>Innovative Design</a>
<a href="#" class="gk-badges"><span>Badge</span>Award-winning Agency</a>
<a href="#" class="gk-mouse"><span>Mouse</span>Your ideas, imagination</a>
<a href="#" class="gk-piggy"><span>Piggy</span>Save Your Time & Money</a>
</div>

The gk-perspective CSS class is useful if you need to create a 3D transformation effect.

Team section

You can create a section with the list of your team members using the following structure:

<div class="gk-team" data-count="7">
<figure>
<a href="#"><img src="/theme/images/demo/team1.png" alt=""></a>
<figcaption><a href="#">Mark</a></figcaption>
</figure>

...

<figure>
<a href="#"><img src="/theme/images/demo/team7.png" alt=""></a>
<figcaption><a href="#">Remzi</a></figcaption>
</figure>

<a href="#">More About Us</a>
</div>

The most important parameter in the above code is the data-count attribute, which specifies the amount of columns with the team members. It can be a number in range 1-10

Animations

The Startup theme supports a simple animation engine activated on scrolling – you can specify one of the four animation types:

  • flip – it is a 3D rotation with origin in the top edge of the element
  • horizontal – simple horizontal animation
  • scale – it is a CSS transform scaling animation
  • vertical – simple vertical animation

When the user scrolls page to the proper place of the website then the loaded CSS class is added to the element and animation is activated. The animation for the specific element is defined by the two data-* attributes:

  • data-animation – specifies the animation type (one of the four mentioned types or your own ones – if you define it in the CSS code)
  • data-delay – specifies the animation start delay in miliseconds

So if you want to animate two containers with the flip and the horizontal animation type and the second container animation should be delayed by 500ms you should create the following code:

<div class="gk-perspective"><!-- gkPerspective class added for the better flip animation effect -->
<div data-animation="flip" data-delay="0">Content</div>
<div data-animation="horizontal" data-delay="500">Content</div>
</div>
Scroll al inicio