FX – Birds

The FX – Birds widget displays a flock of flying polygon-based birds. Moving your cursor through the flock scatters the birds into new formations, and then gives them a new flock leader to follow. This digital flock is as mesmerizing as the real thing.

The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, you can work freely with other elements within a row, column, etc. while the visual effect remains in the background.

Preview: https://demo.wocode.com/fx-birds

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it in a row or column that you want the polygon wave effect to appear.

    • Note: while it is possible to use multiple FX – Birds widgets on the same page, we do not recommend using more than one instance of FX – Birds (or other FX series widgets) on a page. The reason for this is that these widgets require a significant amount of graphics processing power. Multiple instances of GPU-hungry effects can result in reduced page speed on older computers or machines with slower GPU’s.

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.
    Note: Due to this widget being so GPU heavy, it is only recommended to use the 'Entire Page' option on short pages, as longer pages with Entire Page enabled will see reduce page speed.

    Custom CSS Selectors: 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.

  • Mouse Controls: This option enables an animation that moves the background when it is hovered by a mouse.

DESIGN SETTINGS

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

  • Minimum Dimensions: Sets the width of the container for the widget, there are two options for this setting:

        Automatic: Automatically set the width of the widget container to be the same width as the row or column that the widget is currently in.
        Custom: Forces the width of the widgets container to be something other than the width of the row or column that the widget is currently in.
  • Background Color: Sets the background color behind the birds.
  • Background Alpha (%): Sets the alpha percentage for the background. For example, if the background is black and you lower the alpha, it will appear grey.
  • Birds Color Mode: There are 4 different color modes available. Lerp, variance, lerp gradient, variance.  
  • Birds Color 1: Changes the primary color of the birds.
  • Birds Color 2:  Changes the secondary color of the birds.
  • Birds Quantity: Sets how many multiples of birds are displayed.
  • Birds Size: Changes the size of the birds as a whole.
  • Birds Wind Span: Sets the width of the bird's wings.
  • Birds Speed Limit: Sets the speed of the animation.
  • Birds Separation: Sets how close or far apart the birds are.
  • Birds Alignment: Sets how close together the birds will be when they convene in the center of the element.
  • Birds Cohesion: Sets how close or far apart the birds will fly.

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.