scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass

jQueryとCSS3で手軽に実装できるスクロールエフェクト近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ! 基本:スクロールでテキストをぼわ〜んと表示画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう! HTMLまずはエフェクトを与える要素を HTML に記述。安心してください、まだ何も変わったことはしてませんよ。 <p>Nobody likes
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
こんにちは、@yoheiMuneです。 今日はライトなネタを。 Webページを作成する際に、要素の高さを固定して、内容量によってはスクロールして表示させる事があるかと思います。そのスクロールの上げ下げをJavaScriptで操作する方法を調べたので、ブログに残しておきたいと思います。 Webページ内のスクロールする要素 Webページ内で、以下のような要素を見た事は無いでしょうか。高さが固定されていて、表示内容がたくさんある場合には、スクロールして内容を全て見るやつです。 こんにちは。 この文章を最後まで読むには縦スクロールする必要があります。 あああ いいい ううう えええ おおお 最後までスクロール頂きありがとうございます。 <div id="area" style="width:300px; height:100px; overflow:auto; border:1px solid #
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 現在位置を取得するときのの基準となる、ウィンドウ・サイズ、ドキュメント・サイズ、スクロール量を取得するJavascript。ブラウザ互換とかで割りと苦労しました。 スクロール量(横): スクロール量(縦): ウィンドウ・サイズ(横): ウィンドウ・サイズ(縦): ウィンドウの中央位置(横): ウィンドウの中央位置(縦): ドキュメント・サイズ(横): ドキュメント・サイズ(縦): 以下にソースを出します。 スクロール量を取得 function getScrollPosition() { var obj = new Object(); obj.x = document.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く