https://b.hatena.ne.jp/mmmmnm/javascript/ javascriptに関するmmmmnmのはてなブックマーク (40) https://www.moongift.jp/2013/10/20131008/ mmmmnm 2013-10-09T00:00:29Z js 背景 webデザイン *Webデザイン JavaScript <blockquote cite="https://www.moongift.jp/2013/10/20131008/" title="まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.moongift.jp%2F2013%2F10%2F20131008%2F" alt="" /> <a href="https://www.moongift.jp/2013/10/20131008/">まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT</a></cite><p><a href="https://www.moongift.jp/2013/10/20131008/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d1d6a7fe2c063fb40a5e8ad9206a86188e5d11f9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fmoongift%2Fattaches%2F11391%2Flist.%3F1380457218" alt="まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT" title="まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT" class="entry-image" /></a></p><p>rainyday.jsはJavaScript製、GPLのオープンソース・ソフトウェアです。 コンピュータ上で自然現象を再現するのはとても面白い試みです。例えば物理エンジン、ライフゲームもその一つです。今回はWebブラウザ上で雨が窓にあたる様子を再現するrainyday.jsを紹介します。 背景はぼやけ、曇ったガラスに雨があたっていく感...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2013/10/20131008/"><img src="https://b.hatena.ne.jp/entry/image/https://www.moongift.jp/2013/10/20131008/" alt="はてなブックマーク - まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT" title="はてなブックマーク - まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2013/10/20131008/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 78 https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html mmmmnm 2013-09-24T00:07:58Z js jQuery javascript スクロール エフェクト アニメーション css <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html" title="[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-onepage-scroll.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html">[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html"><img src="" alt="[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll" title="[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll" class="entry-image" /></a></p><p>デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 &lt;head&gt; ... &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/s...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html" alt="はてなブックマーク - [JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll" title="はてなブックマーク - [JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-onepage-scroll.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 296 https://tympanus.net/Development/CreativeLoadingEffects/ mmmmnm 2013-09-23T23:52:36Z loading webデザイン web CSS Javascript jQuery アニメーション <blockquote cite="https://tympanus.net/Development/CreativeLoadingEffects/" title="Creative Loading Effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftympanus.net%2FDevelopment%2FCreativeLoadingEffects%2F" alt="" /> <a href="https://tympanus.net/Development/CreativeLoadingEffects/">Creative Loading Effects</a></cite><p><a href="https://tympanus.net/Development/CreativeLoadingEffects/"><img src="" alt="Creative Loading Effects" title="Creative Loading Effects" class="entry-image" /></a></p><p>YouTube Fill from left Fill from down Expanding box 3D Bar Bottom Pie Timer Centered Expanding Line Fill Sides Surrounding Borders Corner indicator Big Counter Filling Title Flat Top Bar Loading animations don&#39;t have to be restricted to a tiny indicator. Here is some inspiration for some creative...</p><p><a href="https://b.hatena.ne.jp/entry/s/tympanus.net/Development/CreativeLoadingEffects/"><img src="https://b.hatena.ne.jp/entry/image/https://tympanus.net/Development/CreativeLoadingEffects/" alt="はてなブックマーク - Creative Loading Effects" title="はてなブックマーク - Creative Loading Effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/tympanus.net/Development/CreativeLoadingEffects/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 64 http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723 mmmmnm 2013-09-10T01:52:18Z iPhone URL アプリ location iphone javascript iOS 開発 mobile <blockquote cite="http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fiphone-dev.g.hatena.ne.jp%2Flaiso%2F20120625%2F1340615723" alt="" /> <a href="http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723">はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知</a></cite><p><a href="http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6e60b1efb974203c94d41c7729a087dc4741802f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F26006613547248301%2F26006613547294880%2F1709195433" alt="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" class="entry-image" /></a></p><p>はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認くださ...</p><p><a href="https://b.hatena.ne.jp/entry/iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723"><img src="https://b.hatena.ne.jp/entry/image/http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723" alt="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 136 https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html mmmmnm 2013-09-09T23:54:47Z アニメーション js javascript Animation css jquery CSS3 *css <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html" title="[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-animo.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html">[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html"><img src="" alt="[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js" title="[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js" class="entry-image" /></a></p><p>Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html" alt="はてなブックマーク - [JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js" title="はてなブックマーク - [JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animo.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 69 https://design-develop.net/web-design/9-jquery-plugins-for-improving.html mmmmnm 2013-09-09T00:36:46Z jQuery プラグイン UX jQueryプラグイン Web制作 javascript ナビゲーション *plugin <blockquote cite="https://design-develop.net/web-design/9-jquery-plugins-for-improving.html" title="質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdesign-develop.net%2Fweb-design%2F9-jquery-plugins-for-improving.html" alt="" /> <a href="https://design-develop.net/web-design/9-jquery-plugins-for-improving.html">質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」</a></cite><p><a href="https://design-develop.net/web-design/9-jquery-plugins-for-improving.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/be27e751a2cfcb1954b2c47ab52c6b6d2c9af430/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2013%2F09%2Fjquery05.jpg" alt="質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」" title="質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」" class="entry-image" /></a></p><p>TOP  &gt;  javascript , WebDesign  &gt;  質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」 WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはj...</p><p><a href="https://b.hatena.ne.jp/entry/s/design-develop.net/web-design/9-jquery-plugins-for-improving.html"><img src="https://b.hatena.ne.jp/entry/image/https://design-develop.net/web-design/9-jquery-plugins-for-improving.html" alt="はてなブックマーク - 質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」" title="はてなブックマーク - 質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/design-develop.net/web-design/9-jquery-plugins-for-improving.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 80 https://www.moongift.jp/2013/09/20130908/ mmmmnm 2013-09-09T00:31:44Z iOS html 便利 ソフトウェア iPhone web iphone javascript 開発 <blockquote cite="https://www.moongift.jp/2013/09/20130908/" title="WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.moongift.jp%2F2013%2F09%2F20130908%2F" alt="" /> <a href="https://www.moongift.jp/2013/09/20130908/">WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT</a></cite><p><a href="https://www.moongift.jp/2013/09/20130908/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6b0e5cebe257211dc9abe1983856b1414a599b25/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fmoongift%2Fattaches%2F10145%2Flist.%3F1377606586" alt="WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT" title="WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT" class="entry-image" /></a></p><p>HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2013/09/20130908/"><img src="https://b.hatena.ne.jp/entry/image/https://www.moongift.jp/2013/09/20130908/" alt="はてなブックマーク - WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT" title="はてなブックマーク - WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2013/09/20130908/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 153 https://phpspot.org/blog/archives/2013/09/jquerynaver.html mmmmnm 2013-09-02T23:53:42Z jQueryプラグイン プラグイン レスポンシブ jQuery webdesign javascript *javascript ナビゲーション <blockquote cite="https://phpspot.org/blog/archives/2013/09/jquerynaver.html" title="レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2013%2F09%2Fjquerynaver.html" alt="" /> <a href="https://phpspot.org/blog/archives/2013/09/jquerynaver.html">レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2013/09/jquerynaver.html"><img src="" alt="レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌" title="レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌" class="entry-image" /></a></p><p>Naver/Formstone/Ben Plum レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」。 ありきたりな次のようなメニュー。 ブラウザの幅を小さくすると次のようにデザインが変更されます。 クリックで開閉。 フラットデザインがなかなか良い感じですね アニメーション設定やイベントハンドラのカスタマイズ...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2013/09/jquerynaver.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2013/09/jquerynaver.html" alt="はてなブックマーク - レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌" title="はてなブックマーク - レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2013/09/jquerynaver.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 47 https://kachibito.net/web-design/224-image-jquery-collection.html mmmmnm 2013-08-28T01:32:31Z 画像 jQuery アニメーション webデザイン まとめ web制作 javascript プラグイン <blockquote cite="https://kachibito.net/web-design/224-image-jquery-collection.html" title="画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2F224-image-jquery-collection.html" alt="" /> <a href="https://kachibito.net/web-design/224-image-jquery-collection.html">画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/224-image-jquery-collection.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c6687a6f9d3f527d81477f0f0007f4ac698c6b2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2024%2F07%2Fsiteimg.png" alt="画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net" title="画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net" class="entry-image" /></a></p><p>画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけ...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/224-image-jquery-collection.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/224-image-jquery-collection.html" alt="はてなブックマーク - 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net" title="はてなブックマーク - 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/224-image-jquery-collection.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1370 https://www.webcreatorbox.com/blog/jquery-tips20 mmmmnm 2013-08-06T01:56:51Z jQuery 画像 WEB まとめ web制作 *あとで読む javascript tips *WEB制作 テクニック <blockquote cite="https://www.webcreatorbox.com/blog/jquery-tips20" title="少しのコードで実装可能な20のjQuery小技集"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.webcreatorbox.com%2Fblog%2Fjquery-tips20" alt="" /> <a href="https://www.webcreatorbox.com/blog/jquery-tips20">少しのコードで実装可能な20のjQuery小技集</a></cite><p><a href="https://www.webcreatorbox.com/blog/jquery-tips20"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/23e55f7bbff2d08a766e3054333d2c8a4a9b0837/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F95e10bc85406472b83994c03e31ceeb7%2Fthumb_jquery.gif" alt="少しのコードで実装可能な20のjQuery小技集" title="少しのコードで実装可能な20のjQuery小技集" class="entry-image" /></a></p><p>少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.webcreatorbox.com/blog/jquery-tips20"><img src="https://b.hatena.ne.jp/entry/image/https://www.webcreatorbox.com/blog/jquery-tips20" alt="はてなブックマーク - 少しのコードで実装可能な20のjQuery小技集" title="はてなブックマーク - 少しのコードで実装可能な20のjQuery小技集" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.webcreatorbox.com/blog/jquery-tips20"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2863 https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html mmmmnm 2013-07-24T00:04:58Z スクロール html webdesign JavaScript jQuery jQueryプラグイン ヘッダー固定 header * jQuery <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html" title="[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-clingify.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html">[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html"><img src="" alt="[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify" title="[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify" class="entry-image" /></a></p><p>ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html" alt="はてなブックマーク - [JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify" title="はてなブックマーク - [JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-clingify.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 149 https://html5experts.jp/masuidrive/594/ mmmmnm 2013-07-24T00:04:44Z HTML5 html サービス web Webサービス javascript *Web制作 API <blockquote cite="https://html5experts.jp/masuidrive/594/" title="wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhtml5experts.jp%2Fmasuidrive%2F594%2F" alt="" /> <a href="https://html5experts.jp/masuidrive/594/">wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）</a></cite><p><a href="https://html5experts.jp/masuidrive/594/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/357c63b206dbeacbdff8405186b84c23d9a32aec/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fhtml5experts.jp%2Fwp-content%2Fuploads%2F2013%2F07%2F8856658928_e82a471d40_o-300x187.png" alt="wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）" title="wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）" class="entry-image" /></a></p><p>エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っている...</p><p><a href="https://b.hatena.ne.jp/entry/s/html5experts.jp/masuidrive/594/"><img src="https://b.hatena.ne.jp/entry/image/https://html5experts.jp/masuidrive/594/" alt="はてなブックマーク - wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）" title="はてなブックマーク - wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/html5experts.jp/masuidrive/594/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 462 https://commte.net//archives/3403 mmmmnm 2013-07-22T23:51:02Z HTML5 html スライド 知識 webデザイン Web まとめ web制作 css javascript <blockquote cite="https://commte.net//archives/3403" title="ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcommte.net%2F%2Farchives%2F3403" alt="" /> <a href="https://commte.net//archives/3403">ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７</a></cite><p><a href="https://commte.net//archives/3403"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c49a6e962ade184d6f2fa9a3adeb7c47d5eb29e9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_Webdesign1.jpg" alt="ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７" title="ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７" class="entry-image" /></a></p><p>作成：2013/07/22 更新：2014/11/01 Web制作 &gt; 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教え...</p><p><a href="https://b.hatena.ne.jp/entry/s/commte.net//archives/3403"><img src="https://b.hatena.ne.jp/entry/image/https://commte.net//archives/3403" alt="はてなブックマーク - ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７" title="はてなブックマーク - ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/commte.net//archives/3403"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1428 https://coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html mmmmnm 2013-07-19T00:20:02Z スクロール jQuery コンテンツ html webデザイン JavaScript プラグイン Plugin *web参考 <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html" title="[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-panelsnap.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html">[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html"><img src="" alt="[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap" title="[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap" class="entry-image" /></a></p><p>Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 &lt;head&gt; ... &lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/path/to/jquery.customEvents.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/path/to/jquery.panelSna...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html" alt="はてなブックマーク - [JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap" title="はてなブックマーク - [JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-panelsnap.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 66 https://liginc.co.jp/web/js/40934 mmmmnm 2013-07-17T23:56:24Z js html webデザイン web制作 JavaScript html5 canvas グラフ Chart.js chart <blockquote cite="https://liginc.co.jp/web/js/40934" title="Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fliginc.co.jp%2Fweb%2Fjs%2F40934" alt="" /> <a href="https://liginc.co.jp/web/js/40934">Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作</a></cite><p><a href="https://liginc.co.jp/web/js/40934"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/358beedaf5a22724aff69281f7d30e25bc7a22a7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2013%2F07%2Fmain3.jpg" alt="Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作" title="Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作" class="entry-image" /></a></p><p>こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるも...</p><p><a href="https://b.hatena.ne.jp/entry/s/liginc.co.jp/web/js/40934"><img src="https://b.hatena.ne.jp/entry/image/https://liginc.co.jp/web/js/40934" alt="はてなブックマーク - Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作" title="はてなブックマーク - Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/liginc.co.jp/web/js/40934"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 268 https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html mmmmnm 2013-07-17T23:49:07Z javascript html アニメーション jQuery スタイルシート 開発 js Plugin develop <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html" title="[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-gridly.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html">[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html"><img src="" alt="[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly" title="[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly" class="entry-image" /></a></p><p>デモのアニメーション Gridlyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;javascript/jquery.gridly.js&quot; type=&quot;text...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html" alt="はてなブックマーク - [JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly" title="はてなブックマーク - [JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gridly.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 71 http://weboook.blog22.fc2.com/blog-entry-315.html mmmmnm 2013-07-04T06:09:41Z CSS3 セレクタ js ライブラリ webデザイン web制作 *webデザイン javascript jQuery css <blockquote cite="http://weboook.blog22.fc2.com/blog-entry-315.html" title="CSS3 IE対策まとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fweboook.blog22.fc2.com%2Fblog-entry-315.html" alt="" /> <a href="http://weboook.blog22.fc2.com/blog-entry-315.html">CSS3 IE対策まとめ</a></cite><p><a href="http://weboook.blog22.fc2.com/blog-entry-315.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb9ffc84cd9df070c143ff779d66c8cad639737c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png" alt="CSS3 IE対策まとめ" title="CSS3 IE対策まとめ" class="entry-image" /></a></p><p>CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する...</p><p><a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-315.html"><img src="https://b.hatena.ne.jp/entry/image/http://weboook.blog22.fc2.com/blog-entry-315.html" alt="はてなブックマーク - CSS3 IE対策まとめ" title="はてなブックマーク - CSS3 IE対策まとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-315.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 683 https://commte.net//archives/3298 mmmmnm 2013-07-01T23:43:37Z jQuery まとめ Web webデザイン 画像 javascript プラグイン web制作 <blockquote cite="https://commte.net//archives/3298" title="jquery小技まとめ３２"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcommte.net%2F%2Farchives%2F3298" alt="" /> <a href="https://commte.net//archives/3298">jquery小技まとめ３２</a></cite><p><a href="https://commte.net//archives/3298"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7f6ed8f76aec6c3b43932140a5b097dd9ee29154/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_jQuery.jpg" alt="jquery小技まとめ３２" title="jquery小技まとめ３２" class="entry-image" /></a></p><p>作成：2013/07/1 更新：2014/11/01 Web制作 &gt; 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定...</p><p><a href="https://b.hatena.ne.jp/entry/s/commte.net//archives/3298"><img src="https://b.hatena.ne.jp/entry/image/https://commte.net//archives/3298" alt="はてなブックマーク - jquery小技まとめ３２" title="はてなブックマーク - jquery小技まとめ３２" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/commte.net//archives/3298"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1615 http://www.webopixel.net/javascript/538.html mmmmnm 2013-06-28T04:43:38Z ボタン javascript html css hover webデザイン まとめ ui Web制作 jquery <blockquote cite="http://www.webopixel.net/javascript/538.html" title="jQueryでスクロールすると表示する系いろいろ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F538.html" alt="" /> <a href="http://www.webopixel.net/javascript/538.html">jQueryでスクロールすると表示する系いろいろ</a></cite><p><a href="http://www.webopixel.net/javascript/538.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b9d143f58cddc9356ab5de183096618ddc08d8e2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2012%2F03%2F0308_s.jpg" alt="jQueryでスクロールすると表示する系いろいろ" title="jQueryでスクロールすると表示する系いろいろ" class="entry-image" /></a></p><p>jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップ...</p><p><a href="https://b.hatena.ne.jp/entry/www.webopixel.net/javascript/538.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.webopixel.net/javascript/538.html" alt="はてなブックマーク - jQueryでスクロールすると表示する系いろいろ" title="はてなブックマーク - jQueryでスクロールすると表示する系いろいろ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.webopixel.net/javascript/538.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1578 http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/ mmmmnm 2013-06-13T04:09:05Z jQuery plugin css プラグイン 画像 スライドショー ブラウザ webデザイン JavaScript フルスクリーン <blockquote cite="http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/" title="ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwebdesignrecipes.com%2Fhow-to-full-page-background-image-with-css-and-jquery%2F" alt="" /> <a href="http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/">ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ</a></cite><p><a href="http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/"><img src="" alt="ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ" title="ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ" class="entry-image" /></a></p><p>ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってと...</p><p><a href="https://b.hatena.ne.jp/entry/webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/"><img src="https://b.hatena.ne.jp/entry/image/http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/" alt="はてなブックマーク - ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ" title="はてなブックマーク - ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 782