スクロール連動アニメーションの実装例 – TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。 initializeObserveAnimation initializeObserveAnimation. GitHub Gist: instantly share code, notes, and snippets. gist.github.com
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
Three.jsを使って2Dのモーフィングアニメーションを実装する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回紹介する2Dのモーフィングアニメーションは実務でも実装する機会が多く、先日リリースした下記のフロンティア株式会社様のコーポレートサイトでも似たような実装を行いました。それぞれのセクションやページで2Dのパーティクルが様々な形に変化していきます。こういった動きは躍動感が出ますよね。 それでは早速実装していきます。 デモ 用意したデモはこちら。時間経過でパーティクルが丸、四角、星など様々な形に変わっていきます。今回の実装のポイントはイラストレーターで作成したパーティクルから座標を抜き出しているところです。そちらを中心に解説していきたいと思います！ See the Pen Threejs Points 2D Mofing by Hisami Kurita (@hisamikurita) on CodePen. Step1 イラストレーターでパーティクルの座標を指定する まず、下準備としてどん
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
barba.js v2で非同期遷移し遷移時のアニメーションをつけてGTMでGA設定までやってくよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドに転身してもフロントエンドのお仕事も引き続きするハルです。今回はフロントエンドの記事を書きます。 Webサイトで非同期遷移をし、切り替えアニメーションをつけたいときに使えるライブラリのbarba.jsのv2を紹介したいと思います。 ※非同期遷移については、こういう動きをするものだよーというみやさんの記事がありますのでご参照ください（今回紹介する技術が使われているものではありません）。 barba.js v2 https://barba.js.org/ 以前、v1も使ったことがあったんですが v2を触ってみて、記述方法と変わっていたので導入方法の紹介をします。また、アニメーションの設定時にだいたいこんな感じにすればいいというのがわかったので、そこもまとめていきたいと思います。 barba.js v2 の注意点 対象ブラウザに制限があり対応する場合、ポリフィルを使用する必要がありま
jQuery Timelinr - 年表と画像を組み合わせたスライドショー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上では多彩な表現が可能になっていますが、それ故に自分のこだわった表現をどう実現したら良いか悩んでしまうことがあります。そこでぴったりの表現ができるオープンソース・ソフトウェアがないか探すこともあるでしょう。 今回紹介するjQuery Timelinrもそんなソフトウェアの一つです。まさに自分が探していたものだ、と言う方はいらっしゃるのではないでしょうか。 jQuery Timelinrの使い方 jQuery Timelinrは年表と画像、そして説明を組み合わせたコンテンツを表現できます。こちらは横向き。 矢印やキーボードで次の年に移動できます。 実際に動かすとこんな感じです。画像が大きくなっていくのが良い感じです。 横ではなく縦向きもできます。 jQuery Timelinr
jQueryでCSSアニメーションを実行させる方法｜BLACKFLAG
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
jQuery googleslides
Usage: $("#demo1").googleslides({ userid:'115528839112598673902', albumid:'5710317752556741025' }); Usage: $("#demo2").googleslides( { userid:'115528839112598673902', albumid:'5710326335933432353', time:2000, imgmax:260 }); Usage: $("#demo3").googleslides({ userid:'115528839112598673902', albumid:'5710326910876169537', imgmax:100, fadespeed:500, time:8000, caption:false }); Setup Add a reference t
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
CSS3のtransformを素敵に扱えるjQueryプラグインを作った。 | Ginpen.com
ダウンロード リポジトリ … https://github.com/ginpei/jQuery.transform JSファイル … jquery.transform.js なにこれ？ CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。 transform ？ transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は のような指定になります。 詳しくはこのあたりとか。 transform－CSS3リファレンス jQuery + transformの問題点 jQueryでスタイルを操作する場合は .css()を利用します。 しかし、これはプロパティの名前と値
SlideShare等にあるスライドを動画とシンクロさせるJavaScriptライブラリ・Presentz
自分では多分使わないと思います けど、技術が凄いなーと感じたの でご紹介。よくあるスライドを、 YoutubeやVimeoなどの動画にシン クロさせる、というライブラリ だそうです。 自分で動作テストしたわけじゃないので紹介だけ。スライドと、そのスライドを紹介する動画をシンクロさせ、動画を再生すると同時にスライドを自動で進行させる、というライブラリ。うまく説明できませんのでデモを見たほうが早いです。 Webサービスになっていますが、ソースも公開されています。node.jsを使ってるみたいですね。 動画を再生すると、その動画中で紹介してる箇所をスライドも表示、動画が進むとスライドも次ページに移動してくれる、というもの。 将来、学校の授業もこんな感じになるんだろうか・・以下で動作デモを確認出来ます。ライブラリのライセンスはGPLとの事。使い方は確認してないので割愛します。 Presentz
Jquery.a3d.js | JavaScriptからCSS3キーフレームアニメーションを自在に操れる。３Dにも対応
複雑なアニメーションを簡単＆シンプルに実装できます CSS3キーフレームアニメーションをJavaScriptから動的に使用するためのプラグインです。また、CSS3アニメーションを強力に機能拡張することができます。 機能 JavaScriptのプログラムから、CSS3のキーフレームアニメーションを動的に生成できます キーフレームにおける任意のタイミングでJavaScriptのコードを発火することができます。 キーフレーム情報、エフェクト情報、アニメーション情報を分離して管理することで、複雑なアニメーション制御をシンプルに記述できます。 複数のキーフレームアニメーションを連鎖させる事ができます 絶対位置指定、相対位置指定をサポートします。（エレメントの現在地点から前へ１０PXといった指定が可能） 対応ブラウザ Firefox, Chrome, Safari, Opera ,IE10 使い方 基
[JS]シンプルなものから高性能なものまで簡単に通知パネルを実装できるスクリプト -Backbone.Notifier
通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。 デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグインを紹介します。 Backbone.Notifier -GitHub [ad#ad-2] Backbone.Notifierの特徴 Backbone.Notifierのデモ Backbone.Notifierの使い方 Backbone.Notifierの特徴 ページの上部や中央に通知パネルをアニメーションで表示します。 スタイルは通知、エラー、警告、成功など、さまざまなものが揃っています。 スタイルはCSSベースでカスタマイズできます。 通知パネルの表示・非表示のタイミングを調整できます。 通知パネルを連携させることもできます。 Backbone
ノンプログラミングで流行りの「スクロールするサイト」が作れる！jQueryプラグインを作ってみました
ノンプログラミングで、スクロールするサイトを作れちゃう！ そんなすばらしいjQueryのプラグイン、jQuery Scrollable Linkを作ってみました。 プラグイン自体は、jQueryが書ける人ならそれほど難しいものではないのですが、jQueryを全く知らない方や、初心者のWebデザイナーさんに使って頂けるとうれしいです！。 デモ こんな感じのサイトがノンプログラミングで作れます。 デモを見る 使い方は簡単！ このプラグインは、ページ内リンクに、scrollableというクラスを設定することで、自動でスクロールアニメーションに変換します。 1) まず、以下の2行をheadタグのの中に入れます。 jquery.scrollablelink.js は、このページからダウンロードして配置してください。 <script src="http://ajax.googleapis.com/aj
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
flickr関連｜Webサービス連動｜Web関連特集｜PHP & JavaScript Room
Flickr APIについて Open Source Flickr Photo Gallery Using jQuery〔jQueryを使用してFlickrの写真セットをギャラリー表示〕 jQuery Flickr〔jQueryを使用してFlickrのデータを取得〕 写真や画像にウォーターマークを入れるツール〔PicMarkr〕 Flickr badge作成ツール Flickrスライドショー埋込タグ生成ツール〔SlideFlickr.com／flickrSliDR〕 splashr beta〔いろいろな形式でスライドショー表示するオンラインツール〕 Slideco〔横長の写真スライドショーウィジェット作成オンラインツール〕 Flickrの写真をギャラリー形式で見れるオンラインビュアーいろいろ Flickr APIについて 2009/7/2 Flickr APIを利用するには、Flickrの
WordPressのギャラリー機能を、少しのjQueryコードでLightbox風にポップアップ出来るようにする - かちびと.net
こういうやつ。記事の投稿で [gallery] って書くだけでその記事内にアップロードした画像がグリッドで並べられます。ただ、このままだと別のページに持っていかれて、ユーザーとしては見る気になりません。 Sample この記事で実装しました。以下、サンプルです。 エフェクトもない手抜きなものですがｗまぁただのチュートリアル用なのでご了承下さい。 以下、手順です。 吐き出されるHTMLを見てみる ショートコードを使うと以下のようなコードが吐き出されます。 <style type='text/css'> #gallery-1 { margin: auto; } #gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-1 img { border: 2
エレメントに多彩な動きのエフェクトを当てられる「Morf.js」:phpspot開発日誌
Morf.js ? Custom Easing Functions for CSS3 Transition Joe Lambert エレメントに多彩な動きのエフェクトを当てられる「Morf.js」。 CSS3のTransitionを使ったアニメーションや、JavaScriptによるカスタムアニメーション等、様々なアニメーション効果を作れるライブラリです。 動きをもたせることでUIを格段に分かりやすくすることが出来たりすると思いますがそうした際に使えそうです。 アニメーションの種類も豊富で求める動きもみつかりやすいはず。 デモページ 次のような分かりやすいコードでの実現が可能です。 関連エントリ 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック CSS3なキーフレームアニメーションのデモ 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://pagescroller.com/
Google+風に、Picasaの画像を高さを揃えたイメージギャラリーを実装するjQueryプラグイン・jquery-photowal - かちびと.net
