Horizon

Reveal on Scroll

Horizon is a small plugin that reveals elements upon entering the viewport using CSS3 transitions. It can be applied to any element of the page and by using the data-attribute data-animate-in we can deterimine how the element is revealed. Scroll down and back up to see horizon in action.


Scaling In

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Enters Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Enter Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Enters Top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Enters Bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Rotates In

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


Resource Files

Snowbridge requires the following resource files:

Although no stylesheet is required for the horizon plugin, it is recommended to set the opacity of parallax wrapper to 0, which will prevent flickering if the element is within the viewport upon page load.

Css
.horizon{ opacity:"0"; }
Js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tm.horizon.min.js"></script>

Element Animation Data Attribute

The way in which an element transitions to its position can be controlled using the data-animate-in attribute. Transition parameters are listed as follows:

Example
<div data-animate-in="opacity:0;transX:500px:scale:1.3;" class="horizon">Content</div>
Attribute Values Default Description
opacity 0 - 1 0 Sets starting opacity of caption
transX -/+ number 0 Sets initial position of caption on x axis, entered as 500px or 500
transY -/+ number 0 Sets initial position of caption on y axis, entered as 500px or 500
transZ -/+ number 0 Sets initial position of caption on z axis, entered as 500px or 500
rotateX -/+ number 0 Sets initial rotation of caption on x axis, entered as 180deg or 180
rotateY -/+ number 0 Sets initial rotation of caption on y axis, entered as 180deg or 180
rotateZ -/+ number 0 Sets initial rotation of caption on z axis, entered as 180deg or 180
scale number 1 Sets initial scale of caption, where 1 is no scaling
duration milliseconds 700ms Sets duration of transition, entered as 700ms or 700
delay milliseconds 0ms Sets delay before transitiosn starts, entered as 700ms or 700
easing string swing Sets easing type of transition, click here to see easing types
Preset Element Animations New

Horizon now supports a range of new presets to faciliate caption animations. Note: duration, delay and easing can still be overwritten if using a preset creating different effects. Here is how to use a preset:

Example
<div data-animate-in="preset:spinInY;duration:800ms;" class="horizon">Content</div>

Click here for full list of presets


Understanding Perspective

When a horizon element is created, its parent receives a perspective class .tmh-perspective which gives the element a 3D-space. This means that if you are animating multiple elements within the same wrapper, all elements will share the same 3D-space and therefore the same vanishing point. This can have an undesired effect, in particular if your document is long and there are many element animating, but that are not visible in the viewport at the same time. To ensure that the element only animates within its own 3d space and not relative to the other elements, simply wrap the horizon element in a new div, for example:

Example
<div>
<div data-animate-in="opacity:0;transX:500px:scale:1.3;" class="horizon">Content</div>
</div>

Note: perspective is by default set to 800px. To change this, simply target the .tmh-perspective class.


Horizon Parallax Beta

Horizon now provides the ability to scroll page elements at a different rate than the overall page, creating a parallax effect. As opposed to horizon animated elements that are created using the data-animate-in attribute, parallax elements are created using the data-parallax attribute as follows:

Example
<div data-parallax="direction:vertical;speed:0.3;rotate:anticlockwise;opacity:fade; class="horizon">Content</div>
Attribute Values Default Description
direction vertical or horizontal vertical Direction that the parallax element should scroll in
speed 0 - 1 0.2 Sets the speed at which the element should scroll
rotate clockwise, anticlockwise, none none Whether the element should slightly rotate creating depth upon scrolling
opacity fade or none none Whether the element should fade out as it moves out of the viewport

Important: For the best result, use vertical direction if your site scrolls from top to bottom and horizontal if your site scrolls from left to right.


Horizon Usage

To call the Horizon plugin on one or multiple elements the following call should be added before the closing body tag on document ready.

Example
$( document ).ready( function(){
$( '.horizon' ).horizon()
});
Attribute Values Default Description
easing string 'swing' Transition timing function
speed milliseconds 500 Sets duration of transition, entered as 500
threshold 0 -1 1 Determines how much of the element should be visible before aimation starts.
recurring boolean false Whether animation should recur upon scrolling page up/down

API

The horizon plugin provides two callbacks; one when the element is in view and one when the element is out of view. The timing of these callbacks does depend on the threshold set.

Callback Description
inView Called once the element is in view, inView: function({})
outOfView Called once the element is out of view, outOfView: function({})

Horizon Animation Presets

Fades
  • fadeIn

Slide In
  • slideInUpShort
  • slideInRightShort
  • slideInDownShort
  • slideInLeftShort
  • slideInUpLong
  • slideInRightLong
  • slideInDownLong
  • slideInLeftLong

Bounce In
  • bounceIn
  • bounceOut
  • bounceInUp
  • bounceInRight
  • bounceInDown
  • bounceInLeft

Scale In
  • scaleIn
  • scaleOut

Flips & Spins
  • flipInX
  • flipInY
  • spinInX
  • spinInY
  • helicopterIn
  • helicopterOut

Special
  • signSwingTop
  • signSwingRight
  • signSwingBottom
  • signSwingLeft
  • wiggleX
  • wiggleY
  • dropUp
  • dropDown
  • rollInLeft
  • rollInRight
  • turnInRight
  • turnInLeft
Theme Mountain

Current Version