スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
人間のアーティストがStability AIやMidjourneyなどの生成AI企業を相手にした著作権侵害訴訟を進めることを裁判所が認める
生成AIのトレーニングデータに人間のアーティストの作品が用いられていることについて、生成AIの開発企業はフェアユースだと主張している一方、アーティスト側は著作権侵害だと非難しています。そんな中、複数人のアーティストがStability AIやMidjourneyなどの生成AI開発企業を相手取って起こした著作権侵害訴訟について、カリフォルニア州北部地区連邦地方裁判所が裁判を進めることを認める(PDFファイル)裁定を下しました。 AI companies lose bid to dismiss parts of visual artists' copyright case | Reuters https://www.reuters.com/legal/litigation/ai-companies-lose-bid-dismiss-parts-visual-artists-copyright-
Juitterを使って勉強会とTwitterを繋ぐ:Geekなぺーじ
昨日の、えxぺ勉強会(この素晴らしくてバカ野郎な世界：Twitter勉強会)ではTwitterのハッシュタグ検索を20秒毎に自動更新した結果をプロジェクタのスクリーンに出し続けながらの発表を行いました。 今回は会場内での無音コミュニケーションツールとしてTwitterが活用されたり、登壇者/運営者側がTwitter上で何が呟かれているかを把握するために使われていた感じでした。 たまに、面白い書き込みがあるとスクリーンに映し出された発言を指差しながら「こんなコメントが。。。」のような感じでネタにしたりしていました。 今回は顔出しNGの発表者の方々がいらしたのでUstreamによる中継がなかったのですが、Ustream中継があるときには会場外部と内部を繋ぐツールとして使えると思います。 今まで同様のツールを探していたのですが、うまいものが発見できていなかったので、今回JavaScriptで自作
jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」:phpspot開発日誌
jQuery Style - A gallery showcasing awesome sites built with jQuery jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」。 jQueryでいろいろ出来るのはわかった、でもサイトに実際に上手く使うにはどうしたらいいの？どうやったらよくなるだろう？と思うことがあると思います。 そんな時、jQuery STYLEで色々と見て参考に出来そうな部分があったら真似していって改善していく、ということが出来そう。 単純にサイトのサムネイルを取って掲載しているということではなくて、どういう部分でjQueryを使っているかについても一目で分かるようになっています。 ↑のサイトの場合、ツールチップなどいろいろとjQueryを活用していることが分かるアイコンが明示されています。 こうしたまとめサイトの作り方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker