Custom Theme Functions

This template include a ton of pre-builded animations and object position observers.

Every page item can be animated easily, the animation can be triggered when they are inside the viewport or could be a loop.

In order to create an “observed” object you need to add to each block that need it “interactive” to the additional classes box editor in this way

How initialize the observer

Adding the the class “interactive” the item observer will start to add and remove classes to that object when it is visible.

visible: the object is INSIDE the screen

already-see: the object has been inside the screen al least at once

Animations

Animation classes (but you may want to add/extend your own in animation in /assets/src/scss/components/animations.scss)

  • alignclose: this class removes the distance between blocks
  • fade-in: opacity animation from 0 to 100%
  • slide-left: translate from -100% to 0 (right to center)
  • exit-right: translate from 0 to 100% (center to left)
  • enter-down: transition animation from down to original position

Parallax

Each image inside a container can be animated with parallax. To apply this effect to “additional classes box” the class “interactive parallax” like in the example show below

Custom Block Classes

  • padded-image: distance the image from the margins (needed sometimes for transparent background images who have image margins near the image crop)

Custom Scripts

  • lightbox: a single lightbox
  • lightbox-gallery: a lightbox with multiple photo and navigation
  • slider AND slider-single: slick carousel (show 1 image at once)
  • slider AND slider-multi: slick carousel (show 3 image at once)

Below some examples

Animation triggered by visibility

interactive slide-left

One shot animation

HEY WAIT! This is one shot animation… And is triggered only one time. To make an animation like this use “interactive animated exit-right long-delay” classes

interactive exit-right long-delay

Media and text Block with parallax

(for media and text block you don’t need “Crop image to fill entire column”)

interactive parallax

Media and text Block with interactive animation

interactive fade-in alignclose

Media and text Block with interactive animation

interactive enter-down fade-in alignclose long-delay


Lightboxes

add the class “lightbox” to the block and the image inside will be lightboxed when clicked

lightbox

The same can be done with galleries, but you need to use the class “lightbox-gallery”. In this case the lightbox will show all the gallery images into a slideshow

lightbox-gallery

Slick carousel

a simple slick carousel


Multiple images slick carousel


mix slick (single) + lightbox


mix slick (multi) + lightbox-gallery

Post navigation

You might be interested in...

No comments yet, be the first!

Comments

Your email address will not be published. Required fields are marked *