Blue Point Solutions

Day: September 6, 2011

CSS アニメーションの再スタート

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ CSSアニメーション（ala @-webkit-keyframes）の再スタートは、想像するほど簡単ではありません。ではまず、CSSアニメーションを一度だけ実行すると設定したとしましょう： ロゴ部分にクラス指定して実行したとします： その後、何らかの理由・・・例えばクリックに伴い・・・など、アニメーションを再度実行させたいと仮定します。きっとみなさんCSSで再実行する方法があると予想するかと思いますが、私が思いつく限りそのような方法は残念ながら見当たりません。JavaScript（jQuery）でクラス名を一度削除させて、再追加させてみたりするかもしれませんね： 本当にしなければならないことは、要素をそのページから一度完全に削除して、改めてインサートすることです。jQueryを使った簡単なデモとしては、クローンを作成して、オリジナルのすぐ後ろにクローンをインサートし、その後オリジナルを削除する方法があります。 もっと簡単な方法はありますか？ こういう投稿をすると、大抵いろんな方がもっと簡単な方法を提案してくださることが多いので、今回もそういう提案があるとよいのですが・・・。

詳細を読む »
September 6, 2011 1 Comment

WebKitを使ってスクロールバーをカスタマイズ

一昔前、IE（5.5）などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素（<body>など）に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。 最近になって再びスクロールバーをカスタマイズすることが出来るようになりましたが、今回は非標準CSSではなくWebKitを使うことになります。プロパティはベンダープレフィックス（::-webkit-scrollbarなど）で、シャドウＤＯＭを使用しています。この方法が使われるようになって数年経ちますが、ディビッド・ハイアットさんが2009年の初めにブログで記事にしており、考え付くであろう全てのサンプルを掲載されています。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ Webkitスクロールバー webkit scrollbar使用可能な疑似要素 下記のコードは疑似要素で、スクロールバーの個々のパーツにあたります。 webkitスクロールバー状態指定セレクタ 下記のコードは疑似クラスセレクタです。これらのセレクタを使って、スクロールバーの様々な状態を更に具体的に選択することが出来ます。 ここの部分はディビッドさんのブログの説明が完璧なので、丸々ぱくって日本語訳します： （昨今この疑似クラスは::selectionにも同様に適用されるようになりました。そのうち新しい標準疑似クラスとして他のコンテンツでも適用するよう拡張する予定だそうです。） :horizontal(水平方向) 水平方向の全てのパーツに適用されます。 :vertical(垂直方向) 垂直方向の全てのパーツに適用されます。 :decrement(減少疑似) button（2）とtrack-piece（4）に適用され、垂直スクロールバーの上方向や水平スクロールバーの左方向等、それらのパーツが減少方向にあるかどうかを示します。 :increment(増加疑似) button（2）とtrack-piece（4）に適用され、垂直スクロールバーの下方向や水平スクロールバーの右方向等、それらのパーツが増加方向にあるかどうかを示します。 :start(スタート疑似) button（2）とtrack-pieces（4）に適用され、オブジェクトがthumb（5）より前に配置されているかどうかを示します。 :end （エンド疑似） button（2）とtrack-pieces（4）に適用され、オブジェクトがthumb（5）より後ろに配置されているかどうかを示します。 :double-button(ダブルボタン疑似) button（2）とtrack-pieces（4）に適用されます。buttonの場合は、そのbuttonがスクロールバーの同じ端にあるペアボタンの1つであるかを判断するのに使用されます。track-piecesの場合は、track-piecesがペアボタンと隣接するかどうかを示します。 :single-button(シングルボタン疑似) button（2）とtrack-pieces（4）に適用されます。buttonの場合は、スクロールバーの端っこに単独で存在するボタンかどうかを判断します。track-piecesの場合は、単独のボタンと隣接するかどうかを示します。 :no-button(ノーボタン疑似) track-pieces（4）に適用され、track-piecesがスクロールバーの一番端まで適用されるかどうかを示します。（すなわち、そのトラックの端にはボタンが存在しません。） :corner-present(コーナー・プレゼント疑似) 全てのパーツに適用され、スクロールバーのcornerが存在するかどうかを示します。 :window-inactive(ウィンドウ・インアクティブ疑似) 全てのパーツに適用され、そのスクロールバーを含むウィンドウが現在アクティブであるかどうかを示します。 全てを組み合わせると・・・ 実際に疑似要素と疑似クラスセレクタを組み合わせたサンプルを、幾つかご紹介しましょう： 簡単なサンプル それではとてシンプルなカスタムスクロールバーを作ってみましょう： これを垂直方向にオーバーフローしているテキストのdiv要素に、組み込んであげればよいのです： 実装例 ティム・ヴァンダムさんのブログMaxvoltarで、とても繊細でいい感じのスクロールバーを使っているので見てみてください： このページで注目すべきところは、普段私たちが見ているページとは異なり、スクロールバーはページの上端にも下端にも右端にも接していないところです。（スクロールバーはbody要素なのにも関わらず！です。）コードをコピペして似たようなテストページを作成したのでご覧ください： デモページ ForrstというWEBサイトでも、コードスニペットの部分でカスタムスクロールバーを使用しています。スクロールバーがあまり目立たないようにしてあるので、コードの着色部分とあわさって目がチカチカすることもなく、いい感じに仕上がってますね。

詳細を読む »
September 6, 2011 3 Comments

  • カテゴリー

    • 最新ブログ