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){ // 要素が見えたときの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
