ページやブロック要素の切り替えがかっこいいプラグイン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のプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」 | mororeco
Facebookやtumblr、TwitterなどのSNSサービス等でよく見られる、ページの一番下までスクロールをすると、それ以前のコンテンツを自動的に表示してくれる「jQuery.Bottom.js」をご紹介します。コンテンツが多くなるとページ送りで別ページへ遷移する構造もありますが、自動読み込みにすることでメリットのある場合には、取り込んでみるのも良いかもしれません。 1.jQuery.Bottom.jsをダウンロード jQuery.Bottom.js 2.jQueryとjquery.bottom.jsを読み込む <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascri
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
要素を無限スクロールさせるjQueryプラグインいくつか - かちびと.net
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
啓文社 - 2010.05.15 jQuery.autopager スクロールでどんどん表示
Bingの画像検索などで、検索結果をスクロールすると、次々と検索結果があらわれてくるものがあるのですが、今回は、jQuery.autopager を使って似たようなことが実現できるのを試してみました。 サンプルでは、Amazon の「本」のトップセラーを取得し表示させています。 当サイトの設置サンプル ヘッダ部 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1");</script> <script type="text/javascript" src="jquery.autopager.js"></script> <script type="text/javascript"> $(function() { $.autopag
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
【jQuery】最下部までスクロールしたら自動でページ送りする『autopager.js』
検索結果の表示であれば栞のような意味合いで有用ですが、一般のブログでは直近のエントリをいかにサクサク閲覧できるかという点で不向きな気がします。 そこで、ページ最下部までスクロールしたら自動で次ページを読み込むjQueryプラグイン『autopager』を導入してみました。 配布元はこちら。 jquery-autopager ご利用の際はMIT Licenceに従ってソース内の著作権表記をそのままにしておくこと。 まずはjQuery本体をhead内に設置 多様なjQueryの機能を利用するために必要な親玉？をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。 <link href="//code.jquery.com
スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | SHINGO IRIE
よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。 導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。 そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <div
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法｜BLACKFLAG
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 （最後は3つ表示） 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID（もしくはクラス）を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」｜BLACKFLAG
2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、少しずつ再開してみようかと思います。 Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたのでメモ書き程度に紹介してみます。 ≫jquery.esn.autobrowse.js 上記チュートリアルページでデモが確認できますが、サンプルではページロード時に決まった数（20個）の画像を先に読み込んでおいて、ページをスクロールするとさらに20個ずつ画像を読み込み、100個まで表示した時点で動作をストップさせています。 使い方もさほど難しくなく、プラグインファイルと下記の実行用スクリプトにて実装が可能なようです。 ◆SCRIPT $(".page").auto
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
要素のスクロール｜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
設置サンプル
参照：Smooth Div Scroll ▼マウス操作で水平方向にスクロールする画像スライド デフォルト マウス操作でスクロールします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
サンプル – 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス