テンプレートとアクセスアップのでめらら楽天日記

marquee（マーキー）講座(05)

ＨＯＭＥ >> マーキー >>marquee（マーキー）講座(05)
斜めに動かす
水平方向の動きを垂直方向の動きの中に「入れ子」にして組み合わせますと『斜め』の動きが出来上がります。 （実際にはタテヨコタテヨコタテヨコタテヨコタテヨコタテヨコ･･･の動きが繰り返されているのですが、なめらかに動かしますと斜めに動いているように見える、というわけです）
マーキーの垂直方向（タテ）の動きは全部で6種類になります。そして同じように水平方向（ヨコ）の動きも全部で6種類になります。 したがって、これらの組み合わせは6種類×6種類で36種類の動きになります。 （もちろんここに loop="α"scrolldelay="β"scrollamount="γ"を組み合わせることで無限の組み合わせが作れることになります）
【垂直方向（タテ）】
  1. 下→上の動きで横切りを繰り返す
  2. 上→下の動きで横切りを繰り返す
  3. 下→上の動きで端まで来ると停止
  4. 上→下の動きで端まで来ると停止
  5. 下→上の動きで往復を繰り返す
  6. 上→下の動きで往復を繰り返す

【水平方向（ヨコ）】
  1. 右→左の動きで横切りを繰り返す
  2. 右→左の動きで横切りを繰り返す
  3. 左→右の動きで端まで来ると停止
  4. 右→左の動きで端まで来ると停止
  5. 左→右の動きで往復を繰り返す
  6. 右→左の動きで往復を繰り返す

※組み合わせの一部を掲載いたしました。もちろん1.の組み合わせですと【1+A】以外【1+B】【1+C】【1+D】【1+E】【1+F】とありますので良かったら試してみてくださいね。
【1+A】下→上+右→左横切り
<marquee direction="up"><marquee behavior="scroll">【1+A】</marquee></marquee>
【1+A】
【2+B】上→下+左→右横切り
<marquee behavior="scroll" direction="down"><marquee behavior="scroll" direction="right">【2+B】</marquee></marquee>
【2+B】
【3+C】下→上+左→右停止 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="up"><marquee behavior="slide">【3+C】</marquee></marquee>
【3+C】
【4+D】上→下+右→左停止 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="down"><marquee behavior="slide" direction="right">【4+D】</marquee></marquee>
【4+D】
【5+E】下→上+左→右往復
<marquee behavior="alternate" direction="up"><marquee behavior="alternate">【5+E】</marquee></marquee>
【5+E】
【6+F】上→下+右→左往復
<marquee behavior="alternate" direction="down"><marquee behavior="alternate" direction="right">【6+F】</marquee></marquee>
【6+F】
ということで「落ち葉」の動きを･･･
はっぱ
（【2+E】の横幅と移動スピード、移動距離を変えただけです）
--ＭＥＮＵ--
--マーキーMENU--
【ＰＲ】


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: