google site でも美しいjquery が使えることをお勉強した私は…。久々にjquery の本を開け、単純なフェイド・インアニメでしかもそのフェイドインが鏡画像になっている…という非常にシンプルなものを作ろうと思ったのでございます…。
それが結構難しかったのでございました。
fade in のスライドってプラグインがありますが、なんかreflection.jsとぶつかり、まったく反映されないわけです。
で、これはもうフェイドインアニメを自分で書いてリフレクションプラグインを！と思いましたが、
ちゃんと直書きしている人がいました。
タイマー関数とか使えるように早くなってみたい…（たぶん無理）
よし、これでreflectだ～と思うと、なんか、reflect を class設定したらいいだけ…という奴は、
アニメをかけたらIEで黒くなるんです！
いいや、面倒だコメントアウトでIEは表示しないでいいやと思って google site に実装すると、これがコメントアウトきかないのよ。そうかぁ。
で、探しましたら こちらのjquery reflectionならキレイにIEでも表示されました。
ただ、optionの設定ができません。$("#photo1").reflect(options); というような書いてあるようなjqueryを追加でフェイドインアニメの後に書き込むとアニメが動かない。
ただ、落としてきたreflect.jsをよく読むとですね。 jsの中に HeightとOpacity の設定が調整できましたので、無事調整して微妙＝な影をつけることに成功しました。 これで写真だけ入れ替えて好きなようにできます。
こちらに整理して入れております。 要するにこのxmlを絶対アドレスでgadgetとして読み込むことで
google site にjquery を読み込むことになるのです。
これはなかなかいいですね。ムチャ時間かかったけど。
本当にjquery 楽しいぞ。 でも、これ絶対に忘れそうなのでとりあえず記録しときます。
それにしても、簡単そうなことでここまでつまずくと…
本当に、じっくりお勉強してちょこまか自分で書いてみたいと思いますなぁ～
0 コメント :
コメントを投稿
コメントありがとうございます。