css3

: CSS3だけでスライド風やアニメーション応用できそうなの作ってみた。

CSS3だけでスライド風アニメーション

複数の画像を親divの絶対位置で子要素を配置して、その子要素にz-indexで優先順位をつけてみよう！という感じ。

z-indexで優先順位をつけ、画像はcss3のアニメーションで①～③まで順番に出していく

アニメーションに関してのみ参考サイトはanimate.css

配置の仕方に関しては、自分で考えたのでバグがでたらあしからず･･･。

IE9とスマホでもandoroidの2.3以下でも同じ挙動に！！とかなければ大丈夫なはず。

1軽いCSS3アニメーション

更新ボタンを押すと最初からスタートします。

画像大きくても軽っ！！！

jQueryのスライダーを読み込む時の、

う、ううん今表示された!!今!!今

がスマホでないので一瞬で読み込みます。スマホだと先にスライダーのjQuery読み込むと一瞬、おおゥってなります。
(jQueryのスライダーflexslider表示の際のios7)

自分のサイトで使っているのですがios7で読み込むと画像が出てくるまでに、おお？って少し待ちます。flexslider使った自分のサイト

枚数を増やすのも簡単。

これを基礎に移動させたりコマアニメーションも出来る。

繰り返し設定css3で追加できる。

jQueryのスライダーほど大げさじゃなくていいの～とかいう時向け。

上手く使えば見栄えも良いです。

andoroidはPHPかなんかで2.3以下は表示されない、IE9以下(IE10以上対応なので)は表示されませんと条件付コメントで入れる必要がありますが･･･それにしても軽い。

アニメーションに関してはanimate.cssを使えば、ボヨ～～ンとか上から降りてきたりとか簡単なアニメーションが沢山作れちゃいます。
※横から大きくフェードインするアニメ等スマホ向けじゃないものもあるので注意!!

2ブラウザ、スマホ対応

/*IE10未満の記述*/

/*ここからPHPの記述*/
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if((strpos($user_agent,'Android')==true)) {
    echo 'andoroid2.3以下は正しく表示されません';
}

なんでjQueryでいいじゃん！！

と思ったのですが･･･ios7になった時、flexsliderが読み込む時に一瞬かたまるという現象がおきて困り果てたので。

最初にページに来た時固まり、再読み込みすると直る･･･という感じ。

結局自分で手入れできないのが一番困るので備忘録メモ。

cssアニメーション楽しすぎるのでどんどん作ってみたい!!

3以下上記で使ったアニメーション部分

#animate{
     margin: 0 auto;
     margin-top: 20px;
     position: relative;
}
/*今回リストで並べたのでその中の画像にposition: absolute;がかかるようにしています。お好みで*/
#animate ul li img{
    width:200px;
    position: absolute; 
}
/*アニーメーションにする画像をどのタイミングで出すか*/
/*1枚目*/
.animate01 {
  -webkit-animation-duration: 2s;/*アニーメーションは1秒で終わり*/
  animation-duration: 2s;
 -webkit-animation-delay:1s;/*1秒遅れで出てくる*/
  animation-delay:1s;
  -webkit-animation-fill-mode: both;/*アニメーション実行前・実行後の状態*/
  animation-fill-mode: both;
  z-index: 1;
}
/*アニーメーションにする画像をどのタイミングで出すか*/
/*2枚目*/
.animate02 {
  -webkit-animation-duration: 2s;/*アニーメーションは1秒で終わり*/
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;/*アニメーション実行前・実行後の状態*/
  animation-fill-mode: both;
  -webkit-animation-delay:3s;/*3秒遅れで出てくる*/
  animation-delay:3s;
  -webkit-transition-timing-function:ease-out;
  transition-timing-function:ease-out;
  z-index: 2;
}
/*アニーメーションにする画像をどのタイミングで出すか*/
/*3枚目*/
.animate03 {
  -webkit-animation-duration: 2s;/*アニーメーションは1秒で終わり*/
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;/*アニメーション実行前・実行後の状態*/
  animation-fill-mode: both;
  -webkit-animation-delay:5s;/*4秒遅れで出てくる*/
  -webkit-transition-timing-function:ease-out;
  transition-timing-function:ease-out;
  animation-delay:5s;
  z-index: 3;
}

/*どんな動きをつけるかanimate.cssより引用*/
/*画像は透明、表示、透明のアニメーション*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
 
50% {
    opacity: 1;
  }
  
 100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
 
50% {
    opacity: 1;
  }
  
 100% {
    opacity: 0;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*どんな動きをつけるかanimate.cssより引用*/
/*画像は透明、表示、透明のアニメーション*/
@-webkit-keyframes fadeIn02 {
  0% {
    opacity: 0;
  }
 
100% {
    opacity: 1;
  }

}

@keyframes fadeIn02 {
  0% {
    opacity: 0;
  }
 
100% {
    opacity: 1;
  }
  
}

.fadeIn02 {
  -webkit-animation-name: fadeIn02;
  animation-name: fadeIn02;
}

他に良いやり方、ご指摘があれば是非!!
↓↓↓↓↓↓↓↓↓
Tweet to @kapibarafun