jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
スクロールに合わせて次々とコンテンツを読み込むjQueryプラグインのまとめ
ページ遷移を可能な限り少なくして、シームレスに気持ちよく情報を見せようといったWebサイトを、最近よく見かけるようになりました。しかしそのようなサイトを構築したいと思っても、経験が無ければハードルは高いもの。そこで今回は、そのような機能を手軽に実装できるjQueryのプラグインをまとめたエントリー「12 jQuery Infinite Scroll Plugins and Tutorials」を紹介したいと思います。 Mark Holton | Web Application Development スクロールに合わせて新たなコンテンツを読み込む機能を中心に、12種類のプラグインがまとめられています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 jQuery Scroll Path | a Hint of Creative スクロールに合わせて次々と文字を出現させ
ポチっとしたフリーのツール集 jQuery.flickScrollbar.js [jQuery]
jQuery.flickSimple.js や jQuery.flickable.js に、iPhone風のスクロールバーがあれば良いのに・・・ と思って作ってみました！ 合わせて使うとiPhone風のスクロールバーが付けられるjQueryです ※jQuery.flickScrollbar.js単独では使えないと思う・・ ダウンロード 使い方 [ ver 1.2.0 の変更点 ] 2013/02/24 CSS Tansformに対応しました。 位置の取得をoffsetからpositionに変更しました。 top, bottom, left, right, float のStyleを対象要素からコピーするように変更しました。 ver 1.0からのロジックを整理して一部を書き直しました。 refresh時に再計算する項目の見直しを行いました。 jquery.flickgal上での動作確認をしま
[スマートフォン]ヘッダーを固定配置にするJavaScript | サイブリッジラボブログ
はじめまして、今回初登場のアシスタントデザイナーのまこっちゃんです。 今後ともよろしくお願いいたします。 最近はスマートフォンサイト制作全盛期ですよね。今後はスマートフォンでリッチなサイトが、現れるのではないかとわくわくしています。 今回は、スマートフォンサイト制作中に躓いた固定ヘッダーにつきまして、『固定ヘッダーのJavaScriptは何がベストか』を考えていきます。 Mobile Webkit では【position:fixed;】が効かない！ 皆さんもPCサイトで一度は固定ヘッダーのサイトを制作された事があるかと思いますが、スマートフォンサイト制作で試された方もいらっしゃるのではないでしょうか。 PCサイトの固定ヘッダーで使用される【position:fixed;】がiPhone・iPadなどでは効かないという問題点に気をつけましょう。 iscroll まず、スマートフォン向けに使わ
![[スマートフォン]ヘッダーを固定配置にするJavaScript | サイブリッジラボブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e82e2c864f8e014b0448593dedfe46486c4e1fd5/height=288;version=1;width=512/http%3A%2F%2Fwww.cybridge.jp%2Fimg%2Fcommon%2Flogo_cybridge_m.gif)
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryで簡単実装ページ内スクロール — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
最近よく見かける「ページTOP」のスクロールをjQueryでは簡単に実装できます。 Javascriptソース $(function(){ $("a[href^=#]").click(function(){ var Hash = $(this.hash); var HashOffset = $(Hash).offset().top; $("html,body").animate({ scrollTop: HashOffset }, 1000); return false; }); }); Javascriptソースの解説 2行目:$("a[href^=#]").click aタグのクリック設定をしています。 $("a[href^=#]")と設定することで、hrefの最初に「#」があるaタグのみに反応するようにしています。 3行目:var Hash = $(this.hash); クリックし
swpnav
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce augue nulla, rhoncus sed faucibus sit amet, sagittis at metus. Mauris tristique dui eget turpis interdum ultricies. Donec volutpat, velit a congue convallis, nisi est ultricies tortor, sed pretium eros enim nec lorem. Pellentesque iaculis, felis ac interdum tincidunt, tortor lacus ultrices nisl, ut porta magna enim eu nunc. Cras nec ve
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】｜今村だけがよくわかるブログ
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】 テレビの下とかに流れる、テロップのような表現をwebサイトにも設置することができます。 「liScroll 」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html もう１つ知ってるプラグインがありますんで、ご紹介します。 「JQUERY NEWS TICKER」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.jquerynewsticker.com/ どちらもかっこいいですよね～。 シーンによって使い分け
ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth
ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25％、50％、75％といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c
jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
jquery.tablefix.js
»Download jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。 JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。 読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。 使い方 普通にテーブルをデザインする jQuery とプラグインを読み込む jQuery のセレクタでテーブルを選択して、プラグインを呼び出す これだけで、あとはプラグインがよかれにやってくれます。 プラグインの呼び出し方 $('tableSelector').tablefix({width: 600,
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders １．サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル ２．プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 ３．HTML H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ogaoga.org
flipsnap