Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
JavaScript製アニメーションライブラリの原理を理解しよう - ICS MEDIA
アニメーションは画面の遷移やボタンの演出など、あらゆるウェブコンテンツやアプリケーションで利用されています。CSSならanimationやtransition、JavaScriptであればCreateJSやTweenMaxなどのJavaScriptライブラリを利用して制作している人がおおいでしょう。 私はFlashの全盛期に「Tween24」というアニメーションライブラリを自作していたこともあり、アニメーションには人一倍の思い入れがあります。しかし、その仕組みを理解している方は意外にも少ないのではないでしょうか。 ライブラリやフレームワークといったテクノロジーは、仕組みや原理を理解しておくことで備わっている機能をより活用でき、また応用の幅も広がります。今回はアニメーションライブラリの基礎部分の実装を交えながら、アニメーションの仕組みを紹介します。 ※この記事はアニメーションの原理の説明に焦
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
Canvasアニメーションの要点 - Qiita
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
jQueryよりスムーズ。アニメーションライブラリTweenMaxの基礎とデモ｜ツーブロッカ
jQuery無しでアニメーション。TweenMaxを使ってサイトをコーディング今更ですが、アニメーションライブラリ「TweenMax」を触ってみました。 かなり高度でスムーズなアニメーションが実装できますが、理屈はかんたんで、 少し理解するだけで、Webサイトで使われるような効果は実装できます。 TweenMaxを使ったアニメーションのデモ TweenMaxを使うメリットjQuery には豊富な機能が揃っているぶん、無駄なコードが多かったり、処理に時間がかかるなど昨今では気にかけるクリエイターが多いようです。 かんたんにアコーディオンを実装できるslideToggle();ですが、実際、スマートフォンで見たときにアニメーションがもたついたりする場合があります。 TweenMaxを開発？しているGSAPのサイトにアニメーションの比較があるのでよければ参考にしてみてください。なんとなーくjQu
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
簡単アニメーション！Pixi.jsを触ってみる！（1）テキストを動かしてみる - Qiita
簡単アニメーション！Pixi.jsを触ってみる！ 〜（1）テキストを動かしてみる〜 突然ですが、 Pixi.js を触ってみることにしました。 （前フリ無しw） Pixi.jsとは? Pixi.jsは、Goodboy Digital社が配布している2D描画用のjavascriptライブラリです。 下記サイトで配布されています。 MITライセンスに基づくオープンソースソフトウエアとして開発が進められています。 このライブラリを使って作ったアニメーションは、WebGLを自動的に使ってくれるようです。 （非対応のデバイスではCanvasを使う）。 難しそうなWebGLを覚えなくて使えるのはうれしいです。 pixi.jsのexampleページでデモが紹介されていますので、いくつか見てみましょう。(スクリーンショット画像クリックで本家pixijs.comサイトのexampleページに飛びます) Ex
2D WebGL renderer Pixi.js v4【連載第一回】 - manmanrai’s diary
背景 いまどき大人気の2D WebGLを作れるjsライブラリーです。日本語のチュートリアルも少ないなので（2017年4月の現時点）、英語のチュートリアル（文末にリンク貼っておきます。）を読み、単語の意味調べながら、やりながらちょっとずつ勉強の記録書きます。 このチュートリアル55chatperありますが、頑張りたいと思います。 ※ 注意：全てチュートリアル通り書かないので、いっぱいオリジナルを挟みます。予めご了承くださいませ。 Start with pixi.js まず、pixi.jsを手に入れましょう。 でもこれは練習ですし、すぐ始めたいなので、CDNで読み込みタイプを選びます。 htmlを作ります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Start with pixi.js</titl
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
React + Redux- Animation - - DeNA Design
デザイン戦略室フロントエンドエンジニアの吉井です。 昨今の React 実装は、StatelessFunctionalComponent(SFC)を用いて Flux や Redux に状態管理を委譲するデザインパターンが定着していますね。アプリケーションの UX に欠かせないアニメーションですが「SPA とは相性が悪い」という噂を聞いたことがあります。従来の html アニメーションといえば jQuery.animate によるものが定番ですが、jQuery.animate は以下の理由で React と相性が悪いです。 jQuery を使用しないことがほとんどで、ほかライブラリに頼る必要がある。 DOM 参照(ref 参照)のために SFC を諦めないといけない。 Animation 実行中に component を unmount すると参照エラーになる。 Animation の状態を
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
【映像制作の入門者向け】映像ディレクションはじめの一歩 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ デザイナーの杉原ミシェル（@michellesghr）です。普段はLIGブログのアイキャッチ・バナー・背景ジャックなどを、日夜せっせとこしらえております。 自己紹介 「頭の中で流れる映像を表現できる技術が欲しい！」と考え、大学では映像を勉強していました。 大学卒業後はフィリピン・セブ島の映像制作会社で、撮影アシスタント・動画編集・アニメーション制作などと言った映像から、Webデザイン・ロゴデザイン・DTPデザインなどのグラフィックまで、さまざまなクリエイティブを経験しました。 ここ最近、Webデザインの中に動画が組み込まれているものが多く見らるようになりました。Webデザインをディレクションしていく中で、こうした映像領域のディレクションも必要になった方もいるのではないでしょうか。そこで、「映像ディレクションのはじめの一歩」として、映像制作の基礎の一部をご紹介します。 映像の
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
［CEDEC 2016］分かりやすいゲームのUIを作るには？ アニメーションを用いたプレイヤー誘導のテクニック
ゲームとプレイヤーをつなぐものとして重要なユーザーインタフェース（以下，UI）。そのUIに込められているゲーム制作者の意図を解説する「エフェクト/UIモーションの役割〜背後にある意図とその実現」と題する講演が，2016年8月24日のCEDEC 2016で行われた。 講演を担当したのは，オインクゲームズでUIデザインを担当している新藤 愛大氏だ。カードゲームの開発で知られるオインクゲームズだが，スマートフォン向けゲームでも質の高いタイトルをリリースしており，同社の知見がどのようなものかは興味をそそられる。 実際に同社のデザイナーが，どのような意図を込めてUIを作り上げていったのか，その過程を見ていくことにしよう。 アナログのカードゲームをメインとしているオインクゲームズだが，コンピュータゲームもこれまで4本リリースしており，そのうち2本が，Appleが選定する2014年と2015年の「今年の
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
CSS3のanimation-timing-function: steps(n) が便利 - Qiita
DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
これは便利！Animate.cssをSassで使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css → _animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http:///posts/2017/10/design/vue_animation/
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
