FX – Ken Burns

The FX – Ken Burns widget applies a slow & gentle zoom to images. This effect was introduced in film documentaries from Ken Burns and has become a very popular effect for web designers, becoming known as the “Ken Burns effect”.

As part of the FX series of widgets, this widget has streamlined functionality with one dedicated effect. For a more powerful solution, consider the Cinematic Slider, which offers the Ken Burns effect as part of a powerful suite of effects in a multi-image slideshow (coming soon).

Preview: https://demo.wocode.com/fx-ken-burns

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site and place it where you would like the image and effect to be seen. It may be placed in a row or column.
• If you would like to add the effect to an existing hero image, simply drop the widget into the row with your hero image.

WIDGET OPTIONS

• Open the widget option panel.
• Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

  Current Row: Applies the effect to the background of the row the widget is placed in.

  Current Column: Applies the effect to the background of the column the widget is placed in.Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

  Custom CSS Selector: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the  Advanced: Using Custom CSS Selectors section below for more information.

  Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

  Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

• Background Image: This loads an image into the widget. While other widgets in the FX series apply their effect to the row that the widget is placed in, the Ken Burns widget is different. You must load the image you wish to use. If the row already has a background image, you may leave it as is or delete it. The image you load in the FX – Ken Burns widget will take priority.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Ken Burns effect.

• Animation Duration: This setting sets the amount of time that the entire animation will last. Smaller values will result in faster, more exaggerated zoom effect and vice versa.
• Infinite Loop: With this setting enabled, the animation will continue infinitely. When disabled, the animation duration will run and the effect will end.
• Animation Origin: This sets the part of the picture where the zoom will begin.

ADVANCED: USING CUSTOM CSS SELECTORS

The  Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

• Right-click the element you wish to target.
• Select Edit HTML/CSS.
  
• Find the div class and copy it.
  
• Paste the class in the Custom CSS Selector field in the widget.
  
• Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
• The effect will now be applied to the gallery only.