【jQuery】要素を全画面表示してからスクロール｜合同会社チームサンタ
jQueryはもうweb制作にはなくてはならないものになりましたね。 web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。 そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。 チームサンタの三浦です。 フルスクリーンからのスクロール デモページ ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。 背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい！もちろんリサイズしても大丈夫！ ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。 HTML <body> <section id="s01"> <h1>全画面表示させたいセクション</h1> </section> <sec
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
スムーススクロールを実装する方法(ページ内をゆっくり移動)
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
【jQuery】スクロールして対象の要素が見えた時にメニューの色を変える｜ツーブロッカ
LP（ランディングページ）などでよく使われている、ある特定のエリアに差し掛かった時にパッと色が変わるナビゲーションの実装をしていきます。 今回は、セクションが画面に登場する度に、それに応じたid指定のサイドメニューの色が変わる効果を例にあげますが、そうでない場合にも応用が効くと思います。 HTML <main> <section id=”to_section1″>1</section> <section id=”to_section2″>2</section> <section id=”to_section3″>3</section> <section id=”to_section4″>4</section> <section id=”to_section5″>5<
jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
スクロールに応じて背景を変更する - かちびと.net
Result jQuery $(function() { var secTopArr = new Array(); var moveFlug = false; var allHeight = $('body').outerHeight(true); var bgImg = new Array('#000','#eee', '#555', '#ccc', '#999'); ////各sectionの位置 $('div.section').each(function (i) { secTopArr[i] = $(this).offset().top; }); var current = -1; //現在位置がセクションの位置より大きい場合は背景切り替え $(window).scroll(function () { for (var i = secTopArr.length-1; i>=0; i
スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
指定量スクロールした時点で上端にメニューを出す方法 [ホームページ作成] All About
指定量スクロールした時点で上端にメニューを出す方法ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。jQueryを使えば、「現在のスクロール位置」を取得してから「指定量以上スクロールされたかどうか」を判定して、ボックスの表示・非表示を切り替える……という処理も、とても簡単に実現できます。
![指定量スクロールした時点で上端にメニューを出す方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0aa01f9e7b239544627c2dbc6ba66d7600fb031/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F9%2F0%2F6%2F0%2Ftopimg_original.png)
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
jQueryでブラウザのスクロール値を取得してみる｜BLACKFLAG
先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、 jQueryでスクロール量を測るサンプルを作ったので紹介してみます。 jQueryでブラウザのスクロールされた際の値を取るには 『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、 あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。 なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。 実際の取得する際の記述方法は $(window).scrollTop(); $(document).scrollTop(); といった書き方でページのTOPからの距離を測れます。 『$(‘html’).scrollTop();』でもいけるっぽいですが
jQueryでスクロールするとヘッダーを固定させる
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
【jQuery】スクロール時に指定位置で要素を固定させるscrollfix.js
スクロールしてもサイドバーの一部が消えずについてくるサイト、最近よく見掛けますよね。どうしても真似したくて当サイトでも導入しました。 左サイドバーの新着記事とサイト内検索のボックスがそうです。メニューや更新情報など、常に表示しておきたい要素に使うとより効果的ではないでしょうか。 設置の方法・手順はいたってシンプル。 まずはサンプルを参照いただいた上で以下をご覧ください。 まずはjQuery本体をhead内に設置 多様なjQueryの機能を利用するために必要な親玉？をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。 <link href="//code.jquery.com/ui/1.10.3/themes/smo
jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法
久々にUI実装系の記事を書きます。Google Analyticsで当ブログのオーガニック検索キーワードを見ていると、「スクロール」、「ヘッダーバー」を使った複合検索でのアクセスが目立っていたりします。確かに最近はスクロールを合わせてヘッダーバーを表示させたり、非表示にさせたりするUIが至るところで見受けられるようになっています。自分もそれほど気にはしていませんでしたが、今回どんな方法で実装できるか試してみることにしました。いくつか紹介していきます。 はじめに – ヘッダーバーの準備早速、スクロールするとスライドして現れる「ヘッダバー」の実装方法について説明していきます。「ヘッダーバーはページの読み込み時は非表示となっており、ページを下にスクロールすると表示される」という機能を実装していきます。 ベースとなるヘッダーバー HTML / CSSまず今回の実装のベースとなるヘッダーバーを以下の
[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll
live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロールは慣性スクロールに対応しており、スピードは調整可能。 コンテンツのズーム機能。 対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]
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】スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方 ｜ KLUTCHE
どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s
jQueryでスムーススクロール [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類あります。div要素を1ページ表示してスムーズなスクロールで移動。 Create a Vertical, Horizontal an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bright英会話