CSSアニメーション例 上下左右に動く
アニメーションを適用する要素の基本プロパティ/値 前提として、CSSアニメーションを適用するクラスには、それぞれ次のプロパティ/値を設定しておきます。ラベンダー色の200x200のボックスです。アニメーションの開始状態によって少し値をいじりますが、都度解説します。 また、要素を動かすため（topプロパティやleftプロパティで操作するため）、positionプロパティをrelativeにしています（leftとtopの初期値として0を設定）。 CSS クラス名 { width: 200px; height: 200px; background-color: Lavender; position: relative; left: 0; top: 0; } CSS @keyframes moveToRight { 100% { left: 200px; } } .moveToRight { wi
画面遷移 | 動くWebデザインアイディア帳
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください！
Three.jsのOrbitControlsで手軽にカメラを制御する - ICS MEDIA
Three.jsにはカメラの動きを自動的に制御する OrbitControls クラスが存在します。 次の用途で役立つ機能です。 周回軌道を描くように、カメラを配置する ポインター操作でカメラの配置やアングルを変更する 導入方法 OrbitControls.jsは、Three.jsライブラリの本体に含まれていないので注意が必要です。CDNで利用するときは、以下のimportmapを記載して、three/addons/というエイリアスを貼ります。 <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.152.2/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/" } }
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
jQueryでのthisの兄弟要素はどのように記述しますか？…
jQueryでのthisの兄弟要素はどのように記述しますか？ クリックイベントなどで、 $('div').click(function(){ $(this).animate({...:...},{...:...}); }); のような文を使う時があると思いますが、上記のthisの兄弟要素、又は、子要素、等をセレクトする場合の書き方をご教授ください。 $(this">child")..とか、$(this > "child")..とかでは無理なので、全く別の表記がある気もしています。 よろしくお願いします。
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法
jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /* 110131 */ 子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました。 親要素 thisの親要素を取得する。 [javascript toolbar="true"]$(this).parent().css[/javascript] 参：jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く parentのカッコを忘れてて、子一時間悩むとかもう止めたい… 子要素 thisの子要素（ここでは<ul>）を取得する。 [javascript]$(this).children(“ul”)[/javascript] $(“ul”,this).css →これ、間違い（補足は後述） $(this).find(“ul”) →これも、間違い（補足は後述
click(fn) - jQuery 日本語リファレンス
各要素のclickイベントに関数をbindします。 clickイベントは通常、要素がマウスなどのポインティングデバイスでクリックされた場合に呼び出されます。 クリックは、mousedownとmouseupの組み合わせで定義されます。これらのイベントの実行順は、以下のようになります。 mousedownmouseupclick jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <p>First Paragraph</p> <p>Second Paragraph</p> <p>Yet one more Paragraph</p> $("p").click(function () { $(this).slideUp(); }); $("
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
jQuery 1.4.4の変更点: .data()でH... - YomuKaku Memo
jQuery 1.4.4になり、いくつかの機能追加と修正があったようです。変更点の一覧は末尾の「JQuery 1.4.4の変更点一覧」にあるとおりでしたが、2つほど便利な拡張が追加されていました。 .data()メソッド: 要素のdata属性をオブジェクトとして取得できる html5では、要素にdata属性としてajaxに使用するようなパラメータを設定することができますが、このdata属性のキーと値を.data()メソッドでオブジェクトとしてまとめて取得することができます。 例えば、以下のようになります。 <div id="test" data-url="http://example.com/" data-target="somewhere"> test div 簡単にdata属性の値を取得できるため、$(‘#test’).attr(‘data-url’)等のようなことをしなくて済むように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery dataの利用