Muse基本講座

スクロール効果を適用

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ内の写真にスクロール効果を適用し、画面の外から写真が飛び込んでくるようなアニメーションを作成します。
講師:
06:26

字幕

このレッスンでは スクロール効果の設定について解説します それではサンプルファイルの HOME を開けます 見ていくと写真が並んでいますね 少しズームレベルを変えます ではこの写真が画面の外から スクロールに合わせて飛び込んでくるような スクロール効果を作ってみようと思います スクロール効果を作るときは パネルから「スクロール効果」を出します 見やすいように切り離します 効果を付けるときはまず 効果を付けたいオブジェクトを選びます このブルドッグの写真に付けてみましょう スクロール効果は種類がいっぱいありますが 今回は「モーション」というものを 使ってみましょう モーションをオンにします ではまず単純にこのままで 1回プレビューしてみようと思います プレビューを押しました そしてスクロールしていくと さっきの場所に写真がなくて こっちの方から飛び込んできましたね 飛び込んできてピタッと 最終的に位置が収まる このような効果ができました では戻します ではどういう設定だと今みたいに なったかということなのですが ここを見てください まず「初期モーション」と 「最終モーション」というのがあります 初期モーションというのは この写真が本来ある位置に着くまでの 動きを示します 最終モーションというのは 1回ここの位置に着いてから さらにスクロールが進んだときに どういうモーションをするか ということです この意味ですが まず初期モーションは この所定位置に来るまでの間は 左から写真がやって来るというのは スピードが 1 になっています これは速度です そしてこの位置を過ぎてからは これは上向きに 1 になっていますが スクロールの速度に合わせて 上に移動するということなのです なので試しに 最終モーションのこれがゼロの状態で プレビューしてみると 写真がやって来る ここまでは同じなのですが 今度は一緒に流されて付いてきてしまいます なので こうならないためには 進行方向は 今は下ですね 下と逆の上に向かって スクロールと同じ速度で 移動するとしておくと 写真がやって来て そのまま一緒に上に消えてくれると いうわけですね ちょっと分かりづらいですが 実際にやってみると なるほどと納得しやすいので やってみてください 例えば最終モーションの位置については 今度は横方向 逆に 進むなんていう感じにすると プレビューすると こう来て一回所定位置に着いたら また何か向こうに飛んで行ってしまうと こんなやり方もあります ではまたこれを戻した上で もう 1 つ 「キーの位置」というところですが キーというのは どこまで来たら アニメーションを始めるかの設定です 見てみると この写真から引き出されて こんな線が付いています これがキーの位置です これをすごく上の方にしてやると プレビューしてみると さっきよりもずいぶん早い段階から アニメーションが始まりましたね そしてこんな感じでくっついてくると こうした動作になります これは1枚でやっても面白いのですが 複数枚でやると余計に面白いですね ではこっちにも適用してみましょう モーションをオンにして キーの位置は上の方にします 例えば同じ方向からやって来るのでも 速度を変えるとばらつきが出て ちょっと面白くなります ではこの水平方向の速度を 1.5にしてみましょう ではここもクリックして モーションをオンにして キーの位置を これもばらつきがあると面白いですね スピードを 2 にしましょう これもオンにして キーの位置を上の方にして スピードを思いきり上げて 3 にしてみましょう こんな形でどうなるかプレビューしてみると スクロールしていくと バラバラに写真がやって来て 収まると このようにちょっとずつ違う動きで やって来るので ひじょうに立体感が出ますね あとは最終モーションで 終わったあとで去って行っても良いので 非常にバリエーションの広い 動きを作ることができます またこのモーション以外に こちらには不透明度や スライドショーなど 別の効果もあります たとえば不透明度にしてみると また見え方が変わってきます モーションを外しておきます それぞれのモーションは外しておきます 不透明度にしていると このようにスクロールがやって来ると ふわっと浮き出てくる 順番に浮き出てきたり消えたりと このような効果を作ることもできます スクロール効果は組み合わせによって ひじょうに面白い効果を作ることができます ぜひとも使ってみてください

Muse基本講座

Adobe MuseはHTMLやCSSといった専門知識がなくても、IllustratorやInDesignを使うような感覚で手軽にWebサイトをデザインできるソフトです。このコースではMuseを使ってページに文章や写真をレイアウトするやり方やグラフィックの作成、モバイル機器に対応したサイトの作成方法などについて学習します。

3時間55分 (72 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月20日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。