Banner Block

A Simple Banner Block

With a simple background color. You can add any blocks you want in this area.

One more?

This time with a background image, overlay color and zoom hover effect!

Parallax anyone?

You got it too.

What about video backgrounds?

You got it. YouTube, Vimeo and self-hosted videos supported.

Animation Settings

Via the Animation controls panel you can set up how you want the block to animate upon entering the viewport as your visitors scroll.

  1. Animation type: Choose the animation type for the block. You can select from Fade, Slide Up / Down / Left / Right, Zoom In / Out, and Flip Up / Down / Left / Right. Set to None if you want to disable the animation.
  2. Duration: Controls how long the animation will take from start to finish. Defaults to 0.7 seconds.
  3. Delay: Controls the delay from the moment the element enters the viewport to the moment when the animation will begin.
  4. Easing: Controls the animation’s easing. Refer to the easings page for a visual representation.
  5. Repeat animation: Repeat the animation for the block every time it enters the viewport. While your users scroll down the animation will fire, and when they scroll back up it will fire again. Every time the block leaves the viewport the animation will be reset.

Note: If you don’t plan on using animations you can turn them off globally in Settings > GutenBee settings. You can disable the “Enable block animation controls” checkbox and the animation panels and scripts will stop showing up and loading.