GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利
スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「ScrollReveal」を紹介します。 シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてありますが…） animate.cssのようなCSSアニメーショ
要素がスクロール画面に現れたらアニメーションさせるJS | デザインやWEBに関する情報を発信する【まるログ】
ページをスクロールしていき任意の要素が見えたときに、その要素をアニメーションさせたいということがあると思います。wow.jsと同じようなことがしたいと言えばわかりやすいでしょうか。 wow.jsはとても簡単に様々な動きが付けられますが、Animation.cssと一緒に使用する都合上、実現が難しい動きもあったりします。今回は、そういった状況でも対応できる、動きを自由に付けられるようなJavaScriptを自作してみました。 $(window).scroll(function(){ var top = $("ターゲットとなる要素").offset().top; // ターゲットの位置取得 var position = top - $(window).height(); // 発火させたい位置 if($(window).scrollTop() > position){ // 要素が見えたときの
【おさらい】WEBサイトでアニメーションをつけるには？
最近のWEBサイトではアニメーションなどで、なにかしらの動きをつけるのが当たり前になってきました。普段、私も制作をして「ここにちょっと動きをつけたいんだけど…」「面白い動かし方ないですかね？」と相談を受けることが増えました。 ひと昔前までは「動き」というと、Flashで作るのが定番でしたが、スマートフォンの普及や新しいブラウザの広がりにより、今はFlash以外で対応するのが一般的になりつつあります。 そこで今回は、自分自身の備忘録も兼ねて、アニメーションをつける方法をまとめてご紹介したいと思います。ひとくちに「動き」といっても、実装方法もさまざまありますし、見せ方も豊富。今後のWEB制作のちょっとしたヒントになれば幸いです。 CSSで動かす CSS3では要素にアニメーションを設定し、色々な動きをつけることができます。よく見かけるフェードイン、フェードアウトといったおなじみの動きだけでなく、
Webアニメーションの種類と実装方法 | BACKYARD
＼月刊！／ソーシャルトレンド #26 キャッチーすぎるタイトルで話題！ 「チンアナゴ顔見せ祭り」 ほか【2020年6月】 田中 雄一郎 デジタルで遊ぼう！ #3 Webアニメーションの種類と実装方法 2017/02/03西田 慎吾 クロスコミュニケーションUXM本部 クリエイティブ TIPS デザイン html5 Flash JavaScript UI エンジニア UX（ユーザーエクスペリエンス）を高める手法のごく一部ですが、Webサイトにインタラクション性を持たせたり、アニメーション演出を加えたり、動的なWebサイトを作るには、HTML以外の技術を使う必要があります。その技術には、はやり廃りがあり、また用途に応じても、選択されるものが変わってきます。今回は、Webアニメーションを実現するための仕組み、を解説したいと思います。
AnimateCCでウェブサイトを作ろう – 宇都宮ウエブ制作所
はじめに この記事はFLASHer Advent Calendar 2016の７日目の記事です。HTML + CSSを使用してウェブサイト制作を行う人を対象にして書いています。AnimateCC（旧Flash）の初歩的な知識があるほうが望ましいですが、もしFlashについて全く触ったことがなくても大丈夫です。 Flashの初歩的な操作方法などについての説明はこの記事内には書かれてありません。ですがFlashを知らない人でも「やってみたい」と思う人が増えることを願って書いた記事です。 今の人なら信じられないかもしれませんが、１０年もたたない前までは「ウェブサイトに動きは不要！」って本気で言ってる人が多かったんです。冗談だと思うでしょうが、本当です。“ユーザーに不便を強いるような動き”が必要ないことは当然のこととして、今日び“ユーザー体験”という使い古されて陳腐になってしまった言葉を使うまでも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
