jQuery で実現する パララックス効果をヒントにしたシンプルで新しいスクロール背景 - こじょらぼ
背景画像のトップとボトムが、ページのトップとボトムと一致するように、 ページの長さに応じてスクロール量が変化する背景を設定する方法です。 ページのスクロールとは独立して(ページの縦幅に関係なく)、背景は背景画像の高さ(height)までしかスクロールしません。 ちょっと前から主流の fixed や、伝統の scroll に並ぶ、 新しい種類の背景(background-attachment)と言えるのではないでしょうか！ 特徴 繰り返さない一枚絵の美しさと、ユーザーの操作に応えるインタラクションを兼ね備えています。 パララックス効果を使った背景よりもシンプルです。 実装もシンプルで比較的 簡単です。 サンプルページ 当ブログのトップページがサンプルです。 コンテンツのスクロール量と、背景のスクロール量に注目。 スクロール バーでスクロールさせると、滑らかで分かりやすいかも知れません。 続き
サークルがランダムに配置される背景をSVGで作る
SVGを使って、毎回ランダムな色・大きさ・配置でボケ（bokeh）なサークルを作ってみます。 まあやってることは前回の「Kawaii Bubbles!」とあんまり変わりませんけど……。 前回はli要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVGなら画像だから別にいいかと思って、今回のを作ってみました。 Random Bubbles Background with SVG デモファイルをダウンロード 始めはCSS BackgroundでSVG読み込ませようとしたりimgで置こうとしたんですが、それだとSVGのスクリプトは実行されないので、HTMLファイルで読み込んでいるJavaScriptでSVG要素を作ってインラインSVGとして追加することにしました。 今回の各ファイルは次のようになっています。 使ったテキストは与謝野晶子の「セエヌ川」です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
