jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
縦スクロールのjQueryスライドショー12選
縦スクロールの画像スライダーを探す機会がありましたので、備忘もかねてご紹介します。なかなかないんですよね、縦にスクロールするプラグインって… 大体デモサイトにリンクしています。一応有料のものは有料と記しましたが、詳しい利用方法は配布先にて再度確認をしてください。 EVO SLIDER http://evoslider.com/demo3.html 無料と有料のパターン有り。商用利用は有料。 商用版はわりと細かいオプションがあり、かゆいところに手がとどくプラグインです。Version2.1.3でIEの等倍表示が可能になりますます使いやすくなり個人的に気に入っています。 【2013/09/05 追記】 Evo Sliderを実装するサンプルファイル付きチュートリアルを公開しました。 [デモ有り]Evo Sliderを使った縦スライドショーのチュートリアル WOW Slider http://w
【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
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
設置サンプル
Krispy Kreme Doughnuts 新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。 有楽町丸井の地下にもあります！こちらも同じく長蛇の列ですが新宿よりは込んでないみたい。待っている間に焼きたてのドーナツをくれたりします♪ ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！ サインがいっぱい 芸能人の方や、著名人の方のサインが壁にところなしと！ レバ刺 びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！ ハツ刺 珍しいハツ刺。生でハツ食べるなんて初めてでした！味
要素のスクロール｜jQuery plugin｜Ajax｜PHP & JavaScript Room
リスト要素の各アイテムに指定したメッセージをMarquee風に切替表示するjQueryプラグイン。 文字を流すスタイルは上から下、下から上、左から右など、垂直・水平共にオプションで指定することができます。 初期化時、メッセージ切替前／切替時、スクロール終了時に呼ばれるコールバック関数が用意されています。 長いメッセージを垂直方向に切り替える場合は、メッセージ切り替え表示後、更に表示されたメッセージを水平方向にスクロールさせることで、長いメッセージをすべて表示させることができます。 APIが用意されているので、動的にリスト要素にアイテムを追加したり、スクロールの一時停止や再開なども簡単に実装することができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
スクロールイベントの開始 / 終了 / 方向を判定する jQuery プラグインを書いてみた - Cyokodog :: Diary
バージョンアップしました。詳細は以下記事をご覧ください。[Ex Scroll] スクロールイベントの開始／終了、方向を判別できる jQuery プラグイン - Cyokodog 需要なさそうですが、備忘録ということで。 只今、以前作成した exFixed.js という jQuery プラグインの機能拡張を行っており、その中で、 スクロールイベントの開始、終了時にのみ処理を行う その際、スクロールイベントのスクロール方向に応じて処理を変える という実装が必要になりました。 jQuery におけるスクロールイベントの割当は下記のような記述になりますが、このままではイベントの開始,終了,スクロール方向は判別できません。 $( element ).scroll( function( evt ){ //スクロールイベント内処理 }); 以下の実装で判別できないか考えてみました。 スクロール方向の判別
スクロールに応じて動くアニメーションをつくる方法 | Stronghold Archive
どうもこんばんは！ 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え（むしろもう減った？） 目にする機会も増えたかと思います。 基本はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
jQueryで長くなったページを分割してボタンで切り替える
jQueryで長くなったページを分割してボタンで切り替える 長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。 でも、やっぱりページ別けしたいかな、でも同じ内容だし別けちゃうのもな、、、そんなときのためにjQueryを使用してわりとそのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。 投稿日2011年05月25日 更新日2011年05月25日 ページ内リンクしたマークアップでページ分割する 「section」ごとにページを分割します。 それぞれにidを割り振り、そのidに飛ぶように「nav」にはリンクを付けます。 普通のページ内リンクですね。 html <ul class="nav"> <li><a href="#c1">1</a></li> <li><a href="#c2">2</a></li> <li><a href="#c3">
横スクロールさせたい時便利に便利なjQueryプラグイン「Smooth Horizontal Page Scrolling」
人気記事ランキング div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」 105.2k件のビュー 高機能過ぎるjQueryスライドショー「Camera slideshow」 74.6k件のビュー ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」 71.3k件のビュー シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」 67.6k件のビュー ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」 41.9k件のビュー クリックすると横からメニューが現れるjQueryプラグイン『Sidr』 40.5k件のビュー レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」 38.7k件
jQueryでマウスホイールで横にスクロールする横型コンテンツ
jQueryでマウスホイールで横にスクロールする横型コンテンツ 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 投稿日2011年07月21日 更新日2011年07月21日 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが５つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li><a
流行のjQueryでスクロールするサイトを集めてみました
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ
jQueryで横スクロールのアニメーションするサイトを作る方法
「Smooth Vertical or Horizontal Page Scrolling with jQuery」で紹介されていた方法を参考に、jQueryでサイト全体を横や縦にスクロールさせる１つの方法を紹介しちゃいます！。 デモ スクロールさせる方法はいくつかあるのですが、今回の記事では一番簡単だと思われる方法を紹介することにします。まずは、デモをごらんください。元記事のデモはもっとかっこいいです。 デモを見る 考え方 基本的には、下のイメージのように、横スクロールでは、コンテンツを横に並べて、横長のコンテンツを作り、スクロールバーをスライドさせて見えるコンテンツを制御するのが一般的です。縦スクロールの場合も考え方は同じです。 ※縦スクロールのやり方は記事の後で紹介します。 基本レイアウト HTMLとCSSは、下記のようになります。 <!DOCTYPE html> <html lan
jQuery Smooth Div Scroll by Thomas Kahn - smooth content scrolling using jQuery
If you’re looking for the best male sex toy, your hunt ends here. With a simple google search, you will be served with thousands of male masturbators in the form of strokers, fleshlights, blowjob simulators, and sex dolls. Practically speaking, no one can try out the vast assortments of products to know which one would be the best. After so many years of scanning the internet and getting our hands
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ogaoga.org