Build Any Site With Vertex

The Shape5 Vertex Framework is a set of functionality that creates the core logic and structure of a template, and is one of the most flexible, robust and powerful template frameworks available! With an easy to use backend, dozens of positions, endless options, and easy to understand workflow you can build anything on the Vertex framework.
Learn More

Adapt To Any Screen Size

At Shape5 we make responsive sites very easy to use and understand. There are many great features to allow you to setup your site across multiple platforms including: row distributions, hiding elements, off canvas menu, unique mobile menu, and much more. Be sure to resize your screen to see the responsive layout of Forte take effect.
Read More

Flexible Solutions Made Easy

Forte comes loaded with many great template specific features in addition to the amazing default Vertex features. These features include: a custom highlight color, shadow options for the main body, custom highlight font, enable or disable uppercase letters, disable first parent menu item, and much more.
See The Features

Vertex

A powerful template framework, adding logic, functions, and structure to a template. Read More

Responsive

Automatically your adjust website, pictures, and its content to any screen size or device. Read More

Interface

All Vertex templates are built with a very easy to use, and graphical admin user interface. Read More

Scroll Reveal

Details

Written by Super User

Published: 13 July 2014

Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add "data-scroll-reveal" to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you'd like to animate your HTML element.

Example of this in action (refresh this page if you didn't see it already):

Enter from the left and move up 50px in 1.33 seconds.

Enter from the bottom after 1 second.

Wait 2.5 seconds and then ease-in-out 100px.

Code used for the above:

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Enter from the left and move up 50px in 1.33 seconds. </div>

<div data-scroll-reveal="enter from the bottom after 1s"> Enter from the bottom after 1 second. </div>