• css3

    marquee

    2012/10/15

    marqueeをCSS3で

    marquee.png

    HTML5で廃止されたらしいmarqueeタグ。
    なつかしのこれですよ、携帯サイトによくあった流れる文字。



    ようこそ!kanapple.netへ!



    スマホ案件で使用してほしいとのことで、うーむどうしようと調べたら、
    css3であったんですね!しらなんだ!


    ※スマホ(webkitブラウザ)用にかきます。

     

    書き方はこれ

    
    overflow-x: -webkit-marquee;
    -webkit-marquee-direction: 流れる方向(left/right/up/down);
    -webkit-marquee-style: 流れ方(alternate/scroll/slide);
    -webkit-marquee-repetition: 繰り替えし(回数/infinite)
    -webkit-marquee-speed: 流れるスピード(fast/normal/slow);
    -webkit-marquee-increment: 流れるスピード(距離として指定:large/normal/small);
    white-space: nowrap; /*文字が折り返さないように指定*/
    
    

    ※-webkit-対応ブラウザ(safari/chromeで見てください)

    流れる方向(-webkit-marquee-direction:)

    左に流れていくよー
    右に流れていくよー
    上に流れていくよー
    下に流れていくよー

    これはわかりますね。どの方向に流れていくかをleft/right/up/downで指定します。
    ↑は幅と高さを指定しましたが、up と downは高さ指定をしていない場合、自動で高さを取られるようでした。



    流れ方(-webkit-marquee-style:)

    範囲内でどのような流れ方をするかを指定します。

     

    ・alternate

    私はalternateです

    表示範囲内から始まり、端にぶつかると戻る、を繰り返します。

     

    ・scroll

    私はscrollです

    デフォルトです。表示範囲外から始まり、範囲外へ流れていきます。

     

    ・slide

    私はscrollです

    表示範囲外から始まり、最初の文字が端までくると消えます。


     

    繰り返し(-webkit-marquee-repetition:)

    何回繰り返すかを指定します。数値の他にinfiniteで無限の繰り返しを指定できます。

     

    ・1

    一回だけしか、言わないよ。

    んー!見逃したら悔しいですね!
    あ、リロードという手があった。けど親切じゃないね!


    ・infinite

    何度でも何度でも・・・

    これが親切ですね!




    流れるスピード(-webkit-marquee-speed:)

    流れるスピードを指定します

     

    ・fast

    はやいはやいはやいー!

    これ読めるんですかねw
    まぁ逆に、読もうとして注目させられるかも!

     

    ・normal

    普通のスピードだね

    デフォルトのスピードです。ちょうどええ。

     

    ・slow

    スローです、遅いです。

    遅おおおおおお!これでお知らせとかされたらイラッ★ときますねきっと。
    まぁこれも注目効果がだせるかも!?



    流れるスピード(距離として指定:-webkit-marquee-increment:)

    流れるスピードを距離として指定します。指定した距離だけ繰り返し進みます。

    数値を指定することもできます。

     

    ・large

    私はlargeです。

    やっぱ早いなー!
    これは36pxを指定した場合と同じだそうです。

     

    ・medium

    私はmediumです。

    うむ、ちょうどええ。
    これは6pxを指定したのと同じ。

     

    ・small

    私はsmallです。

    やっぱ遅おおおおおお!!!
    移動幅1pxと同じ!


    ・単位で指定

    これは100pxで指定しています。

    せっかくなのでチョッパヤなぞなぞ!

     

    パンはパンでも食べられないパンは?

    答えがわかったあなた!目イイね!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back