パララックス用ライブラリ skrollr.js を使ってみた｜Gimmick log
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
フルスクリーン表示するjQueryのレスポンシブメニュー｜Gimmick log
公開日：2017.12.25 更新日：2020.05.13 jQuery, ナビゲーション ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。 ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。 サンプル See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen. ↓別ウィンドウで見たい方はこちら デモページ html htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。 <div class="header"> <div class="logo">SITE NAME</div> <a
Googleマップのマーカーをクリックしたらリンク先へ遷移させる｜Gimmick log
TOPJavaScript Googleマップのマーカーをクリックしたらリンク先へ遷移させる Googleマップのマーカーをクリックしたらリンク先へ遷移させる 公開日：2015.11.20 更新日：2019.06.11 JavaScript Googleマップのマーカーをクリックしたら、任意のページへ遷移させる方法です。 複数のマーカーにも対応しています。 デモページ 基本設定 必要なファイルを読み込む Google Maps API のスクリプトを読み込みます。 v3からAPIキーが不要になっているので、以下のコードをそのまま貼り付けて使えます。 ※2018年からAPIキーが必須になりました。 Google Cloud Platform でAPIキーを取得してください。
slick サンプル集
slick.jsのデモページです。詳しい使い方はこちらの記事からどうぞ。 単体画像 複数表示（レスポンシブ） サムネイル付き センター寄せ両サイド表示（レスポンシブ） 画像遅延読み込み 詳しい使い方はこちら
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
jQueryのスライドメニューmmenuの使い方｜Gimmick log
<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
【jQuery】もっと見るボタンで要素を開閉する方法｜Gimmick log
公開日：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>この中にもっと見るで表示させたいテキス
jQueryでアニメーションをループさせる方法｜Gimmick log
公開日：2015.11.10 更新日：2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました
jQueryスライダー Slider Pro の使い方｜Gimmick log
公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
【CSS】background-sizeで背景画像をレスポンシブに設定する方法｜Gimmick log