[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。 <div id="topbar" styl
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする - かちびと.net
要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル ご覧の通りテキストコンテンツとは非常に相性が悪く、通常のブログやWebサイトではほぼ使いどころが皆無なプラグインですが、個人的にはギャラリーコンテンツの作成機会が多いので多少調べる機会が多いかもしれません。 こんな感じで下揃えにします。まぁそんだけな
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
Isotope · Filter & sort magical layouts
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
hoverで表示するふきだしをjQueryでふわふわさせる | WebDelog
head内でjQueryを読み込んでおきます。 cssとhtmlを用意しておきます。 divのようなボックス要素を用意してその中にふきだしの要素を入れておきます。 ふきだしの箱となるdivはposition:relativeして、ふきだしはposition:absoluteを指定し、 位置なども指定しておきます。 .box{position: relative;background-color:gray;width: 200px;height: 200px;margin: auto;} #red{background-color:maroon;} .hukidashi{position: absolute; color:white; top:-20px;/*この値とEndPの値を合わせてください */ left:-30px; width: 100px;height: 100px; b
要素をブルブルさせるjQueryプラグイン「jRumble」
なんだか楽しかったので、紹介します。 jRumble | A jQuery Plugin That Rumbles Elementsは要素をブルブルさせられるjQueryのプラグインです。 マウスオーバーで印象を与える時に使えなくもないかもしれません。 もしかしたらキャラクターをブルブルさせたら面白いかもしれません。 ま、好きに使ったらいいじゃないでしょうかね。 sponsors 使用方法 jRumble | A jQuery Plugin That Rumbles Elementsからjrumble.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jrumble.1.0.js" type="text/jav
2011年・個人的に参考になったWeb制作向けの国内記事リスト - かちびと.net
来年の復習用の記事リストです。自分用。 年末ですし、だれかがまとめ記事を書く と思って待ってましたが、他力本願も あまり良くないので自分でリストを作る 事にしました。去年も作ったけどあまり 出来なかったんですよね。。 タイトル通り、個人的に参考になった記事で、来年の勉強用リストです。 去年の記事(2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ)と似たような感じだけど、必要な情報が偏ってきたのと、国内のRSS購読ブログ数が1/30になったのでリストも偏ってます。 リストの内容に関して この手の記事はいろいろご意見頂き易いので、ご覧頂く方に不毛なストレスを与えないように、内容に関して先に記述しておきます。 リストの内容ですが、単なるリソースの羅列のようなまとめ記事は個人的に参考になったことがないので割愛しています、というかこの記事自体そんな感じです。また、結果のみで解説
ページ内リンク先に滑らかにスクロールするjavascript「SmoothScroll」
twitter facebook hatena google pocket 同一ページのコンテンツが増加した時、アンカーを使用して移動させることがあります。 しかし、移動する際の急激な変化に疑問が残ります。 as day oass byのSmooth scrolling demoで公開しているjavascriptを加えるだけで、既存のHTMLにスムーズにページ内リンク移動機能を追加できます。 sponsors 使用方法 Smooth scrolling demoからsmoothscroll.jsをダウンロードし、head内に埋め込めば完成です。 <script type="text/javascript" src="http://yourdomain/smoothscroll.js"></script> あとは従来通りにHTMLを記述すればOKです。 HTML記述例 <!-- リンク元 -
JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 24日目（最終日） JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。 僕なんかがおこがましいとは思うんですが。 いっぱい書く とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。 ライブラリーやフレームワークは躊躇なく使う 簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。 分かりやすいと最近評判の本ですね。プログラミングの知識が全く無い状態の読者を想定しているそうです。 「Webデザイナーのための jQuery入門」という本を書きました – Takazudo hamalog で、私が書いた本の話に戻りますが、「Webデザイナーのため
reverseburo.com -
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]スムーズなアニメーションで地図（大きい画像）をダイナミックにスクロールさせるスクリプト -CraftMap
地図のような大きい画像を指定サイズにクリップし、クリックやドラッグ操作でスムーズにスクロールさせるjQueryのプラグインを紹介します。 CraftMap [ad#ad-2] CraftMapのデモ CraftMapの実装 CraftMapのデモ デモは二つあり、ページ内の一部に配置したものとウインドウいっぱいに配置したものがあります。 地図のスクロール方法は3種類の操作が可能です。 ナビゲーション（左のパネル）の各ラベルをクリック 地図上のマーカーをクリック 地図をドラッグ 各ラベル・マーカーをクリックすると、それに対応した付加情報をパネルで表示します。 Demo 2: ウインドウいっぱいに配置 [ad#ad-2] CraftMapの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.js" type="
ノンプログラマーのためのjQuery入門
kanazawa.js v1.0 〜JavaScriptコトハジメ〜（2011年2月5日開催）で使用したスライドです。Read less
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery-tubular - Project Hosting on Google Code
画像スライドショー・背景画像を実装するjQueryプラグイン2011年総集編
skuare.net - JavaScript / Movable Type / etc.
