Muse CC 2015のアップデート

スクロール効果のブレークポイント対応

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
従来はブレークポイントとの併用ができなかったスクロール効果について、複数のレイアウトとの併用を解説します。
講師:
03:39

字幕

このレッスンではスクロール効果のブレークポイント対応について解説します。それではこのレッスンのファイルを開いてそしてホームを開けるとしばらく何もないかと思うとここら辺に写真が一枚だけ配置してあります。これ何かというとプレビューしてみましょう。プレビューしてみるとこんな感じにスクロール効果これが付けてあります。スクロールに伴って移動および出現してきてそしてまた、消えていくとこれが適用してあります。スクロール効果ですがこの部分ですね、開けてやるとまず動きを止める「モーション」であるとかあとはふわっとでてくる「不透明度」の設定こういったものを設定してこちらのポイントの設定によりここからフェードインが始まってそしてここで、できるといった感じに設定されています。このスクロール効果固定ページにしか適用できないですが固定ページは複数のブレークポイントを持つことで例えば、あるサイズを越えたらタブレット向けのレイアウトになるとかスマホ向けのレイアウトになるそのようなことができます。所が以前のバージョンまでの Muse はブレークポイントが追加されるとこのスクロール効果が使えなくなっていました。効果自体が無効になっていたのですが今回のバージョンからブレイクポイントを設定した場合もスクロール効果が機能するようになりました。 では実際にやってみましょう。では、右クリックして「ブレークポイントを追加」そしたら、では今外側の幅が 800 なのでここ 600 にしてみましょう。そうすると、これが 600px よりも小さくなった時のレイアウトです。分かりやすいように画像のサイズを大きくしてみましょう。この様にサイズやレイアウトをブレークポイントによって変えることができます。この様な形ですね。では 800 の時には真ん中とこの様に複数のレイアウトを作っておきます。また、このスクロール効果の働き始めるポイントも変えられるのでページの縦の長さが変わるような場合にはそれも有効となります。ではわかりやすいようにブラウザーでプレビューしてみましょう。では、ブラウザーの方に書き出しました。まずはページ幅を広くとってこの様に機能してますね。ではブラウザー幅を狭くしてみましょう。そうすると、この様にちゃんと 600px 以下に設定したサイズででてきました。この様にページ幅を変えてもスクロール効果がきちんと機能しています。スクロール効果はかなりデザイン的にも色々遊べる要素の多い流行している効果ですので是非ともこうした多くのデバイスに対応したサイトでも活用してみて下さい。

Muse CC 2015のアップデート

Webデザイナー以外でもスタイリッシュなWebサイトを簡単に作れるMuse CCに、2015年6月のアップデートでさまざな新機能や機能強化が加わりました。このコースではいろいろなWebフォントが使えるType Kitへのアクセス、コンタクトフォームなどのウィジェットの進化、レイヤーパネルの強化や自動ライトボックスなどを紹介します。

53分 (16 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月22日
アップデート日:2016年06月20日

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

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

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