文字に色を付けたり、大きくしたり、飾りをつけたりして、抑揚やアクセントをつけると読みやすくなりますよね! 私は、長文が苦手な方です。 苦手なだけに、私と同じような気持ちの人に、ストレスなく読んでもらえるように、日々コソコソと考えています。 ということで、今回は、アクセント代わりに蛍光ペンで線を引いたような効果を中心に文字周りで使えそうなコードをメモっていきたいと思います。
![CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b9f54a59bb5782cca45e8ab7e1f349fd645294e/height=288;version=1;width=512/http%3A%2F%2Fwebfeelfree.com%2Fwp-content%2Fuploads%2F2014%2F03%2F118.jpg)
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素(タグ)で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 (今回はグローバルナビで説明) HTML記述例(HEAD部) <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
みなさま、ごきげんよう。 2014-07-25 勉強会でskrollrの実装方法について、確認しました。 自分のサイトや作品をパララックスにしたい人必見!! この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。 パララックスとは 視差のことです。画像など複数のレイヤーを違った速度でスクロールさせることによって、奥行きを感じさせる表現手法です。 skrollrについて スクロール量に応じて要素を動かすことで簡単にパララックスを実装できるJSライブラリです。
皆様、ごきげんよう。 2014-08-01 勉強会 前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。 遠近感を出す為に複数の背景画像をずらす skrollrの指定 skrollrのこちらのdemo parallax scrolling for the massesの背景画像を再現してみました。 勉強会のdemoはこちら > parallax-by-skrollr bodyのすぐ直下の2つのdiv “bg1″と”bg2” に背景画像を指定する demoでは3層の水玉ですが、2層でも仕組みは確認できます。2つのdivを用意したら、skrollrで、スクロール量に応じた背景画像の動きを”background-position”で指定します。
第17回パララックス効果を作ってみよう 最近よく見るようになった、奥行感を演出するスクロール。いわゆるパララックスと呼ばれる演出効果。 もちろんこれもJavaScriptを使って実装されています。 サンプルを見る 奥行を理解する。 パララックスを理解するには、2D空間における奥行感を理解する必要があります。 下の図を見てください。 これが奥行感を演出する際の鉄則です。 皆さんも、空を眺めたとき、飛行機がゆっくり空を飛んでいるのを見たことがあるはずです。 でも、普通に考えて、飛行機があんなにゆっくり飛んでるはずはありません。 そう、遠くにあるものはゆっくり動いて見えるのです。 そのあたりの理屈は、遠近法と同じですね。同じ10メートルでも、目の前の10メートルと1キロ先の10メートルでは視認できる大きさが違います。 もう一つ例を挙げると、空を浮かぶ雲を見たときに、速い雲と遅い雲がある
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura(Slack) 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏(以下、ポール氏)は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい! ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは? 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
iOS7ではスタースバーは透明、ナビゲーションバー、タブバー、ツールバー、検索バー、スコープバーは半透明。一般的なルールとしてコンテンツの上にこれらのバーを被せることを想定しスタースバーの下に何もバーがないならコンテンツはフルスクリーンコンテンツにすべき。とある。 iOS7 フレームワーク判定 iOS 7 UI Transition Guideにはこんなやり方が書いてある。場合によってはバージョンよりもNSFoundationVersionNumberを使うほうが意図が明確になる。 if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) { // Load resources for iOS 6.1 or earlier } else { // Load resources for iOS 7 o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く