jQueryとSizzleの関係について - console.lealog();
事の発端。 jQueryの使わない機能があまりに多いのでカスタムビルドすることにした Sizzleも外せることを知る(容量がgzipで20KB分くらい減る) 外すと何が変わるか気になる <- いまここ ってなモチベーションで調べた一連の内容です。 jQueryとSizzleの関係 あらためて一応。 「jQueryといえば」な以下のようなコード。 var $hoge = $('#hoge'); // こういうのとか var $fuga = $('.fuga'); // こういうのとか $hoge.find('.foo'); // こういうのとか $hoge.text(); // 実はこういうのも そう、いわゆるこのセレクタの実態がSizzleなのです。 正確にはもう少し他のメソッドにも関係があります。 jquery/sizzle で、そのSizzleがjQueryの中でどういう動きをしてるか
$(function(){}) と $(window).on('load',function(){}) の違い - Qiita
ページ読み込み時に処理を実行したい場合、いろいろな書き方があると思います。 このあたりの違いをまとめました。 種類 jQueryのready と jsで昔から愛用されているonload がある。 ready $(function(){ alert('Hello'); }); //または $(document).ready(function() { alert('Hello'); }); //または jQuery(function() { alert('Hello'); }); //または jQuery(document).ready(function(){ alert('Hello'); }); //JavaScript document.addEventListener('DOMContentLoaded', function(){ alert('Hello'); }, false);
jQuery・JavaScript 高さ、横幅取得方法 - Qiita
.height() 要素の高さのみ .innerHeight() 要素のpaddingを含んだ高さ .outerHeight() 要素のborder、paddingを含んだ高さ .outerHeight(true) 要素のmargin、border、paddingを含んだ高さ .width() 要素の幅のみ .innerWidth() 要素のpaddingを含んだ幅 .outerWidth() 要素のborder、paddingを含んだ幅 .outerWidth(true) 要素のmargin、border、paddingを含んだ幅 JavaScriptによる要素サイズの取得
jQueryの$(this)の使い方(どこを指してるのか？)
結果（動作サンプル） 下記テキストをクリックすると文字色が変わるかと思います。 jQueryのthisについて 参考：jQueryでcssを追加、削除 説明 $(this)は「イベントが発生した要素」です。 ここでの$(this)はクリックイベントが発生した<p>要素ということですね。 $(this)を使うときは、基本的にはその$(this)を囲うようにイベントが設定してあるかと思います。 始めのうちは、そのイベントのセレクタが$(this)の対象となると覚えておけばよいでしょう。 $(‘p’).click(function() { $(this).css(‘color’, ‘red’); }); 上記の$(this)は$('p')のことですね。 しかし、わざわざ$(this)とせず、下記のようにしても動作するのであまり意味がありません。 $(‘p’).click(function() {
jQueryオワコンの話に思うこと｜森和恵｜note
Twitterで見つけたまとめ↓に興味深いものがあったので、感想を書き残しておこうかと思います。 【jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝 - Togetter】< https://togetter.com/li/1240562 > jQueryとは、ウェブサイトでよく使われているプログラム言語（JavaScriptの中間言語）なのですが、それを使うことの是非がTwitterのつぶやき討論になっていて、それがまとめられていました。 🐣 プログラムをそれほど自作しない層にとって、自分のウェブサイトに組み込むにはjQueryは仕組みがわかりやすくて最適。 🐆 ガチでプログラムしている層にとって、組み込まれたjQueryが開発の邪魔になることが多い。 と、両サイド側の意見がありました。 ひとつひとつのつぶやきに「そうだよね」と共感できる部分があり、
配列を操作するjQueryのユーティリティ関数まとめ - Qiita
jQuery要素/DOM要素の他に、純粋な配列の操作などができる関数をjQueryは持っていますが、命名や引数などややこしいことが多いのでまとました。 純粋な配列を操作できる関数 $.inArray(needle, array) $.each(array, callback(index, value)) $.map(array, callback(value, index)) $.grep(array, callback(value, index) [, invert]) $.merge(first, second) コールバック関数に渡される引数の順序が統一されていないことに注意。 純粋な配列は操作できない関数 $.unique(array) 勘違いすると厄介です。詳しくは後述。 関数の解説 $.inArray(needle, array) 公式リファレンス 引数needleが引数arr
現場で使うjQuery · takahashiakira/tech_for_web Wiki · GitHub
Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises jQueryは基礎がわかれば非常に理解し易く独自の拡張も可能になります。 本記事でまずはjQueryのコピペから抜け出してみましょう。 2.1 jQueryでできること jQueryの基本構造は、DO
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】】です。フルスクリーン（背景全画面）に画像を配置するプラグインは数々ございますが多機能で設定が面倒だったり、若干動きが不安定だったり、重かったりと選択に悩みます…。単純に特定要素の背景全画面に画像を配置するだけのプラグインでしたらこの【BACKSTRETCH】が軽量かつ簡易と一番のオススメです。 BACKSTRETCH ダウンロードページ ウィンドウ全画面への実装 実装方法は至ってシンプルです。まずはウィンドウの背景全画面に画像を配置します。 読み込み <script src="js/jquery-1.X.X.min.js"></script> <script src="js/jquery.backstretch
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
Animate transition
AnimateTransition({ container: container, blockIn: blockIn, blockOut: blockOut, animation: 'slide-in', onTransitionStart: function (blockIn, blockOut, container, event) { }, onTransitionEnd: function (blockIn, blockOut, container, event) { } }); AnimateTransition({ container: container, blockIn: blockIn, blockOut: blockOut, animation: 'slide-in', onTransitionStart: function (blockIn, blockOut, con
Perspective Mockup Slideshow | Codrops
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script. A while back, Franklin Ta wrote an article and made a really useful script for transforming an element in 3D in order to fit in a perspective mockup. In his article, he describes how the helper script can be used to create a 3D matrix transformation for embedding an ifr
jQuery Scrollify - Power steering for your scroll wheel
Basic Setup Scrollify requires jQuery 1.7+. <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : ".example-classname", }); }); </script> </head> <body> <div class="example-classname"></div> <div class="example-classname"></div> </body> </html> Configuration $.scrollify({ section : "section", sectionName : "section-name", interstitialSection : "", easing: "easeOutExpo", sc
slashie.org - slashie Patrik Goethe Patrik Göthe developer designer engineer startup startups リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
Perspective Mockup Slideshow | Demo 1
Free Mockup images from: Demo 1 and 3: Free PSD Mockups Vol.2 Demo 4: Morning Device Mockups Demo 2 image copyright by Vadim Sherbakov with granted permission to be used in this demo 6 MacBook in the house mockups Made by Vadim Vadim Sherbakov's Creative Market Shop Line Icons by Jonas Nullens for PixelBuddha
【jQuery+動画】ホバーでアニメーションさせた要素の中で動画を再生する方法｜Tips*Blog｜株式会社コプロシステム
こんにちは、UXデザイン室の松山です。 中学生の時のアダ名は「しょくぱんマン」と「青ジョリ」でした。 理由は色白なのとヒゲが濃いからです。2つのあだ名の割合は、ハーフハーフです。 さて前回のTips*Blogでは、jQueryで「卵をゆらゆら揺らす方法」を説明しました。 今回は、HTML5のvideoタグを使用し、マウスホバーでアニメーション（アコーディオン）した要素の中で動画を再生する方法を説明します。サンプルはjQuery版とCSS3版の2つ用意しました。 videoタグの再生・停止などの制御部分はCSS3版もjQueryを使用しています。 最近では動画を背景で再生させたりするサイトも多くなりました。 HTML5のvideoタグを使用すると動画の制御が凄く簡単なので覚えておくとかなり役に立つと思います。 今回作成したサンプル 【jQuery版】サンプルはこちら 【CSS3版】サンプルは
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテンツ表示とスクロール時のアニメ効果 | 古松
iconate.js - icon animation with css, javascript