このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.
![dfltweb1.onamae.com – このドメインはお名前.comで取得されています。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6acb4e00aeabcaf6f6092807763841f710909ab3/height=288;version=1;width=512/http%3A%2F%2Fplus.appgiga.jp%2Fwp-content%2Fuploads%2Ffiles%2F2015%2F07%2Fadobe-creative-sdk_01.jpg)
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 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 適用する要素
MediaElement.js Plugins Boost your player with Chromecast, Google Analytics and more Look good. Sound good. MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for media files (MP4, MP3), streaming content (HLS, M(PEG)-DASH), and embeddable players like YouTube, Vimeo, Twitch, DailyMotion, Facebook, and SoundCloud.
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ?」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ???」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第5回は、 Web解析ツールとしてよく使われるGoogleアナリティクスについての悩みを解決します。 Googleアナリティクスのイベントが正しく送信されているのか確認したい Web解析ツール「Googleアナリティクス」の機能に、ボタンを押した時など任意のタイミングで独自の指標を取得できる「イベント トラッキング」があります。便利な反面、イベント トラッキングを利用するには、トラッキングコードのカスタマイズが必要です。 設定をしても、Googleアナリティクスのレポートで数値を確認するまでイベントデータが送出できているか確認できずストレスを感じたり、意図する数値がレポートに表示されない原因を特定できず、時間を無駄にしたりすることがあります。
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
コンテンツとサイドバーをfloatしてレイアウトする際に、デザイン上でサイドバーがfooterまでついている場合があります。 その時にはサイドバーにmargin-bottom: -10000px;とpadding-bottom: 10000px;を書いてコンテンツにはoverflow:hidden;を書きます。 そうする事でサイドバーの高さをコンテンツと同じ高さにできるのでサイドバーの背景がずっとついてくる形にコーディングできます。 しかし、ここで問題が…ページ内リンク()を設定すると表示が崩れてしまいました! 別ページへのアンカーリンクで不具合が発生jqueryのページ内スクロールを使用することでページ内でのスクロールは問題なく動いていました。 しかし、別ページのアンカーリンクの場所にリンクをつけた途端に挙動がおかしくなりました。 こんな感じの画像になる javascriptでのアンカー
Select DOM elements by CSS selectorquerySelectorAll - a CSS selector method like the one provided by jQuery. jQuery: $(selector), $(selector, context) Select elements by class namegetElementsByClassName - a fast way of selecting DOM elements by class name in modern browsers. Does not work in IE 8 and below. jQuery: $('.foo') Select elements by tag namegetElementsByTagName - a fast and cross browse
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
JavaScriptで使われる関数の特徴や注意点を思いついた限り書いていこうと思います。勉強し始めて間もない人には厳しいかもしれません。ある程度サンプルコードを書いたりした人にとっては、「でJavaScriptの関数って結局なんなの?」って思うところを書いてみたつもりです。 JavaScriptでの関数はオブジェクトである関数オブジェクト(Functionオブジェクト)まずはコードから。 1 2 3 4 5 6 7 8 9 10 11 var add = function(x,y) { return x+y; } console.log(add(4,5)); // 9 add = 0; console.log(add); // 0 console.log(add(4,5)); // エラーになる はい。まずは一番上から。ここではaddという名前をもった変数に関数オブジェクトを格納していま
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
Papa ParseはCSVをパースするためのJavaScriptです。大きなファイルサイズにも対応可能でCSV⇔JSONでコンバートしてくれます。他、ローカルファイルを開ける、区切り文字の自動検出等が特徴として挙げられています。非依存型のようですが、jQueryとの併用も出来るみたいですね。ライセンスはMITです。 Papa Parse
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く