トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
velocity.jsの使い方 記述方法とオプション機能 — un-Tech
どうも、茂吉です。 突然ですが、あなたのアニメーション、動きがカクついていませんか？ 「カクつきは感じているが仕方ない。」と思っている方、 滑らかなアニメーションにすることができます。 「いいえ。カクついてなどいません。」と思った方、 実はカクついていることに気づいていないだけかもしれません。 velocity.jsは、jQueryの.animate()よりも実行速度が早く、動きが軽快で多機能な拡張ライブラリです。 実際にjQueryとvelocity.jsを比べてどれだけアニメーションが滑らなのか、 まずはデモをご覧下さい。 デモページはこちら 2つを比較してみてどうでしょうか？ 普段使っているjQueryはvelocity.jsと比べて動きにカクつきがあることがわかります。 本記事ではvelocity.jsを使ったことがない、使い方がわからない方を対象に、 velocity.jsの基本
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
オブジェクトが動く速度と加速度と微分の考え方
物理法則にしたがったオブジェクトのアニメーションをスクリプティングするとき、数学の「微分」の考え方で捉えられると応用の幅が広がります。微分と聞くと難しそうに響きます。けれど、大雑把にいってしまえば、オブジェクトの動きについて変化を見るということです。アニメーションがつぎのフレームでどう変わるかを考える、といってもよいでしょう。 01 等速直線運動 決まった速さで同じ向きに動き続ける「等速直線運動」なら、つぎのフレームに移るたびにオブジェクトの位置(xy座標)に定数を足します。この定数(xy平面で捉えるならベクトル)が速度です。つぎのフレームにおけるオブジェクトの位置は、今の位置に速度を加えて求めます。 位置 += 速度 時間(t)と位置(x)をそれぞれ横軸と縦軸にした等速直線運動のグラフは、下図001のように一次関数(x = vt + x0)で表されます(「直線の式(方程式)」参照)。一次
【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | Digital experience University
2013年 05月 09日 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 Yoshiaki Sato はじめまして、フロントエンド担当のヨシアキです。 この記事では、JavaScriptで作るFlashのようなタイムラインアニメーションについて、編集や管理の手間が省けるような作り方を説明していきます。 初心者向けに解説していますので、ぜひこの記事を参考にしてご自分のタイムラインアニメーションを作ってみて下さい！ 目次 はじめに - 増え続けるJavaScript製アニメーション 下準備 - HTMLとCSS JavaScriptアニメーションの作成！ まとめ このアニメーションのサンプルを見る はじめに - 増え続けるJavaScript製アニメーション iOSなどで表示ができないFlashの代替手段としてJavaScriptで
odometer
Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples. Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers. The library and largest theme is less than 3kb when minified and compressed. All of the themes can be resized by setting the font-size of the
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
Transitions for Off-Canvas Navigations | Codrops
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
jQueryで順番にアニメーションする方法を考える | スターフィールド株式会社
jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、 何かの動作が終わった後、順番に実行するということも必要になってきます。 特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、 そういった機会も増えてきています。 そこで、jQueryを使って順番にアニメーションする方法について、２つほど取り上げてやってみました。 ↓デモはこちらから DEMO 今回は、 車が走ってくる 車が木にぶつかって木が揺れる 鳥が逃げ出す という順番で実行するアニメーションを考えます。 まず車が走ってきた後に、木にぶつかって木が揺れるところまで。 jQueryでは、animate()で、コールバック関数を指定することで、 アニメーションが終わった後に、別の動作をさせることができるので、 それを利用しようとしましたが、 そうした場合、 今回のように特殊なイー
CSS3で疑似3D表現を実現するSprite3D.jsを触ってみた、その2 | KnockKnock
以前の記事で紹介しましたが、JavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを再びさわりましたので投稿します。 視差を利用して、立体的な表現を手に入れるパララックスも流行りましたが、もっと立体的な表現ができるSprite3Dによるトランジションは意外と効果的ではないかと思い作成しました。一見普通のコンテンツですが、リンクをクリックしたときの驚きは、パララックスをはじめてさわった時に勝るとも劣らないんではないかと思います。しかもパララックスだとFixedがまともに使えないスマフォでは再現がほとんど出来ないと思いますが、これはスマフォで問題なく表示可能です。実装も非常に簡単なので是非一度さわってみてください。 サンプル Sprite3Dとはあまり関係ないですが、実装にはTypeScriptを使用しました。TypeScriptはクラスベースでJavaS
JavaScriptのシンプルなトゥイーンエンジン | KnockKnock
JS系のTweenライブラリだと、オブジェクトのCSSプロパティにトゥイーンをかける事を基本に設計されている場合が多いかとおもいます。もちろんTweenかけるものって基本的に表示要素なので、CSSにトゥイーンをかけることは間違ってはいないのですが、以前の記事にてSprite3Dを使用しましたが、Sprite3Dを使ってトゥイーンをかけたい場合は、CSSプロパティではなく、メソッドを実行する必要があります。もちろんメソッドの中ではCSSプロパティを操作しているわけですが。 そういった目的に絞って、シンプルなトゥイーンエンジンが必要になり、作りましたので投稿します。 概要は、オブジェクトのプロパティの値を現在の値から、指定した値まで、指定秒で、指定イージング関数を通して変化を与えつづけます。 ソース デモページ 基本的な使い方ですが、まずはじめに第一引数にオブジェクトを渡してTween関数を実
Zoomooz.js
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
Direction-aware 3D hover effect (Concept)
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
自社サイトリニューアルでのアニメーション制作について少しだけ。 | ココノヱブログ
http://dan-silver.github.io/ElementTransitions.js/