CSS3の3D効果を使って動きのあるフォトギャラリーを作ってみたいと思います。現状ChromeやSafariなどのwebkit系ブラウザでのみの対応なのでなかなか実装できるシーンは少ないかもしれませんが、そこはひとまず置いておいてチャンレンジしてみましょう。
▼素材のダウンロード元はこちら
【使い方】
1.画像を用意
今回は「Oleg Oprisco」氏の写真を6枚使用させて頂きました。
2.jQuery本体とjsを読み込む
jQuery本体と「jquery.transiton.js」と「modernizr.custom.70748.js」を</body>の直前で読み込みます。
|
1 2 3 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.transitions.js"></script> <script type="text/javascript" src="js/modernizr.custom.70748.js"></script> |
3.CSSを読み込む
共通のスタイル「common.css」を読み込みます。(ダウンロード素材の中では「demo.css」という名前になっています。)
|
1 |
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
4.HTMLを記述
いくつかアニメーションの違いにより記述が変わってきますが、基本となるHTMLは下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="container"> <div class="te-container"> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> </div><!--.te-images//--> <div class="te-cover"> <img src="images/image1.jpg" /> </div> <div class="te-transition"> <div class="te-card"> <div class="te-front"></div> <div class="te-back"></div> </div> </div><!--.te-transition//--> </div><!--#te-wrapper//--> </div><!--.te-container//--> </div><!--.container//--> |
ここまでが基本ベースになり、アニメーション方法によりCSSとHTMLを書き換えていきます。
↓ それではいくつか、サンプルを見ていきましょう。
SAMPLE1【Flip】
▼縦捲れ
▼縦スクロール
▼横回転扉
▼横スクロール
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-flip1">縦捲れFlip</option> <option value="te-flip2">縦スクロールFlip</option> <option value="te-flip3">横回転扉Flip</option> <option value="te-flip4">横スクロールFlip</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> </div> <div class="te-cover"> <img src="images/image1.jpg" /> </div> <div class="te-transition"> <div class="te-card"> <div class="te-front"></div> <div class="te-back"></div> </div> </div> </div> </div> </div> |
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/*******************************************************/ /***************** Flip Effects ************************/ /*******************************************************/ .te-transition, .te-cover.te-hide, .te-images { display: none; } .te-perspective { -webkit-perspective: 1000px; } .te-transition, .te-cover { position: absolute; width: 600px; height: 600px; top: 0px; left: 0px; } .te-transition.te-show { display: block; } .te-card, .te-back, .te-front { width: 100%; height: 100%; position: absolute; } .te-card { -webkit-transform-style: preserve-3d; } .te-front, .te-back { -webkit-backface-visibility: hidden; } .te-back { -webkit-transform: rotate3d(1,0,0,-180deg); } /***************** Flip1 ********************/ .te-flip1.te-show .te-card{ -webkit-animation: flip1 1s ease-in-out forwards; } @-webkit-keyframes flip1{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } /****************** Flip2 *******************/ .te-flip2.te-show .te-card{ -webkit-animation: flip2 1s ease-in-out forwards; -webkit-transform-origin: 50% 0%; } @-webkit-keyframes flip2{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg) translate3d(0,-600px,0); } } /****************** Flip3 *******************/ .te-flip3 .te-back { -webkit-transform: rotate3d(0,1,0,-180deg); } .te-flip3.te-show .te-card{ -webkit-animation: flip3 1s ease-in-out forwards; } @-webkit-keyframes flip3{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 50% { -webkit-transform: rotate3d(0,1,0,-190deg); } 70% { -webkit-transform: rotate3d(0,1,0,-172deg); } 80% { -webkit-transform: rotate3d(0,1,0,-180deg); } 95% { -webkit-transform: rotate3d(0,1,0,-178deg); } 100% { -webkit-transform: rotate3d(0,1,0,-180deg); } } /****************** Flip4 *******************/ .te-flip4 .te-back{ -webkit-transform: rotate3d(0,1,0,-180deg); } .te-flip4.te-show .te-card{ -webkit-animation: flip4 1s ease-in-out forwards; -webkit-transform-origin: 100% 50%; } @-webkit-keyframes flip4{ 0% { -webkit-transform: rotate3d(0,1,0,0) ; } 100% { -webkit-transform: rotate3d(0,1,0,-180deg) translate3d(600px,0,0); } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
- スクロールに関しては「flip2」の600pxとなっているところ、横スクロールに関しては「flip4」の600pxとなっているところを画像サイズに調整します。
SAMPLE2【Rotation】
▼前倒れ回転
▼前倒れ
▼右横捲れ
▼左横回転扉(バウンス)
▼左カレンダー捲れ
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-rotation1">前倒れ回転Rotation</option> <option value="te-rotation2">前倒れRotation</option> <option value="te-rotation3">右横捲れRotation</option> <option value="te-rotation4">左横回転扉Rotation(バウンス)</option> <option value="te-rotation5">左カレンダー捲れRotation</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> <img src="images/image1.jpg" /> </div> <div class="te-cover"> <img src="images/image2.jpg" /> </div> <div class="te-transition"> <div class="te-card"> <div class="te-front"></div> <div class="te-back"></div> </div> </div> </div> </div> </div> |
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
/*******************************************************/ /***************** Rotation Effects ********************/ /*******************************************************/ .te-perspective{ -webkit-perspective: 1000; } .te-transition, .te-cover{ position: absolute; width: 600px; height: 600px; top: 0px; left: 0px; } .te-transition, .te-cover.te-hide, .te-images{ display: none; } .te-transition.te-show { display: block; } .te-back, .te-front{ position: absolute; width: 100%; height: 100%; } .te-front{ z-index: 2; } .te-back{ z-index: 1; -webkit-backface-visibility: hidden; } /***************** Rotation1 ********************/ .te-rotation1.te-show .te-front, .te-rotation1.te-show .te-back{ -webkit-transform-origin: 50% 100%; } .te-rotation1.te-show .te-front{ -webkit-animation: rotationFront1 0.8s linear; } .te-rotation1.te-show .te-back { -webkit-animation: rotationBack1 0.8s linear; } @-webkit-keyframes rotationFront1{ 0% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1; } 50% { -webkit-transform: rotate3d(1,0,0,-90deg); opacity: 0.5; } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); opacity: 0; } } @-webkit-keyframes rotationBack1{ 0% { opacity: 0; rotate3d(1,0,0,90deg); } 30% { -webkit-transform: rotate3d(1,0,0,90deg); opacity: 0; } 100% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1;} } /***************** Rotation2 ********************/ .te-rotation2.te-show .te-front{ -webkit-animation: rotationFront2 0.8s linear; -webkit-transform-origin: 50% 100%; } @-webkit-keyframes rotationFront2{ 0% { -webkit-transform: rotate3d(1,0,0,0); opacity: 1; } 50% { -webkit-transform: rotate3d(1,0,0,-90deg); opacity: 1; } 90% { -webkit-transform: rotate3d(1,0,0,-260deg); opacity: 0; } 100% { -webkit-transform: rotate3d(1,0,0,-270deg); opacity: 0; } } /***************** Rotation3 ********************/ .te-rotation3.te-show .te-front{ -webkit-animation: rotationFront3 0.8s linear; -webkit-transform-origin: 100% 50%; } @-webkit-keyframes rotationFront3{ 0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1; } 50% { -webkit-transform: rotate3d(0,1,0,90deg); opacity: 1; } 100% { -webkit-transform: rotate3d(0,1,0,180deg); opacity: 0; } } /***************** Rotation4 ********************/ .te-rotation4.te-show .te-front, .te-rotation4.te-show .te-back{ -webkit-transform-origin: 0% 50%; } .te-rotation4.te-show .te-front{ -webkit-animation: rotationFront4 0.8s linear; } .te-rotation4.te-show .te-back { -webkit-animation: rotationBack4 0.8s ease-in-out; } @-webkit-keyframes rotationFront4{ 0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1; -webkit-animation-timing-function: ease-in;} 30% { -webkit-transform: rotate3d(0,1,0,-90deg); opacity: 0.5; -webkit-animation-timing-function: ease-out;} 100% { -webkit-transform: rotate3d(0,1,0,-180deg); opacity: 0; } } @-webkit-keyframes rotationBack4{ 0% { opacity: 0; rotate3d(0,1,0,90deg); } 30% { -webkit-transform: rotate3d(0,1,0,90deg); opacity: 0; } 60% { -webkit-transform: rotate3d(0,1,0,-13deg); opacity: 1; } 70% { -webkit-transform: rotate3d(0,1,0,8deg); opacity: 1; } 80% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; } 95% { -webkit-transform: rotate3d(0,1,0,3deg); opacity: 1; } 100% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; } } /***************** Rotation5 ********************/ .te-rotation5.te-show .te-front{ -webkit-transform-origin: 0% 50%; } .te-rotation5.te-show .te-front{ -webkit-animation: rotationFront5 0.8s linear; } @-webkit-keyframes rotationFront5{ 0% { -webkit-transform: rotate3d(0,1,0,0); opacity: 1;} 50% { -webkit-transform: translateX(-200px) translateZ(100px) rotate3d(0,1,0,-120deg); opacity: 0.5; } 100% { -webkit-transform: translateX(-400px) translateZ(200px) rotate3d(0,1,0,-240deg); opacity: 0; } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
SAMPLE3【Multi-flip】
▼前倒れ
▼後ろ滑り込み
▼横ブラインド
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-multiflip1">前倒れMulti-flip</option> <option value="te-multiflip2">後ろ滑り込みMulti-flip</option> <option value="te-multiflip3">横ブラインドMulti-flip</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> </div> <div class="te-cover"> <img src="images/image3.jpg" /> </div> <div class="te-transition"> <div class="te-card te-flip1"> <div class="te-front"></div> <div class="te-back"></div> </div> <div class="te-card te-flip2"> <div class="te-front"></div> <div class="te-back"></div> </div> <div class="te-card te-flip3"> <div class="te-front"></div> <div class="te-back"></div> </div> <div class="te-card te-flip4"> <div class="te-front"></div> <div class="te-back"></div> </div> <div class="te-card te-flip5"> <div class="te-front"></div> <div class="te-back"></div> </div> <div class="te-card te-flip6"> <div class="te-front"></div> <div class="te-back"></div> </div> </div> </div> </div> </div> |
- Multi-flipに関してはHTMLの<div class=”te-transition”>～</div>内が大きく変わりますのでご注意ください。
- サンプルは6等分しているためflip6まで用意してありますが、その数は何等分するかによって調整してください。
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 |
/*******************************************************/ /***************** Multiflip Effects *******************/ /*******************************************************/ .te-perspective{ -webkit-perspective: 1000; } .te-transition, .te-cover{ position: absolute; width: 600px; height: 600px; top: 0px; left: 0px; } .te-transition, .te-cover.te-hide, .te-images{ display: none; } .te-transition.te-show{ display: block; } .te-card{ -webkit-transform-style: preserve-3d; width: 100%; height: 100%; position: absolute; } .te-back, .te-front{ width: 100px; height: 100%; overflow: hidden; position: absolute; -webkit-backface-visibility: hidden; } .te-front{ z-index: 2; } .te-back{ z-index: 1; } .te-transition img{ position: absolute; } .te-transition .te-flip1 img{ left: 0px; } .te-transition .te-flip2 img{ left: -100px; } .te-transition .te-flip3 img{ left: -200px; } .te-transition .te-flip4 img{ left: -300px; } .te-transition .te-flip5 img{ left: -400px; } .te-transition .te-flip6 img{ left: -500px; } .te-transition .te-flip7 img{ left: -600px; } .te-multiflip1 .te-flip1, .te-multiflip2 .te-flip1, .te-multiflip3 .te-flip1{ left: 0px; } .te-multiflip1 .te-flip2, .te-multiflip2 .te-flip2, .te-multiflip3 .te-flip2{ left: 100px; } .te-multiflip1 .te-flip3, .te-multiflip2 .te-flip3, .te-multiflip3 .te-flip3{ left: 200px; } .te-multiflip1 .te-flip4, .te-multiflip2 .te-flip4, .te-multiflip3 .te-flip4{ left: 300px; } .te-multiflip1 .te-flip5, .te-multiflip2 .te-flip5, .te-multiflip3 .te-flip5{ left: 400px; } .te-multiflip1 .te-flip6, .te-multiflip2 .te-flip6, .te-multiflip3 .te-flip6{ left: 500px; } .te-multiflip1 .te-flip7, .te-multiflip2 .te-flip7, .te-multiflip3 .te-flip7{ left: 600px; } /***************** Multiflip1 ********************/ .te-multiflip1 .te-back{ -webkit-transform: rotate3d(1,0,0,-180deg); } .te-multiflip1.te-show .te-card{ -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; } .te-multiflip1 .te-flip1{ z-index: 1; -webkit-animation-name: multiflip1_4; } .te-multiflip1 .te-flip2{ z-index: 2; -webkit-animation-name: multiflip1_3; } .te-multiflip1 .te-flip3{ z-index: 3; -webkit-animation-name: multiflip1_2; } .te-multiflip1 .te-flip4{ z-index: 4; -webkit-animation-name: multiflip1_1; } .te-multiflip1 .te-flip5{ z-index: 3; -webkit-animation-name: multiflip1_2; } .te-multiflip1 .te-flip6{ z-index: 2; -webkit-animation-name: multiflip1_3; } .te-multiflip1 .te-flip7{ z-index: 1; -webkit-animation-name: multiflip1_4; } @-webkit-keyframes multiflip1_1{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 60% { -webkit-transform: rotate3d(1,0,0,-180deg); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } @-webkit-keyframes multiflip1_2{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 10% { -webkit-transform: rotate3d(1,0,0,0); } 70% { -webkit-transform: rotate3d(1,0,0,-180deg); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } @-webkit-keyframes multiflip1_3{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 20% { -webkit-transform: rotate3d(1,0,0,0); } 80% { -webkit-transform: rotate3d(1,0,0,-180deg); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } @-webkit-keyframes multiflip1_4{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 30% { -webkit-transform: rotate3d(1,0,0,0); } 90% { -webkit-transform: rotate3d(1,0,0,-180deg); } 100% { -webkit-transform: rotate3d(1,0,0,-180deg); } } /***************** Multiflip2 ********************/ .te-multiflip2 .te-back{ -webkit-transform: rotate3d(1,0,0,-180deg); } .te-multiflip2.te-show .te-card{ -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; } .te-multiflip2 .te-flip1{ z-index: 1; -webkit-animation-name: multiflip2_1; } .te-multiflip2 .te-flip2{ z-index: 2; -webkit-animation-name: multiflip2_2; } .te-multiflip2 .te-flip3{ z-index: 3; -webkit-animation-name: multiflip2_3; } .te-multiflip2 .te-flip4{ z-index: 4; -webkit-animation-name: multiflip2_4; } .te-multiflip2 .te-flip5{ z-index: 3; -webkit-animation-name: multiflip2_5; } .te-multiflip2 .te-flip6{ z-index: 2; -webkit-animation-name: multiflip2_6; } .te-multiflip2 .te-flip7{ z-index: 1; -webkit-animation-name: multiflip2_7; } @-webkit-keyframes multiflip2_1{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 30% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0);} 60% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_2{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 5% { -webkit-transform: rotate3d(1,0,0,0); } 35% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 65% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_3{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 10% { -webkit-transform: rotate3d(1,0,0,0); } 40% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 70% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_4{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 15% { -webkit-transform: rotate3d(1,0,0,0); } 45% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 75% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_5{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 20% { -webkit-transform: rotate3d(1,0,0,0); } 50% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 80% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_6{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 25% { -webkit-transform: rotate3d(1,0,0,0); } 55% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 85% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } @-webkit-keyframes multiflip2_7{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 30% { -webkit-transform: rotate3d(1,0,0,0); } 60% { -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,-200px,0); } 90% { -webkit-transform: rotate3d(1,0,0,180deg); } 100% { -webkit-transform: rotate3d(1,0,0,180deg) translate3d(0,0,0); } } /***************** Multiflip3 ********************/ .te-multiflip3 .te-back{ -webkit-transform: rotate3d(0,1,0,-180deg); } .te-multiflip3.te-show .te-card{ -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; -webkit-transform-origin: 0% 50%; } .te-multiflip3 .te-flip1{ z-index: 1; -webkit-animation-name: multiflip3_1; } .te-multiflip3 .te-flip2{ z-index: 2; -webkit-animation-name: multiflip3_2; } .te-multiflip3 .te-flip3{ z-index: 3; -webkit-animation-name: multiflip3_3; } .te-multiflip3 .te-flip4{ z-index: 4; -webkit-animation-name: multiflip3_4; } .te-multiflip3 .te-flip5{ z-index: 3; -webkit-animation-name: multiflip3_5; } .te-multiflip3 .te-flip6{ z-index: 2; -webkit-animation-name: multiflip3_6; } .te-multiflip3 .te-flip7{ z-index: 1; -webkit-animation-name: multiflip3_7; } @-webkit-keyframes multiflip3_1{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 60% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_2{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 5% { -webkit-transform: rotate3d(0,1,0,0); } 65% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_3{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 10% { -webkit-transform: rotate3d(0,1,0,0); } 70% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_4{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 15% { -webkit-transform: rotate3d(0,1,0,0); } 75% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_5{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 20% { -webkit-transform: rotate3d(0,1,0,0); } 80% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_6{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 25% { -webkit-transform: rotate3d(0,1,0,0); } 85% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } @-webkit-keyframes multiflip3_7{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 30% { -webkit-transform: rotate3d(0,1,0,0); } 90% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,180deg) translate3d(-47px,0,0); } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
- また何等分するのかによって「.te-transition .te-flip1～6 img」と「.te-multiflip1 .te-flip1,.te-multiflip2 .te-flip1,.te-multiflip3 .te-flip1{left: 0px;}」以下を調整してください。
- 横ブラインドに関しては「keyframes multiflip3_1」～「keyframes multiflip3_1」の「translate3d」の-30px、-100pxとなっているところを調整してください。
SAMPLE4【Cube】
▼前転がり
▼後転がり
▼左転がり(バウンス)
▼右転がり
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-cube1">前転がりCube</option> <option value="te-cube2">後転がりCube</option> <option value="te-cube3">左転がりCube(バウンス)</option> <option value="te-cube4">右転がりCube</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> </div> <div class="te-cover"> <img src="images/image4.jpg" /> </div> <div class="te-transition"> <div class="te-cube-front te-cube-face te-front"></div> <div class="te-cube-top te-cube-face te-back"></div> <div class="te-cube-bottom te-cube-face te-back"></div> <div class="te-cube-right te-cube-face te-back"></div> <div class="te-cube-left te-cube-face te-back"></div> </div> </div> </div> </div> |
- Cubeに関してもHTMLの<div class=”te-transition”>～</div>内が大きく変わりますのでご注意ください。
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
/*******************************************************/ /****************** Cube Effects ***********************/ /*******************************************************/ .te-perspective{ -webkit-perspective: 1000; } .te-cover, .te-transition{ -webkit-transform-style: preserve-3d; position: absolute; width: 600px; height: 600px; top: 0px; left: 0px; } .te-cover.te-hide, .te-transition, .te-images{ display: none; } .te-transition.te-show{ display: block; } .te-cube-face{ position: absolute; width: 600px; height: 600px; display: block; overflow: hidden; } .te-back, .te-front{ position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; } .te-front{ z-index: 2; } .te-back{ z-index: 1; } /***************** Cube1 ********************/ .te-cube1 .te-cube-front{ -webkit-transform: scale3d(.768,.768,.768) translate3d(0,0,300px); } .te-cube1 .te-cube-top{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,90deg) translate3d(0,0,300px); } .te-cube1 .te-cube-bottom{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,-90deg) translate3d(0,0,300px); } .te-cube1 .te-cube-right{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,90deg) translate3d(0,0,300px); } .te-cube1 .te-cube-left{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube1.te-show{ -webkit-animation: cube1 0.5s ease-in-out; } @-webkit-keyframes cube1{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,-90deg); } } /***************** Cube2 ********************/ .te-cube2 .te-cube-front{ -webkit-transform: scale3d(.768,.768,.768) translate3d(0,0,300px); } .te-cube2 .te-cube-bottom{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,-90deg) translate3d(0,0,300px); } .te-cube2 .te-cube-top{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,90deg) translate3d(0,0,300px); } .te-cube2 .te-cube-right{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,90deg) translate3d(0,0,300px); } .te-cube2 .te-cube-left{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube2.te-show{ -webkit-animation: cube2 0.5s ease-in-out; } @-webkit-keyframes cube2{ 0% { -webkit-transform: rotate3d(1,0,0,0); } 100% { -webkit-transform: rotate3d(1,0,0,90deg); } } /***************** Cube3 ********************/ .te-cube3 .te-cube-front{ -webkit-transform: scale3d(.768,.768,.768) translate3d(0,0,300px); } .te-cube3 .te-cube-right{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,90deg) translate3d(0,0,300px); } .te-cube3 .te-cube-left{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube3 .te-cube-top{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,90deg) translate3d(0,0,300px); } .te-cube3 .te-cube-bottom{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube3.te-show{ -webkit-animation: cube3 1s ease-in-out; } @-webkit-keyframes cube3{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 40% { -webkit-transform: rotate3d(0,1,0,-100deg); } 60% { -webkit-transform: rotate3d(0,1,0,-84deg); } 80% { -webkit-transform: rotate3d(0,1,0,-90deg); } 95% { -webkit-transform: rotate3d(0,1,0,-88deg); } 100% { -webkit-transform: rotate3d(0,1,0,-90deg); } } /***************** Cube4 ********************/ .te-cube4 .te-cube-front{ -webkit-transform: scale3d(.768,.768,.768) translate3d(0,0,300px); } .te-cube4 .te-cube-left{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube4 .te-cube-right{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,90deg) translate3d(0,0,300px); } .te-cube4 .te-cube-top{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(1,0,0,90deg) translate3d(0,0,300px); } .te-cube4 .te-cube-bottom{ -webkit-transform: scale3d(.768,.768,.768) rotate3d(0,1,0,-90deg) translate3d(0,0,300px); } .te-cube4.te-show{ -webkit-animation: cube4 0.5s ease-in-out; } @-webkit-keyframes cube4{ 0% { -webkit-transform: rotate3d(0,1,0,0); } 100% { -webkit-transform: rotate3d(0,1,0,90deg); } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
- すべてのパターンにおいて「translate3d」の300pxとなっているところを使用する画像の半分の値に調整します。
SAMPLE5【Unfold】
▼縦折りたたみから展開(バウンス)
▼横折りたたみから展開(バウンス)
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-unfold1">縦折りたたみから展開Unfold(バウンス)</option> <option value="te-unfold2">横折りたたみから展開Unfold(バウンス)</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image5.jpg" /> <img src="images/image6.jpg" /> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> </div> <div class="te-cover"> <img src="images/image5.jpg" /> </div> <div class="te-transition"> <div class="te-front te-front1"></div> <div class="te-front te-front2"></div> <div class="te-front te-front3"></div> <div class="te-back te-back1"></div> <div class="te-back te-back2"></div> <div class="te-back te-back3"></div> </div> </div> </div> </div> |
- Cubeに関してもHTMLの<div class=”te-transition”>～</div>内が大きく変わりますのでご注意ください。
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
/*******************************************************/ /****************** Unfold Effects *********************/ /*******************************************************/ .te-perspective{ -webkit-perspective: 1000; } .te-cover, .te-transition{ width: 600px; height: 600px; } .te-cover.te-hide, .te-transition, .te-images{ display: none; } .te-transition.te-show{ display: block; } .te-back, .te-front{ overflow: hidden; position: absolute; opacity: 0; -webkit-backface-visibility: hidden; } .te-transition img{ position: absolute; left: 0px; top: 0px; } /***************** unfold1 ********************/ .te-unfold1 .te-front{ -webkit-transform-origin: 50% 100%; } .te-unfold1 .te-back{ -webkit-transform-origin: 50% 0%; } .te-unfold1 .te-front, .te-unfold1 .te-back { width: 100%; height: 200px; } .te-unfold1 .te-front.te-front2, .te-unfold1 .te-back.te-back2{ top: 200px; } .te-unfold1 .te-front.te-front2 img, .te-unfold1 .te-back.te-back2 img{ top: -200px; } .te-unfold1 .te-front.te-front3, .te-unfold1 .te-back.te-back3{ top: 400px; } .te-unfold1 .te-front.te-front3 img, .te-unfold1 .te-back.te-back3 img{ top: -400px; } .te-unfold1.te-show .te-front.te-front1{ -webkit-animation: unfold1_1Front 1s ease-in-out; } .te-unfold1.te-show .te-front.te-front2{ -webkit-animation: unfold1_2Front 1s ease-in-out; } .te-unfold1.te-show .te-front.te-front3{ -webkit-animation: unfold1_3Front 1s ease-in-out; } .te-unfold1.te-show .te-back.te-back1{ -webkit-animation: unfold1_1Back 1s ease-in-out; -webkit-animation-delay:0.7s; } .te-unfold1.te-show .te-back.te-back2{ -webkit-animation: unfold1_2Back 1s ease-in-out; -webkit-animation-delay:0.7s; } .te-unfold1.te-show .te-back.te-back3{ -webkit-animation: unfold1_3Back 1s ease-in-out; -webkit-animation-delay:0.7s; } @-webkit-keyframes unfold1_1Front{ 0% { opacity: 1; -webkit-transform: rotate3d(1,0,0,0); } 33% { -webkit-transform: rotate3d(1,0,0,100deg); } 100% { opacity: 1; -webkit-transform: rotate3d(1,0,0,100deg); } } @-webkit-keyframes unfold1_2Front{ 0% { opacity: 1; -webkit-transform: rotate3d(1,0,0,0); } 33% { -webkit-transform: rotate3d(1,0,0,0); } 66% { -webkit-transform: rotate3d(1,0,0,100deg); } 100% { opacity: 1; -webkit-transform: rotate3d(1,0,0,100deg); } } @-webkit-keyframes unfold1_3Front{ 0% { opacity: 1; -webkit-transform: rotate3d(1,0,0,0); } 66% { -webkit-transform: rotate3d(1,0,0,0); } 83% { -webkit-transform: rotate3d(1,0,0,50deg); } 100% { opacity: 1; -webkit-transform: rotate3d(1,0,0,100deg); } } @-webkit-keyframes unfold1_1Back { 0% { opacity:1; -webkit-transform: rotate3d(1,0,0,-100deg); } 30% { opacity:1; -webkit-transform: rotate3d(1,0,0,0); } 100% { opacity:1; -webkit-transform: rotate3d(1,0,0,0); } } @-webkit-keyframes unfold1_2Back { 0% { opacity: 1; -webkit-transform: rotate3d(1,0,0,-100deg); } 26% { -webkit-transform: rotate3d(1,0,0,-100deg); } 60% { -webkit-transform: rotate3d(1,0,0,0); } 100% { opacity: 1; -webkit-transform: rotate3d(1,0,0,0); } } @-webkit-keyframes unfold1_3Back { 0% { opacity: 1; -webkit-transform: rotate3d(1,0,0,-100deg); } 55% { -webkit-transform: rotate3d(1,0,0,-100deg); } 78% { -webkit-transform: rotate3d(1,0,0,28deg); } 86% { -webkit-transform: rotate3d(1,0,0,-28deg); } 94% { -webkit-transform: rotate3d(1,0,0,12deg); } 98% { -webkit-transform: rotate3d(1,0,0,-12deg); } 100% { opacity: 1; -webkit-transform: rotate3d(1,0,0,0); } } /***************** unfold2 ********************/ .te-unfold2 .te-front{ -webkit-transform-origin: 100% 50%; } .te-unfold2 .te-back{ -webkit-transform-origin: 0% 50%; } .te-unfold2 .te-front, .te-unfold2 .te-back { width: 200px; height: 100%; } .te-unfold2 .te-front.te-front2, .te-unfold2 .te-back.te-back2{ left: 200px; } .te-unfold2 .te-front.te-front2 img, .te-unfold2 .te-back.te-back2 img{ left: -200px; } .te-unfold2 .te-front.te-front3, .te-unfold2 .te-back.te-back3{ left: 400px; } .te-unfold2 .te-front.te-front3 img, .te-unfold2 .te-back.te-back3 img{ left: -400px; } .te-unfold2.te-show .te-front.te-front1{ -webkit-animation: unfold2_1Front 1s ease-in-out; } .te-unfold2.te-show .te-front.te-front2{ -webkit-animation: unfold2_2Front 1s ease-in-out; } .te-unfold2.te-show .te-front.te-front3{ -webkit-animation: unfold2_3Front 1s ease-in-out; } .te-unfold2.te-show .te-back.te-back1{ -webkit-animation: unfold2_1Back 1s ease-in-out; -webkit-animation-delay:0.9s; } .te-unfold2.te-show .te-back.te-back2{ -webkit-animation: unfold2_2Back 1s ease-in-out; -webkit-animation-delay:0.9s; } .te-unfold2.te-show .te-back.te-back3{ -webkit-animation: unfold2_3Back 1s ease-in-out; -webkit-animation-delay:0.9s; } @-webkit-keyframes unfold2_1Front{ 0% { opacity: 1; -webkit-transform: rotate3d(0,1,0,0); } 33% { -webkit-transform: rotate3d(0,1,0,-100deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0,1,0,-100deg); } } @-webkit-keyframes unfold2_2Front{ 0% { opacity: 1; -webkit-transform: rotate3d(0,1,0,0); } 33% { -webkit-transform: rotate3d(0,1,0,0); } 66% { -webkit-transform: rotate3d(0,1,0,-100deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0,1,0,-100deg); } } @-webkit-keyframes unfold2_3Front{ 0% { opacity: 1; -webkit-transform: rotate3d(0,1,0,0); } 66% { -webkit-transform: rotate3d(0,1,0,0); } 83% { -webkit-transform: rotate3d(0,1,0,-50); } 100% { opacity: 1; -webkit-transform: rotate3d(0,1,0,-100deg); } } @-webkit-keyframes unfold2_1Back { 0% { opacity:1; -webkit-transform: rotate3d(0,1,0,100deg); } 30% { opacity:1; -webkit-transform: rotate3d(0,1,0,0); } 100% { opacity:1; -webkit-transform: rotate3d(0,1,0,0); } } @-webkit-keyframes unfold2_2Back { 0% { opacity: 1; -webkit-transform: rotate3d(0,1,0,100deg); } 26% { -webkit-transform: rotate3d(0,1,0,100deg); } 60% { -webkit-transform: rotate3d(0,1,0,0); } 100% { opacity: 1; -webkit-transform: rotate3d(0,1,0,0); } } @-webkit-keyframes unfold2_3Back { 0% { opacity: 1; -webkit-transform: rotate3d(0,1,0,100deg); } 55% { -webkit-transform: rotate3d(0,1,0,100deg); } 78% { -webkit-transform: rotate3d(0,1,0,-28deg); } 86% { -webkit-transform: rotate3d(0,1,0,28deg); } 94% { -webkit-transform: rotate3d(0,1,0,-12deg); } 98% { -webkit-transform: rotate3d(0,1,0,12deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0,1,0,0); } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
- すべてのパターンにおいて「.te-back」「.te-back2」「.te-back3」の横幅もしくは高さを画像の半分と何回折にするかで調整します。
SAMPLE6【Others】
▼フェード
▼左スライド
▼ポイッと
▼後ろへスライド
▼カシャッと切り替え
▼拡大フェードアウト
▼クルッと切り替え(バウンス)
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container"> <div class="te-container"> <div class="te-controls"> <select id="type"> <option value="te-example1">フェード</option> <option value="te-example2">左スライド</option> <option value="te-example3">ポイッと</option> <option value="te-example4">後ろへスライド</option> <option value="te-example5">カシャッと切り替え</option> <option value="te-example6">拡大フェードアウト</option> <option value="te-example7">クルッと切り替え(バウンス)</option> </select> <a id="te-next" href="#" class="te-next">next</a> <div class="te-shadow"></div> </div> <div id="te-wrapper" class="te-wrapper"> <div class="te-images"> <img src="images/image6.jpg" /> <img src="images/image1.jpg" /> <img src="images/image2.jpg" /> <img src="images/image3.jpg" /> <img src="images/image4.jpg" /> <img src="images/image5.jpg" /> </div> <div class="te-cover"> <img src="images/image6.jpg" /> </div> <div class="te-transition"> <div class="te-front"></div> <div class="te-back"></div> </div> </div> </div> </div> |
CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
/*******************************************************/ /******************* Other Effects *********************/ /*******************************************************/ .te-perspective{ -webkit-perspective: 1000; } .te-cover, .te-transition{ position: absolute; width: 600px; height: 600px; top: 0px; left: 0px; } .te-cover.te-hide, .te-transition, .te-images{ display: none; } .te-transition.te-show { display: block; } .te-back, .te-front{ position: absolute; width: 100%; height: 100%; } .te-front{ z-index: 2; } .te-back{ z-index: 1; -webkit-backface-visibility: hidden; } /***************** example1 ********************/ .te-example1.te-show .te-front{ -webkit-animation: example1Front 0.6s linear forwards; } @-webkit-keyframes example1Front{ 0% { opacity: 1; } 100% { opacity: 0; } } /***************** example2 ********************/ .te-transition.te-example2 { overflow: hidden; } .te-example2.te-show .te-front, .te-example2.te-show .te-back{ -webkit-animation-duration: 0.4s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; } .te-example2.te-show .te-front{ -webkit-animation-name: example2Front; } .te-example2.te-show .te-back { -webkit-animation-name: example2Back; } @-webkit-keyframes example2Front{ 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(-600px); } } @-webkit-keyframes example2Back{ 0% { -webkit-transform: translateX(600px); } 100% { -webkit-transform: translateX(0px); } } /***************** example3 ********************/ .te-example3 .te-front{ z-index: 1; } .te-example3 .te-back{ z-index: 2; } .te-example3.te-show .te-back{ -webkit-animation: example3Back 0.4s ease-out forwards; } @-webkit-keyframes example3Back{ 0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; } 100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; } } /***************** example4 ********************/ .te-example4.te-show .te-front{ -webkit-animation: example4Front 0.8s ease-in-out forwards; } @-webkit-keyframes example4Front{ 0% { -webkit-transform: translateX(0); z-index: 3;} 50% { -webkit-transform: rotateZ(-5deg) translateX(-630px); z-index: 3;} 51% { z-index: 1;} 100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;} } /***************** example5 ********************/ .te-example5.te-show .te-front, .te-example5.te-show .te-back{ -webkit-animation-duration: 0.8s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; -webkit-transform-origin: 0% 100%; } .te-example5.te-show .te-front{ -webkit-animation-name: example5Front; } .te-example5.te-show .te-back { -webkit-animation-name: example5Back; } @-webkit-keyframes example5Front{ 0% { z-index: 3;} 50% { -webkit-transform: rotateZ(-75deg); z-index: 3;} 51% { z-index: 1;} 100% { -webkit-transform: rotateZ(0deg); z-index: 1;} } @-webkit-keyframes example5Back{ 0% { z-index: 1;} 50% { -webkit-transform: rotateZ(20deg); z-index: 1;} 51% { z-index: 3;} 100% { -webkit-transform: rotateZ(0deg); z-index: 3;} } /***************** example6 ********************/ .te-example6.te-show .te-front{ -webkit-animation: example6Front 0.4s ease-in-out forwards; } @-webkit-keyframes example6Front{ 0% { opacity:1; } 100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; } } /***************** example7 ********************/ .te-example7.te-show .te-front{ -webkit-transform-origin: 0% 100%; } .te-example7.te-show .te-front{ -webkit-animation: example7Front 1s ease-in-out forwards; } @-webkit-keyframes example7Front{ 0% { z-index: 3; -webkit-animation-timing-function : ease-in } 20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out } 21% { z-index: 1; } 40% { -webkit-transform: rotateZ(370deg); z-index: 1; } 60% { -webkit-transform: rotateZ(356deg); z-index: 1; } 80% { -webkit-transform: rotateZ(360deg); z-index: 1; } 95% { -webkit-transform: rotateZ(359deg); z-index: 1; } 100% { -webkit-transform: rotateZ(360deg); z-index: 1; } } |
- 画像サイズによって「.te-cover」のwidthとheightを調整します。
- 左スライドに関しては「keyframes example2Front」「keyframes example2Back」の-600px、600pxとなっているところを使用する画像サイズ値に調整します。
- 後ろへスライドに関しては「keyframes example4Front」のtranslateXの-630pxになっているところを使用する画像サイズ-30px程度に調整します。
以上になります。
「3D Transforms」がChomeやSafari等のwebkit系ブラウザのみの対応状況ですので、まだまだ利用できる機会は少ないかもしれませんが紹介させて頂きました。