スマホサイトに使えるメニューの動きまとめ |
スマホサイトで使われているメニューの種類 ドロップダウンメニューやスライドメニューなど様々なメニューがあります。 どのようなメニューがあるかは、以下のサイトにまとめられています。 スマホのメニューデザインに悩んだらこれを見る 徹底収集36選！ ここでは、このようなメニューの動きを実装できるjQueryを紹介していきます。 ドロワーメニュー ドロワーメニュー（スライドメニュー）とは、画面の横から引き出しのように現れるメニューです。 スマホサイトの初期に流行りましたが、端末によって不具合が多かった気がします。 最新の機種では安定しているように思います。 ドロップダウンも組み合わせることができるので、メニューが多いときは使っています。 Drawer http://git.blivesta.com/drawer/ ドロワーメニューを実装する際には、とてもお世話になっているjQueryプラグイ
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
jQueryのif文を使ってタグやクラス名によって条件分岐するやり方 – bl6.jp
jQueryで普通にif文を使った条件分岐のやり方です。指定したタグやクラス名があった場合や、子要素にそれがあったりした時の処理の振り分けなんかをやりたかったんですが、思ったようにならなかったので調べてみました。で、いくつか見つかったのでメモがてら記事にしてみることにします。 条件分岐の時に使えそうなメソッド 条件によって処理を振り分けることはプログラムを書く上でとても重要な感じがするので、使う頻度も結構ありそうな感じです。 hasClassを使ってクラス名を指定する hasClassメソッドを使えばクラス名を取得することができます。これを使ってsampleというid名の中にtextというクラス名がある時とない時の処理の振り分けてみます。 JavaScript $(function(){ if($('#sample').children().hasClass('text')) { $('p
[JS]jQuery を利用して、現在のページのメニューデザインを変更する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
jQuery を利用して、特定の要素にクラスを付けたり外したりする処理です。 例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ（カレントページ）であるメニューのデザインを変更して、「今このページにいます」という見せ方ができるようになります。 Javascript の記述例 <head> 内にjquery ファイルを設置し、以下のようなjavascript のコードを記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#nav li a').each(function(){ var $href = $(this).attr('href'); if(location.href.match($hr
![[JS]jQuery を利用して、現在のページのメニューデザインを変更する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 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-
1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】 | InfinityScope
スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれる、1ページで完結するタイプのサイトを作成するときに参考にしたいパララックスやフリップ型などのjQuery Pluginを集めました。 1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】is a post from:InfinityScope 投稿全文を表示する - View All Content Follow Me : FaceBook Page InfinityScope 関連オススメ記事モバイルメニューを実装する多機能 jQuery plugin『mmenu』ページを縦横斜めに、滑らかにスクロールすることが出来るJS,jQueryプラグインから4選「Masonry」のようなPinterest風デザインを実装できる jQuery pluginをいくつかリ
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
Sticker.js
A Javascript library that allows you to create a Sticker Effect No dependencies (jQuery not required) and MIT License Inspired by Sanghee Cho's Heroes Project Download on Github Example Move your mouse cursor on below circles IMAGE COLOR Usage Call the init() method with target elements (.className or #ID). It creates the necessary HTML elements in the target and add the sticker effect using CSS 3
[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat
デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。 スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。 Chocolatの特徴 個人ユーザーからプロのWeb制作者まで 専門的な知識がなくても簡単に実装でき、APIを使うと更に高性能な機能を提供します。 クロスブラウザ対応 全ての主要ブラウザで動作します。 テストブラウザ: IE7+, Firefox, Chrome, Opera, Safari 軽量 スクリプトはたった23KB、ミニファイ版は10KBです。 レスポンシブ対応 デスクトップ、タブレット、スマホをサポート。 デバイスごとに異なる画像を表示したり、自身のブレイクポイントを定義するこ
![[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat](https://cdn-ak-scissors.b.st-hatena.com/image/square/38b45d852b9f815258fa2b8ef8ae530164b9fcfa/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072901-01.png)
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
jQuery入門 - CDNにホストされているjQueryファイルの読み込み - Webkaru
CDNにホストされているjQueryファイルの読み込み方法を解説します。 ダウンロードしたjQueryファイルを読み込む方法はこちらを参考にしてください。 jQueryファイルの読み込みCDNとはCDN（Contents Delivery Network, CDN）とは、ファイルや画像といったWEBコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。 サーバーが世界各地に分散しているので、最適なパフォーマンスを訪問者に提供することができ、一度ダウンロードしたWEBコンテンツはキャッシュされるので、再ダウンロードする必要がないといった利点もあります。 jQueryのCDNを使ったjQueryファイルの読み込み方法 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> GoogleG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webworkersclip.com/2965/
要素をタイル状に並べる軽量プラグイン「Freetile.js」 | バニデザノート
tabtab.be
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
NavNav+
スクロールしたらヘッダーの一部だけ固定する - Qiita
