sirius_animation
TOP

シリウスサイトにアニメーションイメージを加えてリッチに仕上げよう

海外サイトなど拝見すると記事テキストや画像などが横滑りで枠内突入...もしくはスクロールに沿って
ふわっと浮きがったり、下がったりといろんなアニメーションスタイルを取り入れているのを目にします。

国内では、有料系ワールドプレスなど購買意欲をそそるためか?アニメーションてんこ盛りの設計ですね

とは言ってもアニメーションとは何か?..色々と該当する経緯はございますが、ここでは、サイトタイトルから
記事内テキスト、もしくは画像に動的作動を加える...という趣旨で進めますね...

お断りです
当サイトは、シリウステンプレート専用で解説しておりますので、他プログラムではどう動くか?
...WP?...HB?....全然知りません...です。


まず、サイトが開いたと同時に作動,...ヘッダータイトル、イメージテキストの二つが表示されますね
次いでスクロールすると再度横から滑り込む3段構造...は、スクロールポイント作動...

ここまでやる必要もないのですが、あくまでDEMOサイトなので...


ここは、スクロールポイント作動例です







上から下へ....下から上にとか指示法はございます

または以下、次項目横から突っ込み?

一人..

  

記事の横滑り

交互にスライド挿入ですが、有料WPでお見かけしますけどシリウスでも実装可能なんですね

そんなサイトないって?...お遊びにいいんじゃないでしょうか?

左スライド.....横滑りとは...
記事テキスト...いろはにほへと


あれこれ

右スライド.....横滑りとは..

右から挿入


テキスト以外、画像でも作動は可能

上例を記事途中に取り付ける際...ある程度スクロールしてからとするなら..記事2.とか3を途中に入れ込む事で
...記事途中...最初パソコンを開いた時ではない...ある程度スクロールしてからでも作動させることができます...

前進する

各種仕様

各種の作動例ですが、すべてCSSで動きを指示しHTMLで場所固めすれば、jQuery等使わずとも
シリウスで作動します。

でも、それ以外ってございますね

人の好みは千差万別ですので、指示コードはいくつか例記載しますので、以降のカスタマイズは
自己裁量でお勧めください
で、申し訳ございません..一度に掲載しきれないもので少しずつ追加してまいります


以下で導入ソースをご確認ください
サイトを開いた時だけ反応する...アニメタイトル...は、こちらです

その他はあと少々...
kgk