jQueryオブジェクトの裏側をのぞいてみよう！ · DQNEO日記
jQueryオブジェクトとは何か？ 最初に答えを言います。 jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである 下記の式を評価してみればわかります。 var obj = $('div'); alert(obj instanceof jQuery.fn.init); // => true Google Chrome Developper Toolsで変数を見てみると、確かにそのように表示されます。 次に、jQueryのソースコードを見てみましょう。 冒頭にこのように書かれています。 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, (ここでrootjQueryとは$(document
簡単にスクロールアニメーションが設定できるAOS（jQuery不要） | Cntlog
最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS（Animate On Scroll Library」をご紹介します。 まずは試しに実装してみたサンプルをご覧ください。 サンプルページ AOSとは AOSはAnimate On Scroll Libraryの略です。 公式サイト github 公式デモサイト AOSで出来ること 要素を表示させるアニメーションは「Fade」「Flip」「slide」「Zoom」の4種類が用意されています。 これらにタイミングや速度、上下左右の位置、回転の方向を指定できるのでかかなり自由度が
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="nav-toggle
javascriptを使って複数のYoutube動画を貼り付けても重くならないようにする方法 - Qiita
昔「◯◯な動画100選」っていう記事を開いたら1ページにYoutubeが100個掲載されていて、 パソコンが爆発した事があったので、これ以上被害者を増やさない為に紹介をします。 動作 iframeタグを見つけたら全てその動画のサムネイル(img)に置換する。 サムネイルをクリックすると、その動画のiframeが呼び出されてimgがiframeに置換される。 コード $(function (){ var movies = []; var images = []; //全てのiframeタグに対して処理を実行する。 $('iframe').each(function(index, element) { //iframeの中のsrc(埋め込みタグのURL)を取得。 var movie_src = $(this).attr('src'); //取得したURLはmovies配列に格納。 movies
【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。
【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。 昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。 一夜明けて、現時点で Google Feed API が復旧しているようですね。 しかしまたいつ廃止されるかもわからない状況なので、今のうちに対策をしておいたほうが安心です。 ……というワケで。 昨日の記事の続きです。 外部ドメインのRSSをjQueryで読込／出力するには？昨日紹介したやり方ではクロスドメイン問題を解決していないため別ドメインのRSSは読み込み不可能でした。 そもそもクロスドメインとは？「クロスドメイン」とは、一般的には『異なるドメインを跨いで通信すること』を指します。 セキュリティの関係で ajax では同一ドメインのファイルと
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
Instagram のユーザー情報を取得＋写真をサイトに表示＋それを自動スクロールする jQuery - ＷＥＢ制作の勉強メモ / 猫脳人間
Instagram の写真情報を取得してサイトに表示させ、 自動的にスクロールさせる。 これを jQuery と そのライブラリを使って設置してみました。 設置したものが ↓ です。 Test WEBSITE ｜ Silent Cait 以下、この設置したもののままになるようなソースの記述を見本に説明をしています。 Instagram のアカウント取得 アカウントの取得 Instagram （※ 基本スマホ用アプリで、スマホ写真のシェアを目的としているようなので、主な機能はスマホからでないと使えません。） Instagram の ユーザー情報「アクセストークン」を取得する １）以下にアクセスして、ログインします。 Instagram Developer Documentation ２）↓「Register Your Application」をクリックします。 ３）↓以下の項目を入力していき
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
jqueryドロワーメニューはDrawer Slide Menuがいいかも。facebookみたいな左スライドインメニューの作り方【デモあり】
jqueryドロワーメニューはDrawer Slide Menuがいいかも。facebookみたいな左スライドインメニューの作り方【デモあり】 Facebookのメニューみたいなドロワーメニュー（左スライドメニュー）をいくつか試したところ、Drawer Slide Menuがするする動いていいかもです。 PCでも動きます。 ※2015年3月追記 このDrawer Slide Menu はヘッダー固定と組み合わせると、動作がイマイチになることがあります。 ヘッダー固定したい場合は↓の記事のSlidebarsのほうがおすすめです。 >> ドロワー・スライドインメニューでヘッダー固定【デモあり】jquery Slidebarsが最強！drawer slidein menu こちらはDrawer Slide Menuのデモです。 サンプルページ ドロワーとは英語で引き出しという意味なんだそうです。
印刷範囲を指定できるjavascript「jPrintArea」
印刷時にナビゲーションなどのいらない部分を省略したい時があります。 CSSを分けることで可能ですが、いちいち別のファイルを作成するのも面倒です。 jPrintAreaでは簡単に印刷範囲を指定することができます。 sponsors 使用方法 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(functio
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
jQuery でイメージマップ：ほんっとにはじめてのHTML5 サンプル
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
