アニメーション・ヘルパー

animation-helpers Veloパッケージを使って、人気のアニメーションをサイトに追加する。

初心者

出版された：

May 9, 2021

によって

アンカー 1

開発者を雇う

説明例

In this example, we used the animation-helpers Velo package to easily create popular animations for the elements on our site.

The example includes 4 pages, each one demonstrating a different kind of animation helper function:

For more information about this Velo Package, please see the Readme in the package folder located in the Code Files section of your site.

タブ1

タブ2

タブ3

このコードによる解決は複雑になる可能性がある。

We installed the Velo package on our site.

Spin Page

On this page we show 2 kinds of spin animations:

Simple spin: Selects all vector images on the page and spins them.
Interactive spin: Includes an onMouseIn event handler on the roulette element to play the animation when the site visitor hovers over the roulette, and an onMouseOut event handler to pause the animation when the visitor moves away from the roulette.

Float Page

On this page we show 3 kinds of float animations:

Horizontal float: Selects all vector images on the page and floats them horizontally.
Interactive float: Includes an onMouseIn event handler on the text element to play the float animation when the site visitor hovers over the text, and an onMouseOut event handler to pause the animation when the visitor moves away from the text.
Random float: Floats all balls vertically. Then for each ball the function chooses a random distance and duration and floats the ball horizontally according to these random amounts. This creates the random movement effect.

Zoom Page

On this page we show 3 kinds of zoom animations:

Simple zoom: Zooms into the glasses image. We used the setInterval function in order to zoom in again every few seconds.
Zoom by ratio: Selects all Vector Image elements on the page and zooms into them until they’ve expanded by 50% of their ratio. We used the setInterval function in order to zoom in again every few seconds.
Interactive zoom: Includes an onMouseIn event handler on the text element to play the zoom animation when the site visitor hovers over the text, and an onMouseOut event handler to pause the animation when the visitor moves away from the text.

Stagger Page

On this page we show 3 kinds of stagger animations:

Staggered text: Takes a fixed string, splits it into characters and adds each character separately to the text element on the page to create a typing effect. Since adding a blank character to a text element does not show a change, we added logic to check if the previous character is blank. If it is, we add the blank character along with the first character in the next word.
Staggered spin: Selects all the wheel elements and spins them one by one.
Staggered zoom: Selects all the pyramids and zooms into them one by one.