TweenMaxを使ってみる | なんかいろいろデザインする人
アニメーション系のプラグインとしては大御所のTweenMax.js。 ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。 いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。 TweenMaxとは 公式サイトはこちら https://greensock.com/tweenmax 世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ！」ってサイトでも使ってたりする。このプラグインすげえええ！ 実際問題、アニメーションと聞くとhtmlとcssと簡単なjs（スムーススクロールとか）しかしたことない人にとっては小難しいと感じるかもしれない。 特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない！ってなる。少なくとも自分は
アニメーションに便利な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が高機能版だと考えてよいかと思います。 単純に要素
スクロールに応じて文字や背景画像が動かせる「ScrollMagic / TweenMax」の備忘録
ランディングページやプロモーションサイトでよく使われている動きのあるページを制作した時の事を忘れないように備忘録です。よく見かけるスクロールに応じて文字や背景画像が動くというやつ。 appleのiMac Proの紹介ページのようなイメージです。 https://www.apple.com/jp/imac-pro/ ここまで長いページを組むと頭痛くなりそうですが、よく見ると中盤以降は同じ動き。ただ最初のiMacがこちらを向く3Dは良く分かりませんw。今回はここまでではなく汎用性のある文字が浮き出てくる感じやコンテンツブロックが次々に出てくる感じとメニューバーが上部で追従するものを書いておきます。 スクリプトは素人なので、後々分かりやすいようにリスト化せず書きます。 今回利用するのは、「ScrollMagic」と「TweenMax」です。とても使いやすくjs苦手なデザイナーでも簡単にフロントエ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
