最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
サイトの印象は「動き」が決め手！参考にしたいWebアニメーション45個まとめ
この記事では、ウェブサイトの印象が決まる「動き」に注目した参考Webアニメーション45個をまとめてご紹介します。 動きを取り入れることで、注目度がアップするのはもちろん、ユーザーの視線を目的のコンテンツまで自然と誘導できるなど、使いやすさの改善も期待できます。 アニメーションの基本ルールを理解しておけば、より効率的に動きを加えることができ、「次こんな動き入れてみよう」「この動き入れたら見やすいかも」など、具体的な実装アイデア出しにもオススメです。 サイトの印象は「動き」が決め手！参考にしたいWebアニメーションまとめ Naomi Osaka Folio Website Design & Animation 完成したウェブサイトをただ見せるだけではなく、そこにアニメーションを加えることで、魅力をプラスできるお手本にしたいテクニック。
スクロールに連動するアニメーションを実装する時は、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
もう誤魔化さない！ CSS Transform完全入門(3D編) - ICS MEDIA
CSSで3D風の表現ができることをご存知の方は多いでしょう。しかし、自由に使いこなせると自信を持って言える方は少数派ではないでしょうか？ この記事ではイメージの掴みにくい3Dの変形機能について、基本の使い方から実際の適用例までしっかりと紹介します。 なお、前回の記事『CSS Transform完全入門(2D編)』では3D部分を除いた基本の2D変形について紹介しています。3Dの変形は2Dの応用で利用するプロパティーもほとんど同じです。合わせてチェックしてみてください。 CSS 3D Transformでできること・できないこと 3Dの表現はCSSとしては少々異色の機能です。ときおり専用のライブラリやエンジンを使ったかのような高度な作品が話題になることもありますが、実装の複雑さや性能の観点で実用的なものは多くありません。 今回は見た目の派手さよりも、現実的にCSS Transformが向いてお
もう誤魔化さない！ CSS Transform完全入門(2D編) - ICS MEDIA
CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか？ この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは？ CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時（2010年代初頭）最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
伝わりやすさが違う、UIデザインのシステムステータス可視性のコツ4個まとめ
Webサイトにおいて状況を伝えるシステムステータスの可視性（英: Visibility）は、ウェブサイトのユーザビリティ研究の第一人者ヤコブ・ニールセン（Jakob Nielsen）氏のユーザビリティ10原則のひとつです。 システムの現在の状態を伝えることで、ユーザーはそのシステムを操作、制御している感覚となり、この感覚こそが信頼を築くのに役立ちます。 この記事では、Webサイトでシステムの状況をうまく伝えることができる、4つのインタラクティブで視覚的なフィードバック方法をご紹介します。 1. ユーザーのロケーションや進行状況を表示する視覚的フィードバック いまどこにいる？ 迷子になりたいというひとはあまりいないでしょうが、現実の世界だけでなくデジタルの世界の両方で起こり得ます。 アプリ内のどこにいるのかユーザーに知らせることが、優れたナビゲーション体験に不可欠と言えます。アプリとWebサ
超軽量！スクロールアニメーションスクリプト Delighters | WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”
投稿者： くりりん カテゴリー： プログラム >JavaScript コンテンツが横からスライドしたり、コンテンツが追従するように表示されたり、スクロールに合わせてCSSアニメーションを実装できるスクリプトをご紹介します。 Delightersについて DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、VueJS、Angular、jQueryなど、フレームワークにとらわれずに動作します。 レスポンシブに完全対応 スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなサイズに対応しています。 フレキシブル さまざまな要素にアニメーションを適用できます。 宣言的 CSSで定義したデフォルトのス
Google Earth Studio
Inside Earth Studio Powerful motion design, all in the browser. Earth Studio gives you the tools you need to create professional content with Google Earth imagery. Read more in the Documentation. Keyframe Animation Earth Studio uses keyframes, just like other industry-standard animation tools. Move the globe, set a keyframe, rinse and repeat. It’s that easy. Quick-Start Projects Create an orbit, o
使える！CSSアニメーション 20選 | SONICMOOV LAB
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP
海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana
CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。 ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。 そのままコピー＆ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8 CSSボタンデザイン記事を追加しました。 コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形 まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。 フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig
コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ
CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ ホバーエフェクトを確認するのには、「Run Pen」をクリック
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
[jQuery]inview.jsを使って横並び要素を順に表示させる方法 - Qiita
画面に表示されるタイミングでアクションを起こしたい時に便利な、inviewというjQueryプラグインがあります。 その要素の位置までスクロールしたらフェードインで表示する、といったエフェクトを簡単に実装出来るので大変便利に使っているのですが、横並び＋複数行の要素を順に表示させるのに手こずったので、その時に処理をメモしておきます。 やりたいこと 以下のイメージのように、画面内に表示されたタイミングで、横並び要素が順に表示（フェードイン）する。 ▼完成イメージ コード HTML jQueryとinview.jsを読み込みます。 <script src ="js/jquery.js"></script> <script src ="js/jquery.inview.min.js"></script> <div class="column"><!-- 全体を囲う包括要素 --> <div cla
![[jQuery]inview.jsを使って横並び要素を順に表示させる方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/322520a45cd7e8935098b40ca6b90980d282863f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEaW52aWV3LmpzJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUU2JUE4JUFBJUU0JUI4JUE2JUUzJTgxJUIzJUU4JUE2JTgxJUU3JUI0JUEwJUUzJTgyJTkyJUU5JUEwJTg2JUUzJTgxJUFCJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jZjI4ZmVhZjA1ZWMxZjk1NTY1NjEyNDU5YzkwN2JjMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3F1YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWJmYjZlY2RlZGY0ODA3YWQwOGIyZGYwODhhOGZiNDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D40659c3c1afd97cce9fff112a360a691)
Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゲームUI演出
「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540
http://www.okuni.me/entry/hover-animation-button-matome
