CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween

2022/06/21 16 users fff プロパティ スクリプト CSSアニメーション CSS

Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表... 続きを読む

これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon | コリス

2021/06/09 21 users コリス ビューポート アニメーション 実装 見出し

Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画... 続きを読む

開発体験を変える! Chrome DevTools Tips 7選 - Qiita

2020/08/17 758 users Qiita document.querySelector

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するとい... 続きを読む

Chromeの開発者ツールを使って特定のDOM要素だけスクリーンショットする方法

2018/07/27 55 users Chrome スクリーン 特定 Qiita Command

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で... 続きを読む

CSSの機能を使用してクロスオリジンのiframeから表示内容を読み取るサイドチャネル攻撃 | スラド

2018/06/03 45 users SlashGear スラド mix-blend-mode

CSSの「 mix-blend-mode 」プロパティを使い、クロスオリジンのiframeに表示されている内容を読み取ることが可能なサイドチャネル攻撃について、発見者の一人が解説している( Evonideの記事 、 Ars Technicaの記事 、 SlashGearの記事 )。 Webページがクロスオリジンのiframe内のDOM要素にアクセスすることはデフォルトで禁じられているが、ifram... 続きを読む

CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron | コリス

2018/01/24 50 users Micron インタラクション コリス CSS ライブラリ

ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バ... 続きを読む

Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ | コリス

2015/10/30 502 users コリス デベロッパーツール elements タブ テクニック

先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Compu... 続きを読む

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2 | コリス

2015/03/19 161 users コリス jQuery Zepto スクリプト エフェクト

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、... 続きを読む

自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて | ココノヱブログ

2014/05/30 35 users ヤツ canvas ココノヱ can サイトリニューアル

前の記事を岡田がバズらせたので、プレッシャーを感じている山田です 公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その２です。 僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。 ぐにゃぐにゃする丸はHTML5のcanvasを、DOM要素周りの物理演算はBox2Dライブラリを使ってます。 can... 続きを読む

[JS]jQueryのプラグイン33+1選 -2012年10・11月 | コリス

2012/11/20 336 users jQuery コリス height width グリッド

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Grid-A-Licious スピーディなアニメーションでグリッドを最適化するレスポンシブ対応のレイアウトを生成。 Shapeshift ドラッグアンドドロップでレイアウトを変更できるPinterest風のグリッドを生成。 equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, ... 続きを読む

DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」:phpspot開発日誌

2012/10/30 12 users input インタフェース 代用 phpspot開発日誌 用途

cssConsole DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」 divエレメントをプラグインで追加される、.cssConsoleで初期化。 次のようなインタフェースに変換され、入力ボックスに変化します。 inputの代用としても使えそうですが、サーバコマンドを載せる場合なんかで、ちょっと変更してコピーする的な用途に使えそうです。 関連エントリ ターミナルに文字を... 続きを読む

[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble | コリス

2011/04/06 195 users jQuery jRumble コリス jquery.js 実装

テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。jRumbleの実装jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。JavaScript「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 続きを読む

好きなDOM要素をブルブル震えさせることができるjQueryプラグイン『jRumble』 | IDEA*IDEA

2011/04/05 39 users jRumble IDEA スクショ jQueryプラグイン

どこかで使えそうなのでメモ的にエントリー。指定した要素をブルブルさせることができるjQueryプラグインですよ。↑ スクショ撮ってみたけど全然伝わらないですなｗ。ただふるわせるだけじゃなくて、その振動の強さをコントロールできたり、クリックしたら振動するようにできたり、オプションが豊富なのが魅力ですね。ちょっとしたゲームなんかにも使えるのでは、と思ったりするので興味がある人は是非どうぞ。» jRum... 続きを読む

[JS]jQueryのプラグイン33+1選 -2010年5・6月 | コリス

2010/06/24 346 users jQuery コリス コンテンツスライダー プラグイン34選

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して拡大表示できるL [...] 続きを読む

ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM

2008/11/27 424 users 必須 CSS 100SHIKI com CSSレイアウト

ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 November 27, 2008 9:33 AM written by webmaster CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。 つまるところ、C... 続きを読む

404 Blog Not Found:javascript - CSSをいじくる

2007/03/11 94 users CSS 小飼 web JavaScript 参考例

The requested blog was not found on this server -- unless you requested that of Dan Kogai (小飼 弾). JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっている... 続きを読む