Javascript/Javascript関連情報

Yahoo!UIの基礎まとめ(2ページ目)

All about内で取り上げたYUI関連の記事とサンプルへのリンクをまとめて紹介します。

高橋 登史朗

執筆者:高橋 登史朗

Javascriptガイド


Yahoo!UIの基礎まとめ



モーション

定義された経路に従ってDOM要素を動かすための「YAHOO.util.Motion(モーション)」についての簡単な解説を行います。

YUIモーションで要素を移動する

    オレンジの四角をクリックしてください、backBothで移動します 
    (少し戻って開始、少し超えて戻り終了)

     

     
     

     



YUIモーションto,by
    DOM要素の位置を移動させるYAHOO.util.Motionクラスを使い、Animクラスの時と同様に、絶対指定toと相対指定byを試してみます。

    移動します


YUIモーションopacity,Easing...
    YAHOO.util.MotionはYAHOO.util.Animの機能を継承しており、それらの機能を組み合わせることで、いろいろな動作やエフェクトを、手軽に実現することが可能です。

    0.3までフェイドアウトします


YUIモーションで曲線移動 control
    YAHOO.util.Motionクラスに実装されている、曲線移動のための機能を試してみます。ベジェ曲線計算のための制御点を指定できる「control」を使います。

    クリックしてください

YUIで曲線移動(複数制御点)
    YAHOO.util.Motionクラスに実装されている、曲線移動を利用し、複数の制御点を指定して少し複雑な曲線を描いてみます。

     

    クリックしてください



  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます