jQueryでフレームアニメーションを作る（ParaPara.js） - entacl Lab.
WEBサイトでアニメーション 最近はcssアニメーションや、jQueryの.animate()を効果的に使ったサイトが増えてきました。しかし、もうちょっと踏み込んだ表現はFlashに追いつけていないようにも思います。 今回は、画像を一枚ずつ差し替えてアニメーションさせるParaPara.jsを作ってみました。メモリには優しくないですが、これで大抵のアニメーション表現が可能です。 ParaPara.jsはimg要素を素早く差し替えることでアニメーションさせるクラスです（要jQuery1.7以上）。 背景画像をcssのbackground-positionで切り替えるものは見つかったのですが、img要素を切り替えるものは軽くggったところ、見つからなかったので作ってみました。 サンプルを見るにはクリック! スラップスティックなLab.ロゴが見えましたか？ 使い方 jqueryとparapara
パラパラアニメを表示させるjQuery｜DAD UNION – エンジニア同盟
学生時代に一度は誰しもノートや教科書の切れ端でやったことはあるであろうパラパラアニメ、それを、社会人にもなってやることになりました。 JavaScriptのjQueryを使ってパラパラアニメを表示させる方法をご紹介します、 実現方法 教科書では無く、今回は一枚の縦長の画像を使用します。 表示範囲を決めて等間隔で移動させてパラパラアニメの様に表示させます。 パラパラアニメを表示させるJavaScriptの記述例 ※jquery.min.js（1.4系）ファイルを読み込みます。パラパラアニメを表示させるid、、表示させたいエリアの幅（px）、高さ（px）、フレームレート（フレームス パー セコンド）、切替デフォルト画像（parapara_anime.jpg）、切替りのフレーム最大枚数等を設定し、setInterval()を使って処理を繰り返します。 <script type="text/jav
ときどきWEB | 『jQueryでコマ撮りパラパラアニメ作ってやんよ!!!』
jQueryプラグインって便利でスゴいのたくさんありますが、「この動きをこうやってこうしてあーだこーだ・・・」ってしたい場合って完成されたスクリプトを解析・分解するのはかなり至難の業だったり・・・実は自分で作った方が早い場合も・・・ 今回はjsで作られたパラパラアニメを特定のスクロール位置で停止する物を自作 グローバル変数の設定 どうせ自作するならばjavascriptがわからない人にも扱える代物を作りたいのでパラメータを変数で持って数値さえイジれば自分のスキにカスタマイズできる仕様にしていきたいので ①使用する画像の横幅と縦幅の設定 ②画像のフレーム値（パラパラのスピード） ③パラパラ画像を設置するクラスの指定 ④パラパラ画像のディレクトリ及び拡張子の指定 ⑤パラパラ画像の使用枚数 上記のパラメーターを設定できるフィールドをつくる var width = 134; //①表示させたいエリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
