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

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

ＨＯＭＥ >> マーキー >>marquee（マーキー）講座(03)
スクロールの動き
どこからどこまでをスクロールの範囲にするかを決めましたら次は「動き方」を設定することになります。
大きく分けて動きは方向が上下左右となりますが、アクションは３種類ありますので全部で4方向×3種類で12種類となります

スクロールの動きを設定（どのような動きになるかはこれらで決めます）

■ behavior ="動き方" （指定がない場合「デフォルト」はscroll）
・ scroll 片側から出てきて横切る繰り返し
<marquee behavior="scroll">scroll 片側から出てきて横切る繰り返し</marquee>
scroll 片側から出てきて横切る繰り返し
・ slide 片側から出てきて端まで来ると停止 ※動作確認は更新をかけてください
<marquee behavior="slide">slide 片側から出てきて端まで来ると停止</marquee>
slide 片側から出てきて端まで来ると停止
・ alternate 左右（上下）に往復させる
<marquee behavior="alternate">alternate 左右（上下）に往復させる</marquee>
alternate 左右（上下）に往復させる
■direction="移動の方向"（指定がない場合「デフォルト」はleft） ・ left 右から左へ移動
<marquee direction="left">left 右から左へ移動</marquee>
left 右から左へ移動
・ right 左から右へ移動
<marquee direction="right">right 左から右へ移動</marquee>
right 左から右へ移動
・ up 下から上へ移動
<marquee direction="up">up 下から上へ移動</marquee>
up 下から上へ移動
・ down 上から下へ移動
<marquee direction="down">down 上から下へ移動</marquee>
down 上から下へ移動
■基本の組み合わせ（全12種）：簡単な応用としまして「behavior」と「direction」の組み合わせのすべてです ・scrollのバリエーション【left 左から右へ移動】
<marquee behavior="scroll" direction="left">scroll+left</marquee>
scroll+left
・scrollのバリエーション【right 左から右へ移動】
<marquee behavior="scroll" direction="right">scroll+right</marquee>
scroll+right
・scrollのバリエーション【up 下から上へ移動】
<marquee behavior="scroll" direction="up">scroll+up</marquee>
scroll+up
・scrollのバリエーション【down 上から下へ移動】
<marquee behavior="scroll" direction="down">scroll+down</marquee>
scroll+down
・slide のバリエーション【left 左から右へ移動】 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="left">slide+left</marquee>
slide+left
・slide のバリエーション【right 左から右へ移動】 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="right">slide+right</marquee>
slide+right
・slide のバリエーション【up 下から上へ移動】 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="up">slide+up</marquee>
slide+up
・slide のバリエーション【down 上から下へ移動】 ※動作確認は更新をかけてください
<marquee behavior="slide" direction="down">slide+down</marquee>
slide+down
・alternate のバリエーション【left 左から右へ移動】
<marquee behavior="alternate" direction="left">alternate+left</marquee>
alternate+left
・alternate のバリエーション【right 左から右へ移動】
<marquee behavior="alternate" direction="right">alternate+right</marquee>
alternate+right
・alternate のバリエーション【up 下から上へ移動】
<marquee behavior="alternate" direction="up">alternate+up</marquee>
alternate+up
・alternate のバリエーション【down 上から下へ移動】
<marquee behavior="alternate" direction="down">alternate+down</marquee>
alternate+down
--ＭＥＮＵ--
--マーキーMENU--
【ＰＲ】


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