Animated Mesh Lines | Codrops 直線や文字をグニャグニャとアニメーションさせるデモ「Animated Mesh Lines」 Three.jsを使って実装されたデモ集ですが一見の価値アリです 関連エントリ グリッド状の楽しいレイアウト実装サンプル JSで背景がグリグリダイナミックに動くサンプル
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた
lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけのシンプルな仕様です。 <p data-lax-preset="spin fadeInOut">foobar!</p> <img src="huga.jpg" data-lax-translate-y="0 0, vh 200" />こんな感じの書き方で後はCSSでスタイルする流れとなります。簡単に導入できて良いんじゃないでしょうか。ただし、しつこいようですが、明確な理由のない導入はいたずらと判断され逮捕されかねませんので注意して検討する事をお薦めします(冗談ではなく)。ライセンスはMIT。 lax.js
Ericは20年以上の経験を持つWebデザイナーです。『Your Guide to Becoming a Freelance Web Designer』の著者でもあります。 ページネーションはデザインの中での必需性が低く、見過ごされることが多いもののひとつです。しかしブログやコンテンツの多いサイトでは、ページネーションはナビゲーションにおいて重要な意味を持ちます。サイトのページネーションが上手く作られていると、ユーザーはサイトを深くまで探求するようになるでしょう。 信じられないかもしれませんが、ページネーションのレベルを次のステップまで引き上げるデザイナーたちがいます。ここではWebサイト改善に役立つ、独創的なページネーションのコードスニペットを見ていきましょう。 シンプルで直観的なホバー効果 基本的なホバー効果によって標準的なページネーションは大幅に改善されます。カーソル移動に合わせて滑
最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連:使える!CSSアニメーション 20選 ちょっとクール CSS loading animation 12 CSSだけで描かれたものです。 ゲームで見かける Rotate / Pulse Loading Animation ゲームで見かけそうなローディングです。 ヘキサゴンアニメーション overwatch loading by css3 ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。 CSSのみ Cube Flipping
100記事到達を目前に、これまで書いた記事を振り返ってみた( ˘ω˘)☞三☞シュッシュッ【はやちの黒歴史】 実装方法 今回は、divを動かしたいぶん用意して、css3のanimationで実装してみます。手順は下記の通り。 html divの中にsvgも入れ込んでみます。 <div class="particle-wrapper"> <div class="particle"></div> <div class="particle">//svg省略</div> //中にsvgも仕込んでみる //particleのdivが20個続く </div> css sassのfor文の中にanimationのキーフレームを書きます。 @for $i from 1 through 20 { //この中に記述 } キーフレームアニメーションを設定。 transformの中はsassのrandam関数を使用
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
Posted: 2019.01.18 / Category: HTML&CSS マウスオーバーすると奥行きのあるかのようにくるっと回転するフリップボタンを作ってみます。 See the Pen Flip Pen Navigation by webopixel (@webopixel) on CodePen. HTML タグはaタグの中にspanを入れてます。 span2つにして表裏にした方が直感的ですがマークアップ的に微妙な気がしたので、aにtitle属性を設定してCSSの擬似要素で裏側のボタンスタイルを作成することにします。 html <nav class="flip-nav"> <ul> <li class="nav01"> <a href="#" class="flip-btn" title="HOME"> <span>HOME</span> </a> </li> <li class
Result 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです 今ではCSSだけで出来るようになりました css.card {/*親要素*/ border-radius: 16px; width: 360px; height: 360px; background: url(https://picsum.photos/400/300); position: relative; overflow: hidden; } .card:before {/*オーバーレイ*/ content: ""; position: absolute; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.92); } .card .img { position: absolute; top: 0; lef
進化し続けるWEBの表現。最近はアニメーションで見せるWEBも非常に多くなってきました。今回紹介するのは、軽量で表現力の高いHTML5 Canvasで表現するアニメーション背景「Ambient Canvas Backgrounds」です。 基本的にはjavascrptで制御しており、座標やカラーなどを簡単に調整できるようになっています。全部で5つのアニメーションがセットされていますがいくつか気になったものを紹介したいと思います。 詳しくは以下 Aurora 上下にブラーが聞いた光が揺らめくアニメーション Swirl 光の粒子が一定のゆらぎを持って自由に動き回ります。 Shift グラデーションの背景の色が変化しながらゆっくりと移ろいます。 手軽に現代的なアニメーション背景を導入したい方は是非どうぞ。ソースは以下のサイトからダウンロード可能です。 Ambient Canvas Backgro
Physics-Based Background Scroll Effects / Coder's Block 背景を物理エンジンベースでアニメーションさせる「Physics-Based Background Scroll Effects」 背景にそこまでやらなくても、と思うところ、やってしまうあたりが素敵 関連エントリ WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」
テキストを部分的にアニメーションしながら交換できる「jQuery Text Rotat... 次の記事 ≫:背景を物理エンジンベースでアニメーションさせる「Physics-Based Backgroun...
海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、
当ブログでは主にjQueryを使ったアニメーション動作について紹介していますが、jQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを実装できるライブラリも多々あります。 そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを組み込むことができるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」の3つを自分用メモとして紹介してみます。 anime.js 「anime.js」はCSSのTransformを扱う感覚でアニメーションを実装することができ、動作自体もとても軽快です。 ライブラリサイトがそのままデモ画面になっていますが、その動きを見ているだけでいろいろな発想が湧いてきそうです。 「anime.js」の対応ブラウザは以下になっています。 ・Chrome ・Safari ・Firefox ・In
Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデータ属性で管理できます。 <div data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease-out-bounce" ></div>楽でいいですね。ライセンスはMIT。 Sal.js
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css:root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;ch
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
Parallax background ブロック要素の背景にパララックスエフェクト「Parallax background」 スクロールやマウスの動きに反応して画像を動かすことが可能です 関連エントリ クールなパララックスエフェクトを作成できるjQueryプラグイン パララックス効果がクールなスライダー実装「PIGNOSE ParallaxSlider」
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください! ↑私が10年以上利用している会計ソフト! wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、演出としての印象がかわります。UI体験をデザインするうえでイージングは欠かせない要素です。 しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。 この記事の要約 「イーズイン」は徐々に加速、「イーズアウト」は徐々に減速。 「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。 CSSのease-outとease-inとease-in-outは緩急が弱いので、easeを使うか、こだわる場合はcubic-bezier()を使うのがよい。 イージングの性格 イージングは「最初はゆっくりで、徐々に早く変化させる」といった動きの「性
ボタンを押すと細かく崩れていく風エフェクト実装「Particle Effects for Bu... 次の記事 ≫:複数選択、検索が可能なselectボックス実装「multi.js」
ボタンを押すと細かく崩れていく風エフェクト実装「Particle Effects for Buttons」 2018年06月28日-
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
どうもですよ、はやちですよ:D 今回は、ページ上でタイピングをしているようなアニメーションが再現できるツール「t.js」をご紹介します。 導入方法 githubのほうでダウンロードしてから読み込んでください。 <script src="t.min.js"></script> 実装方法 基本的な設定方法ご紹介します:D 動かしたいhtmlのマークアップに対して <div id="js-target" class="box">Hello, World. This time I tried using t.js.</div> 指定をするだけで実装が完了になります! 簡単! $('#js-target').t(); 設定されたものは下のような動きになります。
最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。 アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
どうもですよ、はやちでございますよ。(:D 最大11.5kbしかないトゥイーンアニメーション、ドラッグアニメーションに優れたPopmotion.jsについてご紹介します。(☞ ՞ਊ ՞)☞ 導入方法 npmからインストールはこちらから。 npm install popmotion –save importはこちら! import { action } from 'popmotion'; // or stand-alone: import action from 'popmotion/action'; これで導入は完了になります。 実装の紹介 実装できるアニメーションをご紹介します。(☞ ՞ਊ ՞)☞ トゥイーンアニメーション const { easing, tween, styler } = window.popmotion; const divStyler = styler(docume
この記事は、記事「JavaScript製アニメーションライブラリの原理を理解しよう」の続編となります。前回の記事ではアニメーションの基本的な仕組みと、基礎部分の実装について解説しました。 今回はより実践的に活用できる機能として、動きに深みを出す「イージング」と、演出にエフェクトを加える「CSSフィルター」のアニメーションを実装します。CSSコーダーの方であれば、イージングはCSS Transitionで、CSSフィルターもボタンなどの演出で馴染みがあると思います。 イージングとは 前回アニメーションとは、時間経過とともに「ある値を0(0%)〜1(100%)の間で連続して変化をさせる」と解説しましたが、たとえば「最初はゆっくりで、徐々に早く変化させる」といった具合に時間経過に応じて変化の速度を調整するのが「イージング」です。 イージングには色々な種類がありますが、一般的には「easeIn~」
アニメーションは画面の遷移やボタンの演出など、あらゆるウェブコンテンツやアプリケーションで利用されています。CSSならanimationやtransition、JavaScriptであればCreateJSやTweenMaxなどのJavaScriptライブラリを利用して制作している人がおおいでしょう。 私はFlashの全盛期に「Tween24」というアニメーションライブラリを自作していたこともあり、アニメーションには人一倍の思い入れがあります。しかし、その仕組みを理解している方は意外にも少ないのではないでしょうか。 ライブラリやフレームワークといったテクノロジーは、仕組みや原理を理解しておくことで備わっている機能をより活用でき、また応用の幅も広がります。今回はアニメーションライブラリの基礎部分の実装を交えながら、アニメーションの仕組みを紹介します。 ※この記事はアニメーションの原理の説明に焦
Result css#CrossFade {/*コンテナ配置*/ background: #fff; display: flex; align-items: flex-end; height: 100vh; overflow: hidden; position: relative; } #CrossFade img {/*画像を重ね、透過とアニメーションでフェード効果*/ position: absolute; min-width: 100%; min-height: 100%; height: auto; background: #000; backface-visibility: hidden; opacity: 0; transform: scale(1.4); animation: CrossFade 24s infinite; } #CrossFade img:nth-child
Webサイトを楽しく見せることができるフレームアニメーション。SVG画像とCSS、JavaScriptで滑らかな動きを実現する方法、注意点を解説します。 デザイナーから、「今回のプロジェクトではフレームアニメーションを使いたいんだ。きれいに動くように実装してほしい」と言われたらどうしますか? フロントエンド開発者には、デスクトップとモバイルを問わず、すべてのブラウザーで滑らかに動き、ハイパフォーマンスでメンテナンスしやすいフレームアニメーションの実装が求められます。 このチュートリアルでは、HTML、CSS、JavaScriptを使ってアニメーションを作成する方法を紹介します。改善を繰り返しながら、プロジェクトにとって最善の結果を達成しましょう。 フレームアニメーションとは? フレームアニメーションについてのAdobeによる定義は以下のとおりです。 すべてのフレームでステージのコンテンツが
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. 「Googleからペナルティを受けたのではないか?」 サイト運営者なら、嫌な予感で背筋が凍った経験があるかもしれない。 Googleペナルティとは、ガイドラインに反しているとGoogleに判断されたサイトが、検索結果から除外される仕組みを指す言葉だ。 Googleペナルティを受けると、検索上位を獲得するどころか、圏外に飛ばされてしまう。SEO的には、最悪である。SEOに取り組むなら、Googleペナルティだけは回避せねばならない。 本記事では以下について解説する。
2ヶ月前にMacbook Proを購入した際、以前の設定移行ではなく、一から設定し直しました。そのおかげでストレージの無駄がなくなり、スッキリとした状態でPCワークできています。 今回Chrome拡張機能も見直しをおこない、2ヶ月が経過しました。現在利用しているChrome拡張機能について紹介します。 1Password – パスワード保管庫 パスワード管理ができる1Password。Chromeのパスワードマネージャーもいいのですが、ここ2ヶ月ほど便利に使えているのでこちらをメインに。 Touch IDで解除できるのはとてもラク。レビューは酷いですが、私は満足しています。 1Password – パスワード保管庫 Save image as Type WebP画像をJPG、PNG形式でダウンロードできるChrome拡張機能 Save image as Type。 右クリックからサクッとダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く