2枚の画像の切り替え 2

他のページでも紹介してきたように、いろいろな切り替え方がありますね。

このページではスライドのように切り替えてみましょう。 ファイルサイズ節約のため、タテ移動としますが、ヨコの場合でも同じようにすればいいでしょう。

4,011

step 01 切り替える画像を挟んだ、3枚分の画像を一時的に作ります。

この後はスクロール・アニメや背景移動などと同じ方法です。

step 02 JTrim では「イメージ」 → 「座標指定切り取り」で次のコマの位置を直接決めて切り取ることができます。

pictbear SE では「イメージ」 → 「シフト」をクリックすると、ダイアログが出るのですが、JTrim とはちょっと違います。 このように「マイナス」を指定しなければ下への移動ができません。 そしてその後の表示は

右のように「ズレ」ていく訳です。
そして「イメージ」 → 「トリミング」で切り取ることになるのです。

step 03 以降はこの繰り返しになります。

step 04 斯くして、最初のバナー2枚とで10枚ができました。 31px ですから途中で1px は調整します。

GIAM に読み込み

step 05 GIAM への読み込ませ方は、このように「消去手段」を「背景色でつぶす」にしなければ透過の効果が出ません。

しかし、やはり、「『全体』が変わるものは重い」の鉄則通り、23,282 バイトもあります。

step 06 上の例では「6px」でズラしたのですが、もう少し粗く「8px」にしても「20,293」バイトでした。

15,654

思い切って「10px」にしてみましたが、何とか上に移動しているという感じはありますね。 やっとこさの 15,654 バイト。

メニュー提供 : DHTML Menu By Milonic JavaScript