「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
Progressive Image.js - ぼかし画像を使う画像遅延読み込み MOONGIFT
写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。 今回紹介するProgressive Image.jsはFacebookやMediumにインスパイアされた画像表示ライブラリになります。 Progressive Image.jsの使い方 表示直後です。画像はボケています。 スクロールしたりすることで画像がはっきりと表示されます。 実際の動きはこんな感じです。アニメーションしながらなのでより印象的です。 スクロールして画像が表示される場所までくるとぼかしが解除されてはっきりと表示されます。最初から普通に表示されている場合に比べて画像に目が引かれやすくなるはずです。遅延読み込みの一種ですが、ダミーの画像を表示する訳では
CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
