説明例
This example demonstrates how to layer elements on top of each other to create an illusion of a custom button with animation.
どのように構築したか
ページ要素
In our site we added 2 groups of page elements with the Group 1 layered on top of Group 2:
Group 1: A text element and a pink vector image.
Group 2: Identical text element and vector image shape, but this vector image is white.
コード
In the $w.onReady() function we declare the two groups of page elements. We then create the animation timeline:
Change the opacity of Group 1 to 0, hiding it from the page. Group 2 which is underneath, is shown in its place.
Rotate Group 2 by 360 degrees.
Change the opacity of Group1 back to 1, showing it again on the page.
Last, we added an onClick() event handler to Group 1, to function as a button and trigger the animation when Group 1 is clicked.
関連例
これは役に立ったか？
|
ご意見ありがとう！
砂時計アニメーション
Wix Animations APIを使って、砂時計を自動的に、またはボタンクリックで反転させましょう。
上級
ボール落としアニメーション
ボールが迷路の中を落ちていくボール落としアニメーションを作成し、言葉の中のIの文字を点描しましょう。
上級
ベクター画像アニメーション
ボールが動き、あなたの言葉のOの文字の代わりになるアニメーションを作成します。
初心者
テキスト・マイクロインタラクション
Wix Animations APIを使って、3つのテキスト要素に異なるマイクロインタラクションを作成しよう。
中級
太陽系アニメーション
Wix Animations APIを使って、シンプルな太陽系アニメーションを作成しましょう。
上級