スクロールするとコンテンツがアニメーションするWebページ

スクロールするとコンテンツがアニメーションするWebページ – メディアデザイン実習J商用サイトの実例

考え方

きっかけ → 変化が起きる(変化を起こす)

「きっかけ」の例

  • ボタンがクリックされたら…
  • スクロールがここまできたら…
  • ある時刻になったら…(ニコニコ動画の時報など)

「きっかけ」とはつまり、「現在の状態が、ある条件に適合すると判断される」ということ。 このことを、「イベントが発生する」と言います。

イベント → アクション(メソッド実行)

マウスオーバーイベント → サブメニューをオープン

ボタンイベント → フォームに投稿する処理を行う

タイマーイベント → ニコニコ動画の再生を中断し、時報を再生する

 

イベント(きっかけ)は、アクション(変化を起こす)の引き金(トリガー)です。

「今このイベント条件を満たした」と判断した時に、アクションを実行します。

このために我々は、「引き金」のほうと、「アクション」の両方を考えて用意します。

この2つはペアで、引き金がないとアクションは何時まで経っても実行されません。

アクションがないと、引き金が引かれても何の変化も起きません。

 

ボタンを押したらメソッド実行

JavaScript(jQuery使用)の場合

 

ActionScriptの場合

 

あるところまでスクロールされたら、アニメーション

JavaScript(jQuery使用)

 

基本はこんな感じで簡単にマスター出来ちゃうよ!
Have Fun !(^o^)




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です