JavaScript製アニメーションライブラリの原理！ イージングとCSSフィルターを組み込む方法 - ICS MEDIA
この記事は、記事「JavaScript製アニメーションライブラリの原理を理解しよう」の続編となります。前回の記事ではアニメーションの基本的な仕組みと、基礎部分の実装について解説しました。 今回はより実践的に活用できる機能として、動きに深みを出す「イージング」と、演出にエフェクトを加える「CSSフィルター」のアニメーションを実装します。CSSコーダーの方であれば、イージングはCSS Transitionで、CSSフィルターもボタンなどの演出で馴染みがあると思います。 イージングとは 前回アニメーションとは、時間経過とともに「ある値を0（0%）〜1（100%）の間で連続して変化をさせる」と解説しましたが、たとえば「最初はゆっくりで、徐々に早く変化させる」といった具合に時間経過に応じて変化の速度を調整するのが「イージング」です。 イージングには色々な種類がありますが、一般的には「easeIn~」
URLのパラメーターを取得する (JavaScript プログラミング)
目次1 概要2 URLSearchParamsを利用する方法2.1 書式2.2 プログラム : 指定したパラメーター名の値を取得する2.2.1 コード2.2.2 解説2.2.3 実行結果2.3 プログラム : パラメーター名、値を列挙して取得する2.3.1 コード2.3.2 解説2.3.3 解説2.3.4 実行結果3 document.location.search の値を文字列処理してパラメーターを取得する方法3.1 プログラム例3.1.1 コード3.1.2 解説3.1.3 表示結果 JavaScriptでURLのパラメーターを取得するコードを紹介します。 概要 JavaScriptでURLのパラメータを取得して利用したい場合があります。 JavaScriptでは、URLのパラメーターを"document.location.search"で取得できます。 ただし、URLのパスの後ろのパ
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
ajaxzip3 郵便番号検索 株式会社人気組
株式会社人気組, ajaxzip3, 郵便番号検索ajaxzip3 世界一、簡単に設置できる郵便番号検索を目指して！ 設置サンプル このページのHTMLソースコードを確認してみてください。 ajaxzip3は既存のHTMLページにたった2行のコードを加えるだけで設置できます。 プログラミングやサーバの設定は必要ありません。 郵便番号を入力すると自動的に住所が表示されます。 1ボックスで郵便番号7桁を入力させる場合の設定例 都道府県と以降の住所を分ける場合 郵便番号： 都道府県： 以降の住所： 都道府県と以降の住所を分けない場合 郵便番号： 住所： 郵便番号を3桁-4桁形式で入力させる場合の設定例 郵便番号：－ 都道府県： 市町村区： 以降の住所： Powered by 株式会社人気組
JavaScript入門 (全24回) - プログラミングならドットインストール
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
「Google マップ」の埋め込み地図をカスタマイズする方法まとめ フラップイズム
※2014年3月12日更新 「Google マップ」は2月にバージョンアップされています。 操作性が大きく変わっていますので、説明を加えました。 なお、「Google Maps JavaScript API v3」を使用している部分には変更ありません。 このまま使用できます。 ※2014年3月26日更新 bodyのjavascriptの関数を読み込む記述が消えてしまっていましたので、修正しました。 申し訳ございません・・・。 ※2016年8月31日更新 2016年6月22日に「Google マップ」のAPIが変更され、APIキーが必須になりました。 なお、APIを使用せずに埋め込む場合はAPIキーは引き続き必要ありません。 どうも、くーへいです。 最近ではない方が珍しいと思うくらい、「Google マップ」を埋め込んだホームページは多いですよね。 制作会社にいる皆さんは、「サクッ」っと埋め
fancyBoxでYouTubeの動画を再生する | mawatari.jp
fancyBoxでYouTubeの動画を再生する方法CakePHPでPHPUnitを利用する方法をまとめた動画を素材として、見てみましょう。 PHPUnit and You – By Mark Story 再生したい動画のページを表示します。今回の例だと、URLは、 http://www.youtube.com/watch?v=QF1NZM360Ucです。 動画の下部にあるタブを「概要」から「共有」へ切り替えます。 「共有」タブの中のタブを「この動画を共有」から「埋め込みコード」へ切り替えます。 iframeは、fancyBoxで生成するので、必要ありません。srcアトリビュートの値（URL）だけを選択し、コピーします。 これで下準備は完了です。要点をあげるならば、 http://www.youtube.com/embed/のあとに、動画のIDを記述すれば良いということです。 あとは、以下
jQueryを使ってアコーディオンを実装する | FSFIELD Labs
JavaScript jQueryを使ってアコーディオンを実装する アコーディオンはラベルをクリックすると隠れていたパネルがスライドしながら表示されるUIです。ポータルサイトのような、情報量に対して表示できるスペースが少ない場合に使用します。 格納するファイル jquery.js 記述の仕方 HTMLの記述 <dl> <dt>アコーディオンその1</dt> <dd>テキストテキストテキストテキストテキストテキストテキスト</dd> <dt>アコーディオンその2</dt> <dd>テキストテキストテキストテキストテキストテキストテキスト</dd> <dt>アコーディオンその3</dt> <dd>テキストテキストテキストテキストテキストテキストテキスト</dd> </dl> JavaScriptの記述 需要がありそうな3つのパターンを用意しました。が、ちょっと言葉だけの説明ではわかりにくいかも
jQuery：ページスクロール時に「ページトップへ」を表示 | raining
WEBページでスクロールした時に「ページトップへ」の表示を画面の下の方に出現させるのを見かけることが多くなっています。 jQueryで実装すれば簡単に設置させることが可能です。 長いページの場合など常に「ページトップへ」のリンクが画面にあれば、ユーザビリティ的にも良いと思います。 下記のサイトを参考にさせてもらいました。ありがとうございます。 http://www.webopixel.net/javascript/538.html 今回はjQueryで画面をスクロールした時に画面下部に「ページトップへ」のリンクをフェードさせて表示する方法をメモします。 ■ スクロールした時に「ページトップへ」を表示 【js】 jQueryを読み込み、スクロールした時の処理を記述します。 最初に「ページトップへ」の要素を非表示にして、指定したスクロール位置を超えた場合に「ページトップへ」の要素をフェードイン
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web初心者がjQuery 簡単なタブメニューを実装する方法(サンプル付き) - Sedori Plan