#スクロールアニメーション

[web-archive-shiraishi]

TVアニメ「ソードアート・オンライン オルタナティブ ガンゲイル・オンラインⅡ」公式サイト

TVアニメ「ソードアート・オンライン オルタナティブ ガンゲイル・オンラインⅡ」公式サイト

https://gungale-online.net/

[haifon-ina]

期待しかない

[9243-kobushime]

逃げる扉と信仰心

大型ショッピングモールの中にある映画館に行った後マクドに寄る。 白い陶器のツボかなんかに入った甘いもんを買う。 帰るとき、自動ドアが横スクロールアニメーションみたいになってうまいこと開かない。 開いたと思ったら上にドア全体が上がって通れない。 一応脱出できたけど明らかに通りづらいので警備に電話する。 外に出ると知ってる人が出店を出していたので、マクドで買った甘いもんをあげる。

海外に旅行に来ている。 日本人僧侶がレストラン跡で宿を開いている。 レストランのホールにベッドが並んでいる。 真ん中に残っているサラダバーのカウンターにはお弁当の具材が並んでいる。 礼拝に来る人たちの宿泊施設らしい。 朝起きて、弁当作って持って霊山を登るらしい。

[walkfootage]

Air podsのウェブサイトのスクロールアニメーションを制作した。

[kamiya-memo-nagoya]

cssでスクロールアニメーションが作れる記事。そのままである。 css animetionにスクロールすると動く処理が追加になった。というのが的確な説明になるかな。

これのすごいのはスクロール位置に合わせてアニメーションの進行を変えれるところ。めちゃめちゃ簡単にできるので、すごい便利。

今までパララックス系は重くて・・・やjsでの記載がよくわからなくて・・・って人はこれで簡単に実装ができるようになるので、デザインの幅も広がると思う。

今はまだchromeのみなので、今後対応が増えたら自分も導入してみようと思う。

今後使うときのためにメモしておく。

[nextist-skill-box]

【Adobe Premiere Pro】 『FxFactory』が提供している無料プラグインで簡単にスクロールアニメーションが作れる『Manifesto』✨

一々キーフレームを設定しなくても、テキストを打ち込む、またはテキストファイルをインポートして、カラーやフォント、サイズや位置、カーニングなどをお好みで調整するだけで簡単にロールアニメーションを作ることができますd(￣ ￣)

詳細はこちら⬇︎⬇︎ https://nextist.net/fxfactory-manifesto/

[ki-shi-an]

制作スケジュールと研究計画

-制作スケジュール--------------------------------

〜10月上旬　　自然物の映像撮影、現在使用されているモバイルサイトのモーションデザインを分析

〜10月中旬　　AfterEffectsで動きを抽出、抽出した動きをまとめた展示用の解説動画を作成

〜10月下旬　　AfterEffectsで活用例のWebサイトのプロトタイプを制作

〜設営日　　活用例Webサイトを制作、展示用説明パネルとWebサイトのQRコードパネルを制作 ------------------------------------------------------

JavaScriptの基礎は学習済みだが、Webへの応用の経験は少ないため、Web上の要素にモーションをつける方法について調べた。調べた中で、ライブラリ使用の有無やどのライブラリを使うのが効果的か等は、動きをある程度集めてから判断した方が合理的だと感じたため、まずは技術的な部分に縛られすぎず、自然物の動きを集めることに集中していくことにした。Webへの応用の形としては、スクロールアニメーション、ホバーアニメーション、バックグラウンドアニメーション、ファーストビューアニメーション(ヘッダーアニメーション)、ローディングアニメーション等を予定。また、動きをメインにしていきたいため、形状はcssかsvgで表現できる形のみとし、なるべくシンプルなものにする。

[web-archive-shiraishi]

ARKREIS

ARKREIS

https://arkreis.jp/

[413-request-entity-too-large]

スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」

スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。

react-genie -GitHub

react-genieの特徴

react-genieは、ビューポートにスクロールする要素をアニメーション化するためのReactコンポーネントです。SizzyやReact Academyの@thekitze氏の新しいプロジェクトで、Sizzyにもこのreact-genieが使用されています。

Sizzy

タイミングをずらして表示させたり、非表示の要素を表示させたり、右・左から表示させたり、フェードインさせたり、さまざまなアニメーションが実装されています。

依存関係

styled-components

layout-styled-components

react-animations

react-intersection-observer

react-genieのデモ

デモでは、react-genieのさまざまなスクロールアニメーションが楽しめます。

デモページ

デモはCodeSandboxにも用意されています。

react-genieの使い方

パッケージを依存関係に追加します。

RevealGlobalStylesコンポーネントを任意の場所にレンダリングするだけで、アニメーションのクラス名が追加されます。

import {RevealGlobalStyles} from 'react-genie'

 const App = () => {

  return (

    <div>

      <RevealGlobalStyles />

      <div> rest of the app </div>

    </div>

  );

};

デフォルトのアニメーションは、下記のように実装します。

import {Reveal} from 'react-genie';

 <Reveal>

  <h1>The default animation is fade in</h1>

</Reveal>

アニメーションのオプション

{

  animation?: string; // animation class name

  delay?: number; // animation delay

  mode?: RevealMode; // "clone" or "wrap"

  debugName?: string; // if you specify it, you will get console logs

  style?: CSSObject; // extra styles

  onShowDone?: () => void; // callback after show

}

アニメーションのオプションを使用してアニメーションを指定します。

import {Reveal, Animation} from 'react-genie';

 <Reveal animation={Animation.SlideInLeft}>

  <h1>This title will slide in from the left</h1>

</Reveal>

[rn-webscrap-blog]

https://www.hsn-kikai.com/

・赤と黒の配色コントラスト

・ぬるぬる動くスクロールアニメーション

・ローディング時の左右にスワイプするようなアニメーション