jsでパラパラアニメ。
よく見かけるものはbackgroundpositionを制御するものが多くて、cssでの背景画像の指定が面倒なことがあったのでimgタグでも使えるようにしてみました。
背景画像にする場合は、divタグを入れ子にすれば使えます。
デモ:
ソース:
anime.js
anime.min.js(圧縮版)
anime.coffee
jsでパラパラアニメ。
よく見かけるものはbackgroundpositionを制御するものが多くて、cssでの背景画像の指定が面倒なことがあったのでimgタグでも使えるようにしてみました。
背景画像にする場合は、divタグを入れ子にすれば使えます。
anime.js
anime.min.js(圧縮版)
anime.coffee
メモ。あってるかどうかは未検証。
2013/7/12追記
javascript:void(0)がSSL環境のIEでセキュリティエラーになるため修正
/** * on load * */ function onLoad() { alert("onload"); } if(/*@cc_on!@*/false) { //IE var s = document.createElement("script") || {}; s.src = "://0"; s.type = "text/javascript"; s.setAttribute("defer", "defer"); s.onreadystatechange = function () { if(this.readyState == "loaded") { onLoad(); } }; document.body.appendChild(s); } else { window.addEventListener("load", onLoad); } |
tweenerのイージング(Equations)をjsに移植してみた。
コピーライトとかはtweenerのものをコピペしています。
タイマークラス。
とりあえずstart、stopのみ。
setTimeoutとの違いは、稼働中のイベントも設定できるとこ。(ただし1つだけ)
windowが閉じたタイミングを通知する処理。
setIntervalで監視してるだけです。
微妙な感じなので後で改修する予定。
とりあえずメモ。
時間ができたらデモを作る。
——————————–
2013/4/24 追記
改良版を作成しました。
——————————–
アドレスバーの非表示を、要素の高さが足りないときでもできるように試してみました。
xperia arcとiPhoneで確認。
スクロール位置を監視して、スクロール開始、停止、スクロール中のイベントを実行します。
使い道はスクロール終了のイベントを取るくらい?
jQuery非依存。対象のDOMはとりあえずwindowのみ。
※2017/10/23 追記
codepenのプレビューに変更しました。
See the Pen get background-image url by phantom4 (@phantom4) on CodePen.
ブラウザによって画像パスだけの場合と、url(~)の場合がある模様。