スマホサイトに使えるメニューの動きまとめ |
スマホサイトで使われているメニューの種類 ドロップダウンメニューやスライドメニューなど様々なメニューがあります。 どのようなメニューがあるかは、以下のサイトにまとめられています。 スマホのメニューデザインに悩んだらこれを見る 徹底収集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を利用して現在のページのメニューデザインを変更する方法
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[JS]jQueryを利用して現在のページのメニューデザインを変更する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/03ed72272f7a275a69cb37063b52212ddf15e58f/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2014%2F12%2F620822.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でスクロールすると表示する系いろいろ
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
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
少しのコードで実装可能な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
[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
![[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42d4f0aeabe8d5c05510d7c537c44691f1eec9d1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015071301.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webworkersclip.com/2965/
要素をタイル状に並べる軽量プラグイン「Freetile.js」 | バニデザノート
tabtab.be
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
NavNav+
スクロールしたらヘッダーの一部だけ固定する - Qiita
