jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス
自分で独自のアニメーション効果を作成するための関数です。 この関数でポイントになるのは、style属性の変化です。例えば”height”,”top”,”opacity”のようなstyleを、どのような値で完了させたいかを渡してやることで現在の値から変化させていきます。 ※ これらの値は、キャメルケースで表記されなければなりません。例えばmargin-leftは、marginLeftのように記述します。 例えば現在のheightが10pxで、animate関数に{height: “100px”}と渡した場合、高さが10pxから100pxに徐々に変化していく効果が得られます。これは数値のみに適用されますが、それ以外にも” hide”,”show”,”toggle”などの文字列が指定された場合にも、対応した効果を作成してくれます。 そもそも数値型の値をとらない属性（backgroundColor
スクロールイベントにおける position:absolute 要素の位置補正 - Cyokodog :: Diary
スクロールイベント内での position : absolute 要素の表示位置の補正処理について考えてみます。 具体的には以下のプラグインのような動きの動作原理について考えてみます。 jQuery Scroll Follow | demo スクロールにより対象要素が隠れると、スクロールに追従するように absolute 要素の表示位置が補正されます。 以前のエントリ「IE6 向け position:fixed + スクロール追尾型の要素固定表示の方法を考えてみた」でも似たようなことを試しましたが、この時は IE6 で position:fixed を擬似的に実現する事を目的としてたので、absolute 要素をスクロールさせるコンテナが $(window) 限定でした。 今回は position:relative な DIV 要素をコンテナとした場合や、擬似フレームの対応も含めて考えてみ
スクロールイベントの開始 / 終了 / 方向を判定する jQuery プラグインを書いてみた - Cyokodog :: Diary
バージョンアップしました。詳細は以下記事をご覧ください。[Ex Scroll] スクロールイベントの開始／終了、方向を判別できる jQuery プラグイン - Cyokodog 需要なさそうですが、備忘録ということで。 只今、以前作成した exFixed.js という jQuery プラグインの機能拡張を行っており、その中で、 スクロールイベントの開始、終了時にのみ処理を行う その際、スクロールイベントのスクロール方向に応じて処理を変える という実装が必要になりました。 jQuery におけるスクロールイベントの割当は下記のような記述になりますが、このままではイベントの開始,終了,スクロール方向は判別できません。 $( element ).scroll( function( evt ){ //スクロールイベント内処理 }); 以下の実装で判別できないか考えてみました。 スクロール方向の判別
scroll(fn) - jQuery 日本語リファレンス
各要素のscrollイベントに関数をbindします。 scrollイベントは、文書がスクロールした際に呼び出されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function ()
ページサイズやスクロール位置を取得する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 現在位置を取得するときのの基準となる、ウィンドウ・サイズ、ドキュメント・サイズ、スクロール量を取得するJavascript。ブラウザ互換とかで割りと苦労しました。 スクロール量（横）: スクロール量（縦）: ウィンドウ・サイズ（横）: ウィンドウ・サイズ（縦）: ウィンドウの中央位置（横）: ウィンドウの中央位置（縦）: ドキュメント・サイズ（横）: ドキュメント・サイズ（縦）: 以下にソースを出します。 スクロール量を取得 function getScrollPosition() { var obj = new Object(); obj.x = document.
世界のJavaScriptを読もう @ 2012
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
SafariのWebインスペクタでJavaScriptをデバッグする方法 - 小さい頃はエラ呼吸
はじめに Apple社のWebブラウザSafariにはWebインスペクタという開発者向けツールが標準で搭載されており、このツールを使うとJavaScriptをデバッグすることができるようになります。今日はこのWebインスペクタの使い方を少しご紹介したいと思います。 スクリーンショットはMacのものですが、Windows版Safariでもほとんど同じような手順でデバッグすることができると思います。 開発メニューを有効化する Webインスペクタを利用するには、はじめに開発メニューを有効化する必要があります。 環境設定から詳細タブを選択し、「メニューバーに開発メニューを表示」にチェックを入れます。 WebインスペクタでJavaScriptをデバッグする 開発メニューが有効になったら、続いてWebインスペクタでJavaScriptをデバッグする方法を説明します。 1.デバッグしたいページをSafa
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
クライアントとサーバの両方で使える JS コードの書き方 - Block Rockin’ Codes
追記 11/12/25 Bi ってそんなに一般的ではない、 Both-Sides JavaScript の方が、ということでまた変更しました。(side でなく side's') 11/12/04 Both Side JavaScript は変ということで、 BSJS=Bi-Side JavaScript に変更しました。 本文 CSJS と SSJS で両方同じ言語で処理が書けるメリットの 1 つとして、 書いた処理の共有があげられます。 (そこにメリットを感じない人もいるかも知れませんが。) 例えば Validater を共有 クライアントの状態をサーバで再現 などがあります。前者はそのままですね。 受け取った入力のバリデーションはサーバでは必須で、フィードバックを速くするためにクライアントでも同じように行う場合があります。 今まではサーバで書いたバリデーションと同等のものを JS に
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
Node.jsはソフトウェアの癌になる。 - from scratch
eBayのテクニカルスタッフであるTed Dziubaから衝撃的な記事が出たので、読んでしまいました。 Node.js is Cancer 要点を訳すと下記のような感じです。 Node.jsがスケーラブルであるというのは嘘。 Nodeの運用が難しい。 やっぱりJavaScriptってWebアプリのロジックを書くのに向いてない。 Node.jsがスケーラブルであるというのは嘘であるについて Nodeのサイトには下記のように記載されています。 Almost no function in Node directly performs I/O, so the process never blocks. Because nothing blocks, less-than-expert programmers are able to develop fast systems. Node内のほとんどのf
Node.js + Vowsではじめるテスト駆動開発
Node.jsで使えるTDD, BDDフレームワークはいくつかあるのですが（nodeunit, Jasmine, etc）コールバック・イベント周りのテストのしやすさとCoffeeScriptが利用出来る Vows が非常に熱い感じです。 特にテストコードをCoffeeScriptで（別途コンパイルせずに）そのまま記述出来るのは、テストコードの可読性を考えると大きなメリットだと思います。 Vowsのインストール# VowsはNode Package Manager（npm）でインストールする事が出来ます。vowsコマンドを有効にするためにカレントディレクトリの node_modules の他にグローバルにも入れておきましょう。 npm install vows npm install -g vows Vowsを使った開発手順# サンプルとして自分のフルネームを返す事しか出来ないPerson
XMLおよびスクリプティングによる自動パブリッシング | Adobe InCopy
ここでは、Adobe® InCopy®のXMLおよびスクリプティングのサポートに関する詳細情報を提供しています。個々のパブリッシングの要件を満たすカスタムソリューションのベースの確立にお役立てください。 XMLのリソース XSLを使用してXMLを変換* XMLを、HTMLや、プレーンテキスト、PDF、PostScript®、HTML、またはその他の形式のXML、およびInDesign®タグ付きテキストなどの任意のテキスト形式に変換できます（『Real World Adobe InDesign CS2』より抜粋）。 Time Out NY* ニューヨークの週刊娯楽誌のバイブル、『Time Out New York』が、InDesignおよびInCopyを使用することで、SoftCare K4パブリッシングシステム内でXMLを使用する方法を開発した実例を紹介します。
InDesign書類の自動PDF化 – tu-kazu.jp
もう少し前の話になりますが、InDesignで作成されたカタログの印刷依頼があり、そのInDesign書類というのが自動組版で作成されたのか、人海戦術で作成されたのか1ファイルに1ページで作成されており、なんと1万ファイルほどにも達します。 これを印刷できるよう面付け作業をおこなうために、ブック機能を利用して1ファイルにしてから書き出すか、ちまちま1ページごとにPDFを書き出すかが必要となりました。 まず1万ページという超大量のファイルを相手に作業するということで、できるだけ人手をかけずに処理をするためにこちらも自動化で対応することとなりました。 実はそれ以外の方法では時間がかかりすぎて実現性が乏しいというのが実際なのですが・・・ さてそれでは本題ですが、今回はフォルダに入ったInDesign書類を自動で開いてPDF書き出しまでを考えてみました。 InDesign書類の入ったフォルダを選択
javascriptで数値を3桁区切りで表示する方法
ネットショップなどで金額を3桁毎にカンマで区切って表示させる場合があります。他方、消費税、合計金額の計算も必要で、DBにカンマ付きの文字列として格納することにも計算時にカンマを取り除かねばならないという不便さがあります。DBにはカンマ区切りのない数値として格納し、ブラウザ側のjavascriptやサーバー側のjava、phpでは数値として計算に使用し、ブラウザでjavascriptを用いて表示させる時にのみ3桁区切りすることが適切かと思います。 ところで、javascriptで数値を3桁区切りする場合、下記のとおり、正規表現というのを用いて行うのが簡単です。 function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3
Camp Vermont
Add to Cart Produk ini tidak dapat dibeli karena bermasalah. Silahkan hubungi kami. Dalam dunia perjudian online, slot gacor menjadi salah satu permainan paling populer yang digemari oleh berbagai kalangan. Dengan mekanisme sederhana dan peluang menang besar, slot kerap menjadi pilihan utama bagi pemain baru maupun berpengalaman. Salah satu platform yang sedang naik daun dan menarik perhatian para
theChrisbox.com
I am Christian Baur, associate creative director currently connecting dots at Wieden+Kennedy, Amsterdam. I am Christian Baur, associate creative director currently connecting dots at Wieden+Kennedy, Amsterdam. I am Christian Baur, associate creative director currently connecting dots at Wieden+Kennedy, Amsterdam.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lettering.js - A jQuery plugin for radical web typography.