［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!
一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。 Perfect Scrollbarについて Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html ダウンロードはこちら perfect-scrollbar 実装方法 準備するもの jQuery Perfec
![［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar - Fly higher! Sky is the limit!](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c702dfee202d14913544bec5c1116498b0ef96d/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fp%2Fparadox_tm%2F20160517%2F20160517154350.png)
これはオシャレ！デザインとアニメーションが秀逸なメニューを実装するJSライブラリ - Noise of Web Programming
いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。 RESPONSIVE MULTI-LEVEL MENU 使い方 まずはソースをダウンロード。DemoのHTMLも一緒にダウンロードできるので、簡単に実装可能。一応以下に個人的に一番イケてる！と思ったDemo 2の実装方法を書いておく。 HTML headタグ内では以下の5つのソースを読み込む。 <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/component.css"> <script src="js/jquer
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン | Stronghold Archive
どうもこんばんは。今回は【jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン】についてメモしておきます。数行追加するだけで簡単に実装できう上に、iphone等の様々なディバイスにも柔軟に対応してくれます。どこかで試してみても良いかもしれませんね。 SLABTEXT 挙動も安定していて使い勝手も良いです。カスタマイズ性も高そう。パディング等で全体幅からスペースを取ったサイズ調整もできます。span等にはCSSの追加が必要なようです。詳しくはSLABTEXTへ HTML <h1 class="slab">HEADLINES</h1> <script src="jquery-1.X.X.min.js"></script> <script src="jquery.slabtext.min.js"></script> <script type="text/javascrip
テキストを均等割り付けしてくれるjQueryプラグイン「jQuery.justify.js」
Justified / ark 先日仕事で「Webページにおける文字の均等割り付け」を行わなければならない場面がありまして。 「そんなんCSSで簡単にできるでしょ」と思っていたら、text-align:justify;がwebkit系のブラウザだと上手く動かないことが発覚。 無理やりスペースつこうて揃えてやろうかなどと思っていたところ、NxWorldの@nxworld_net さんにテキストの均等割り付けをしてくれるjQueryプラグイン「jQuery.justify.js」を教えて頂きました:) 参考：文字の均等割り付けを行うjQueryプラグイン jQuery.justify.js | php-tips @OZPA 情報古いし試してないので保証はできないんですが、http://t.co/8Efen0aVwGみたいなjustify実装みたいなjQueryプラグイン使うとかですかね…。僕は
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
Modaal - A WCAG 2.0 Level AA accessible modal plugin by @wearehumaan
Modaal is a WCAG 2.0 Level AA accessible modal window plugin. Why another modal plugin? It's hard to find a plugin with the right mix of quality, flexibility and accessibility. We thought it would be interesting to develop something that would work in a variety of projects, furthering the cause for an accessible web. Accessibility Features WCAG 2.0 Level AA Support Saving page focusing state on mo
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
jQueryのresize()でリサイズされたら処理
ブラウザの幅や高さが変更されたら検知して処理してくれる便利なメソッドがresize()です。 常に画面の中央にタイトルを表示させたい場合に使いました。 ただ$(window)以外の要素には使えないので注意しましょう。
位置を固定したメニューを作るjQueryプラグイン「stickUp」
WEBサイトのトレンドである縦長ページにおいてメニューを上部に固定することが多くなっています。 これにより、現状どこを見ているのか、またどこまでページが続くのかなど明示できユーザーにとって優しくなります。 stickUp - a free jQuery Pluginにより簡単に導入できます。 sponsors 導入方法 下記のようなメニューがあったとします。 <div class="navbar"> <ul class="navbar-nav"> <li class="menuItem active"><a href="#home">Home</a></li> <li class="menuItem"><a href="#features">導入方法</a></li> <li class="menuItem"><a href="#news">サンプル</a></li> </ul> </di
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fadeOut([speed], [callback]) - jQuery 日本語リファレンス
タイプライターアニメーションエフェクト実装「jQuery.Hypertext.Typewriter」:phpspot開発日誌
テキストを部分的にアニメーションしながら交換できる「jQuery Text Rotator」:phpspot開発日誌
https://cdn.jsdelivr.net/gh/loganstellway/ZoomIt@master/demo.html
GitHub - sutara79/jquery.breadcrumbs-generator: jQuery plugin to generate breadcrumb list automatically from sitemap.
