サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
gimmicklog.com
DESIGN 2020.05.18 Webデザイナー、ディレクターが工数削減して複数サイトを効率よく運営するには
TOPJavaScript マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js 公開日:2015.11.20 更新日:2015.11.23 JavaScript, パララックス parallax.jsは、マウスやジャイロセンサーの動きに合わせてパララックス効果を出してくれるライブラリです。 パララックスというとスクロールで行うというイメージがありますが、スクロールするほどコンテンツ量が無い場合に実現するのが厳しかったりします^^;。 そういう場合にサイトのアクセントとして使えそうですね。 使い方 必要なファイルを読み込む 以下から配布サイトからファイルをダウンロードして読み込みます。 parallax.jsデモ&配布サイト parallax.jsダウンロードページ j
TOPjQuery ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方 ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方 公開日:2015.11.20 更新日:2016.11.10 jQuery, モーダルウィンドウ animatedModal.js は様々なアニメーション付きでモーダルウィンドウを表示するjQueryプラグインです。 PCはもちろん、スマホやタブレットなどの表示領域が狭いデバイスでも、全画面表示だから有効的に使えそうです。 対応ブラウザはIE10↑、その他モダンブラウザ。 デモページ 必要なファイルを読み込む 以下からanimatedModal.js用のファイルをダウンロードして読み込みます。 animatedModal.js配布元 必要なファイルはani
TOPjQuery jQuery.cookie.jsでクリックしたら次回から表示させないようにする jQuery.cookie.jsでクリックしたら次回から表示させないようにする 公開日:2015.11.20 更新日:2015.11.22 jQuery jQuery.cookie.jsを使えばcookie情報の取得、操作が簡単に行えます。 今回は既読にした要素を次回以降表示させないようにする方法をご紹介します。 お知らせをポップアップで表示した時などに使えるかも。 デモページ jQuery.cookie.js配布元 MITライセンス デモページでは、「次回以降は表示させない」ボタンをクリックすると、それ以降はそのボックスが表示されなくなります。 「このサイトのcookieを消す」をクリックしてリロードすると再びボックスが現れます。 ダウンロードしたファイルには色々入っていますが、今回使うの
html、JavaScript、CSSのコードを自動整形、補完してくれるツールです。 提供されたhtmlのインデントがスペースだったけどタブにしたい。 色んな人の手によって運用されてるうちにCSSが散らかってしまった。 そんな時にこのツールを使えば、ワンクリックできれいに整形されたコードを吐き出してくれます。 Dirty Markup html、JS、CSS整形、圧縮、コンバートツール Beautify Converter html、JS、CSSの整形の他に、コードを軽量化してくれる圧縮(minify)ツールもあります。 また、コンバートツールも充実しており、特に個人的にありがたかったのがhtml→PHPへのコンバートです。 例えば、以下のようなhtmlのコードをPHPでechoするには、ダブルクォーテーションを文字列として認識させるために、バックスラッシュを入れる必要があるのですが、この
シンプル キャプション付き キャプション1下寄せ キャプション2上寄せ キャプション3 ディレイ有り キャプション4 ディレイ有り 横幅いっぱい サムネイル付き横スライド サムネイル付き縦スライド Retina対応 違いが分かりやすいようにRetinaとそうでないもので別の写真を表示しています。 ブラウザ内で全画面表示する デモページ
公開日:2015.11.20 更新日:2023.03.19 JavaScript, アニメーション スクロールしたタイミングでCSS3のアニメーションを実行してくれるwow.jsを使ってみました。 アニメーションにCSS3を使用しているので、IE9以下は対応していないようです。 レイアウトは崩れないので、アニメーションはおまけとして割り切れる案件で使えそうです。 主な設定方法は以下の通りです。 ■配布元 wow.js サンプルページ
インラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。 その場合はjQueryの記述方法を少しアレンジする必要があります。 デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。 白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。 デモページ 今回はIllustratorでSVGに書きだしたものを使用しています。 以下のように、動作を分けるレイヤーごとにまとめて半角英数でレイヤー名をつけておくと、id名としてSVGファイルに継承されます。 デモではパンダの黒い部分にblack、白い部分にwhiteとつけています。 サンプルSVGファイル SVGに書き出す [ファイル]>[スクリプト]>[ドキュメントをSVGとして保存]を選択すると
TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日:2015.11.20 更新日:2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました!素晴らしいです! デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので(これがいい場合もあるのですが)こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は
公開日:2015.11.20 更新日:2023.03.19 jQuery, アコーディオン もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。 読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が使えます。 もっと見るボタンクリックで透過させた部分をスライド表示する方法 文章が多めのニュース記事なんかでよくある見せ方ですね。 テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。 サンプル See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen. html <div class="content-wrap animated"> <div class="content-txt"> <p>この中にもっと見るで表示させたいテキス
公開日:2015.11.20 更新日:2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日:2015.11.20 更新日:2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
//マウスオーバーで情報ウィンドウを表示させる function map_canvas() { //マーカーの情報 var data = new Array(); data.push({ lat: '35.681382', //緯度 lng: '139.7660843', //経度 content: '東京駅<br />迷子にならないように!' //情報ウィンドウの内容 }); data.push({ lat: '35.678187', lng: '139.76817', content: '<p style="color:#d50000">八重洲ブックセンター</p>' }); //初期位置に、上記配列の最初の緯度経度を格納 var latlng = new google.maps.LatLng(data[0].lat, data[0].lng); var opts = { zoom:
画像単体 ギャラリー表示 iframe YouTube動画 Webページ ※ローカルだと動画が開かないので注意! インラインで画像とテキスト Open 画像とテキストを表示 キャプションを付けたい時なんかに便利です。 閉じる Retinaディスプレイ対応 Open Ajax Open
TOPjQuery 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 公開日:2015.11.20 更新日:2023.03.19 jQuery, アニメーション スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。 WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい!という場合にお勧めです。 しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。 ライセンスはMIT。 FadeThis-配布サイト ※2015年11月2
TOPjQuery 動画を全画面表示するjQueryプラグインBigVideo.js 動画を全画面表示するjQueryプラグインBigVideo.js 公開日:2015.11.20 更新日:2020.05.20 jQuery BigVideo.jsというjQueryプラグインを使って、動画を全画面表示する方法です。 webmやoggなど複数のファイル形式の動画を用意しなくても、mp4ひとつでブラウザ毎に最適化して表示してくれる素敵なプラグインです。 配布元サイト 今回は3つのパターンのサンプルを用意してみました。 1つの動画をループ再生3つの動画を連続してループ再生3つの動画をランダムにループ再生 前提として、IE8以下とタッチデバイスには対応していないようなので、これらは静止画を表示するようにしています。 IEで動画が連続再生されない時の対処方はこちら ※IE6~10はエミュレータで検証
TOPJavaScript パララックス用ライブラリ skrollr.js を使ってみた パララックス用ライブラリ skrollr.js を使ってみた 公開日:2015.11.20 更新日:2017.10.18 JavaScript, パララックス 有名パララックスサイト用ライブラリskrollr.jsを使ってみました。 IE7にも対応しており、(transformプロパティは未対応)実用的です。 今回作ってみたサンプルページ skrollr.js の使い方 CSSを読み込む <link href="src/skrollr.css" rel="stylesheet" type="text/css" /> JSを読み込む(下部) <script type="text/javascript" src="dist/skrollr.min.js"></script> <!--[if lt IE 9
公開日:2015.11.10 更新日:2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました
<div id="slider"> <div id="wrapper"> <ul id="carousel"> <li><a href="#"><img src="../images/main-bnr/01.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/02.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/03.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/04.jpg" width="600" height="3
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
<link rel="stylesheet" href="jquery.mmenu.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mmenu.min.js"></script> htmlの記述 メニューとして表示させたい部分を任意のidを付与して囲います。ここでは id=”menu” の部分です。 htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素(ここでは#wrap)で囲われているかです。 また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。 <div id="wrap"> <hea
このページを最初にブックマークしてみませんか?
『Gimmick log|jQueryやWordPressの情報を中心に紹介しています』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く