Custom Theme Functions

You can animate page items when they are inside the viewport. Add the “interactive” custom class to the block of the new Gutemberg editor.

  • interactive: init the animation watcher

Animation classes (you can add/make your own in animations.scss)

  • alignclose: this class removes the distance between blocks
  • fade-in: opacity animation from 0 to 100%
  • enter-down: transition animation from down to original position
  • enter-left: transition animation from left to original position

Block classes:

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

i’ve also added a lightbox for the images and for the galleries…

  • 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 animated slide-left

interactive animated slide-left classes


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


Parallax image

interactive parallax

Media and text Block with parallax

“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

click on the image to see the lightbox effect

you can do the same with galleries, simply give the class “lightbox-gallery” to the whole gallery


Slick carousel

a simple slick carousel

Multiple images slick carousel

mix slick (single) + lightbox

mix slick (multi) + lightbox-gallery

Share this post

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 *