Magnific Popup を使ってみる | Web Design Leaves
Magnific Popup を使ってみる CATEGORY: jQuery | TAG: Googlemap, Lightbox, Youtube, プラグイン, レスポンシブ 2014年2月7日 Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード（ページ右側の「Download ZIP」から） ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnific-popup.min.js」と「magnific-popup.c
スマホでメニューを開いた時に後ろはスクロールしないようにする : 森のコーディング
2月3 スマホでメニューを開いた時に後ろはスクロールしないようにする カテゴリ:jQueryiphone/ipadサイト Tweet 地味にはまってしまった。 スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。 (ハンバーガーメニューというやつ) これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。 さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。 タップでスクロールを禁止させるというのも見つけたが、 メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。 んで、しらべてみたら、htmlとbodyに対して、height:100%とoverflow:hiddenを割り当てればよいということがわかった。 実際に書くとこんな感じ。 閉じるときは解除も忘れずに。 $(
HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る | DevelopersIO
リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも
jQueryでドロップダウンメニューを手作りするを理解する入門。 : 森のコーディング
7月30 jQueryでドロップダウンメニューを手作りするを理解する入門。 カテゴリ:jQuery Tweet 今日ちょっとつまったので調べながら解決した。 まずこちらをの記事をご覧あれ。 「jQueryで作る多階層ドロップダウンメニュー」 http://ascii.jp/elem/000/000/475/475908/ cssまわりは、はしょります。 jquery部分の記述を見ると、こうなっている $(function(){ $("ul.sub").hide(); $("ul.menu li").hover(function(){ $("ul:not(:animated)",this).slideDown("fast") }, function(){ $("ul",this).slideUp("fast"
[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
<head> 内に jquery ファイルと一緒に jquery.backgroundSize.js ファイルを設置しますが、IE8 以下に対応させるので <!–[if lte IE 8]> で括るようにします。 <script src="./jquery.min.js"></script> <!--[if lte IE 8]> <script src="./jquery.backgroundSize.js"></script> <script> $(function() { $("div.contents").css({backgroundSize: "contain"}); }); </script> <![endif]--> .contents の要素に対してCSS3 の background-size:contain を適用させる例です。 <style> .contents { w
![[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e3075ed41a5eaca8cfb24739fffc8b6b8ebbc2b/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F09%2Fjquerybackgroundsize.png)
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。 カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
jQuery アニメーションの順序 – 複数アニメーションの同時実行や順番実行に関して | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のtipsは【jQuery アニメーションの順序 – 複数アニメーションの同時実行や順番実行に関して】です。基本的な部分ですが、復習の意味をこめ記事にしておきたいと思いました。すこしでもお役にたてれば幸いです。 サンプルHTML デモで使う共通のHTMLです。 <ul id="ex1"> <li><a id="a1">同時</a></li> <li><a id="a2">連続1</a></li> <li><a id="a3">連続2</a></li> </ul> <div id="bx1" class="box">1</div> <div id="bx2" class="box">2</div> <div id="bx3" class="box">3</div> 複数アニメーションの同時実行 $(‘#a1’).click(function(){
A jQuery Flickr Feed Plugin
View the Demo | Download the Zip We often work with clients that maintain accounts with Twitter, Flickr, Youtube and other services in addition to their website. Often they will want to pull in data from one of their accounts to their website. With Flickr, this is pretty easy because they make a simple API available. Having worked with it a few times, we decided to make it even easier to pull ph
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
松本市・安曇野市の格安ホームページ制作サービス「マカセル」 | 制作費無料
制作費0円 月々8,800円で全て込み 小規模企業様のための月額ホームページ制作＆管理サービス。 ホームページのことは私たちに任せて本業に集中してください。 月々の費用は税込みで8800円だけです。 レンタルサーバー、ドメイン、管理、更新、消費税10%まで8800円の中に含まれていますので、これ以上かかることはありません。 年に1度来るサーバーやドメインの更新も、こちらで行いますので更新忘れもありません。 サイト更新の指示も、メール、チャット、FAXなど一番ストレスがなく伝えやすい方法を話し合って取り決めますのでご安心ください。 ※消費税が将来的に変動する場合は、そのときの税率になります。
jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【開発】jQuery.Remodal のjs側からのclose – 笑心者
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
Redirecting
[jQuery] テーブルの1列目の<td></td>の中身を取得する方法 – Search Light（Python, React, Django, PHP, Linux）
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！
HTML5とかじゃない雪の降るアニメーション - jsdo.it - Share JavaScript, HTML5 and CSS
jQuery Content Slider | Responsive jQuery Slider | bxSlider