Animation
目次
概要
過去に実装してきたアニメーションをギャラリー形式で紹介します。
組み合わせて実装することも可能です。
マウスアクション
マウスの接近、ホバー、クリックで用いることができるアニメーションです。
ボタンが半透明になる
ボタンに色が付く
ボタンの色が端からスライドイン
ボタンの色が中央からスライドイン
ボタンの色が斜めからスライドイン
ボタンが下りてくる
ボタンの蓋が閉まる
ボタンのグラデーションが変化
ボタンの文字と枠が点滅
ボタンの字間が広がる
ボタンの矢印が動く
ボタンの文字が変わる
ボタンの文字がスライドインして変わる
ボタンの角が丸くなる
ボタンの枠線が伸びる
ボタンが押し込まれる（垂直）
ボタンが押し込まれる（斜め）
ボタンが跳ねる
ボタンが震える（1秒毎）
ボタンから波紋が広がる
ボタンが迫る
ボタンが斜め上を向く
ボタンが回転する
スクロールアクション
スクロールしてコンテンツ近づいていく際に用いることができるアニメーションです。
トリガー処理はモダンJSのみで実装しています。（jQueryは使用していません。）
フェードイン
画面の中央に近付くにつれて表示が濃くなる。
ズームイン
画面の中央に近付くにつれて表示が大きくなる。
フェードイン＋ズームイン
画面の中央に近付くにつれて表示が濃く、かつ、大きくなる。
スライドイン（左右）
画面の中央に近付くと左右からスライドして表示される。
スライドイン（斜め）
画面の中央に近付くと斜めからスライドして表示される。
トリプルアクセル
画面の中央に近付くと斜めから回転しながらスライドして表示される。
フェードアップ
画面の中央に近付くと浮き上がるように表示される。
フローアウト
画面の中央に近付くと流れ出るように表示される。
ページ遷移アニメーション
ページが移り変わる際に用いることができるアニメーションです。
円形フェードアウト→フェードイン
遷移前ページが画面中心に向かってフェードアウトし、 遷移後のページが画面中心からフェードインする。
作成中
順次アップしていきます。
【番外編】埋め込みメディア
Xのタイムラインの埋め込み
X側のAPIの仕様変更により、Xへのアクセスレート制限がかかるようになりました。
それにより、従来は表示されていたXの埋め込みタイムラインが表示されたり、
表示されなかったりという現象が発生しております。
そのため、現在、アルファエイトスタジオではXのタイムラインの埋め込みの実装を中止しております。
代替え対策として、“Xのプロフィールへのリンクボタン”と“Xのフォローボタン”の設置で対応しております。
Xのタイムラインの埋め込みを検討されているお客様には大変ご不便をおかけしますが、 ご理解いただけますと幸いです。
YouTubeの動画の埋め込み
YouTubeは、個別の動画や最新の動画を埋め込むことが可能です。
自動再生、ループ再生が可能です。
Google Mapの地図の埋め込み
Google Mapも埋め込みが可能です。