ネタバレなど掲載する際、画像やテキストにぼかし処理をしておき、ユーザーが自由に解除できるコンテンツをJavascriptで作る。
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ こないだ「ファイナルファンタジーX HD Remaster」をクリアしまして、マッコリ飲みつつ夜中4時頃エンディングに感動、号泣しとりました(◞‸◟) どうでもいいですね✌(´ʘ‿ʘ｀)✌ さて、今回は「JavaScriptが苦手なあなたへ！グーグルマップを簡単にカッコよくカスタマイズする方法」という記事でご紹介したマップの実装に、モーダルを実装するプラグイン「colorbox」を使用して応用したものを作ってみました✌(´ʘ‿ʘ｀)✌ 以下、ご紹介させていただきますね( ˘ω˘) colorbox http://www.jacklmoore.com/colorbox/ 実装 それでは実装方法を解説していきます( ˘ω˘)☝ HTML モーダルを起動させたいボタンとモーダルウィンドウを用意してあげましょう。 モーダルウィンドウは
どうも、連載予定は絶対に次回を書かないでおなじみの僕です。 Paw.js is 何 マルチタッチに対応してない、いわゆるfastclickを実現するものやtapイベントを発行するライブラリ、やたら機能が多くかつ特にtouchmoveでのイベント過多で処理落ちしかねないライブラリが多かったので、現実的に使うであろう範囲でめちゃ軽なやつが欲しかったので作りました。 Paw.js あなたがもしモバイルWeb開発者で60fpsを出さなければ死ぬのであれば使えばいいと思いますし、そんな必要が無いもしくはフリックやジェスチャも取りたいと言うのであればHammer.jsとか使えばいいんじゃないでしょうか。 シンプル, 小さい, 速い touchevent, pointereventのマルチタッチ対応 tap, doubletap, pressの3つのカスタムイベントを発行 fastclick機能 です。
見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQuery 読み込む --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- jquery.xdomainajax.js を読み込む --> <script src="jquery.xdomainajax.js"> </script> <sc
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
PgwBrowser - Browser & OS / platform detection plugin for jQuery / Zepto ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」。 次のようにJSON値でブラウザ、OS、viewport情報を受け取れます。iOS、Androidなどにも対応 関連エントリ ブラウザ上で動くイラストレーターのOSS「mondrian」 SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/011acf8e1c9225d55d2cc1eebb90e3691f016a1f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
Lorem ipsum Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Aenean semper felis ipsum, vulputate consequat dui elementum vel. Lorem ipsum dolor Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ip
TOP > plugin > 魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 jquery.matchHeight Tests ディスプレイサイズによって可変するボックスレイアウトの
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/b80759b41725608b25c138b140d6a9a63ee8beac/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
jQuery.sheet - The Ajax Spreadsheet グラフも描けるスプレッドシート作成jQueryプラグイン「jQuery.sheet」 超多機能でデータをAjaxで読み書きできるなど、なかなか凄そうなスプレッドシート作成ライブラリ。 タブを利用できたり、セルの修飾等もExcelっぽくて多機能。ブラウザ上で表計算機能が必要な場合の１選択肢として。 関連エントリ 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 一見普通のテーブルだけどExcel風に使えるjQueryプラグイン「Handsontable」
案件対応中に、画面のスクロールに伴って画面左（もしくは右）に配置したメニューが追従してくる「フローティングメニュー（エレベーターメニュー）」の実装を検討しました。Google検索でjQueryプラグインを探すと、3年ほど前から更新されていないプラグインや、jQuery公式サイトのPluginsから消えてしまっているプラグインばかりでしたので、サンプルスクリプトを公開します。 本サンプルをたたき台としてご利用頂ければと思いますが、「いいね」が多いようでしたらプラグイン化も検討してみたいと思います。 スクロール完了（停止）の検出...カスタムイベント「scrollFinish」について スクリプトの大枠は「windowオブジェクトのscrollイベントを検出したら、メニューの移動を実行する」という簡単なものですが、画面をスクロールしている間は常にscrollイベントが発生しています。そのため、
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script> ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpost
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea8fbab0e3ca804867ac40579f0a388bd89b1b59/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082501.png)
