From: ronan le priol Date: Fri, 11 Oct 2013 08:37:35 +0000 (+0200) Subject: commit du 11 10 2013 10:37 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=e84d47134e9b142f4217f5213a800260a4162a1b;p=telecasting-www.git commit du 11 10 2013 10:37 --- diff --git a/_old/ifr-mobile-web-tv.html b/_old/ifr-mobile-web-tv.html new file mode 100644 index 0000000..44df8b7 --- /dev/null +++ b/_old/ifr-mobile-web-tv.html @@ -0,0 +1,81 @@ + + + + + + + mobile web tv + + + + + + + + + + +
+
+
+
+

+
+
+

mobile web tv

+

La solution matériel et logiciel professionnelle, portable et tout en un pour l'enregistrement video et audio de vos évènements et leur diffusion multicanal

+
    +
    • +
    • +
    • +
    • +
+
+ +
+ +
+
+ +
+

Brooklyn dreamcatcher

+

Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.

+
+
+
+ +
+

Chillwave mustache

+

Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.

+
+
+
+ +
+

Austin hella

+

Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.

+
+
+
+ +
+ +
+
+
+ + + + + diff --git a/_old/ifr-usage.html b/_old/ifr-usage.html new file mode 100644 index 0000000..6ac8fc0 --- /dev/null +++ b/_old/ifr-usage.html @@ -0,0 +1,81 @@ + + + + + + + workflow + + + + + + + + + +
+
+
+
+

solution web tv
100%
mobile & portable

+
+
+

mobile web tv

+

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

+

+ en savoir plus +

+
+ +
+
+
+

solution e-learning
100%
mobile & portable

+
+
+

About this layout

+

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

+

+ en savoir plus> +

+
+ +
+
+
+

solution e-conference
100%
mobile & portable

+
+
+

About this layout

+

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

+

+ en savoir plus +

+
+ +
+
+
+

solution e-concert
100%
mobile & portable

+
+
+

Get in touch

+

Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.

+

+ en savoir plus +

+
+ +
+
+
+ + + + + diff --git a/_old/ifr/.DS_Store b/_old/ifr/.DS_Store new file mode 100644 index 0000000..a484ea8 Binary files /dev/null and b/_old/ifr/.DS_Store differ diff --git a/_old/ifr/README.md b/_old/ifr/README.md new file mode 100644 index 0000000..4a76868 --- /dev/null +++ b/_old/ifr/README.md @@ -0,0 +1,6 @@ +Created by Codrops + +http://www.codrops.com + +Please read about our license: http://tympanus.net/codrops/licensing/ + diff --git a/_old/ifr/css/.DS_Store b/_old/ifr/css/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/_old/ifr/css/.DS_Store differ diff --git a/_old/ifr/css/animations.css b/_old/ifr/css/animations.css new file mode 100644 index 0000000..8704d8f --- /dev/null +++ b/_old/ifr/css/animations.css @@ -0,0 +1,1628 @@ +/* animation sets */ + +/* move from / to */ + +.pt-page-moveToLeft { + -webkit-animation: moveToLeft .6s ease both; + -moz-animation: moveToLeft .6s ease both; + animation: moveToLeft .6s ease both; +} + +.pt-page-moveFromLeft { + -webkit-animation: moveFromLeft .6s ease both; + -moz-animation: moveFromLeft .6s ease both; + animation: moveFromLeft .6s ease both; +} + +.pt-page-moveToRight { + -webkit-animation: moveToRight .6s ease both; + -moz-animation: moveToRight .6s ease both; + animation: moveToRight .6s ease both; +} + +.pt-page-moveFromRight { + -webkit-animation: moveFromRight .6s ease both; + -moz-animation: moveFromRight .6s ease both; + animation: moveFromRight .6s ease both; +} + +.pt-page-moveToTop { + -webkit-animation: moveToTop .6s ease both; + -moz-animation: moveToTop .6s ease both; + animation: moveToTop .6s ease both; +} + +.pt-page-moveFromTop { + -webkit-animation: moveFromTop .6s ease both; + -moz-animation: moveFromTop .6s ease both; + animation: moveFromTop .6s ease both; +} + +.pt-page-moveToBottom { + -webkit-animation: moveToBottom .6s ease both; + -moz-animation: moveToBottom .6s ease both; + animation: moveToBottom .6s ease both; +} + +.pt-page-moveFromBottom { + -webkit-animation: moveFromBottom .6s ease both; + -moz-animation: moveFromBottom .6s ease both; + animation: moveFromBottom .6s ease both; +} + +/* fade */ + +.pt-page-fade { + -webkit-animation: fade .7s ease both; + -moz-animation: fade .7s ease both; + animation: fade .7s ease both; +} + +/* move from / to and fade */ + +.pt-page-moveToLeftFade { + -webkit-animation: moveToLeftFade .7s ease both; + -moz-animation: moveToLeftFade .7s ease both; + animation: moveToLeftFade .7s ease both; +} + +.pt-page-moveFromLeftFade { + -webkit-animation: moveFromLeftFade .7s ease both; + -moz-animation: moveFromLeftFade .7s ease both; + animation: moveFromLeftFade .7s ease both; +} + +.pt-page-moveToRightFade { + -webkit-animation: moveToRightFade .7s ease both; + -moz-animation: moveToRightFade .7s ease both; + animation: moveToRightFade .7s ease both; +} + +.pt-page-moveFromRightFade { + -webkit-animation: moveFromRightFade .7s ease both; + -moz-animation: moveFromRightFade .7s ease both; + animation: moveFromRightFade .7s ease both; +} + +.pt-page-moveToTopFade { + -webkit-animation: moveToTopFade .7s ease both; + -moz-animation: moveToTopFade .7s ease both; + animation: moveToTopFade .7s ease both; +} + +.pt-page-moveFromTopFade { + -webkit-animation: moveFromTopFade .7s ease both; + -moz-animation: moveFromTopFade .7s ease both; + animation: moveFromTopFade .7s ease both; +} + +.pt-page-moveToBottomFade { + -webkit-animation: moveToBottomFade .7s ease both; + -moz-animation: moveToBottomFade .7s ease both; + animation: moveToBottomFade .7s ease both; +} + +.pt-page-moveFromBottomFade { + -webkit-animation: moveFromBottomFade .7s ease both; + -moz-animation: moveFromBottomFade .7s ease both; + animation: moveFromBottomFade .7s ease both; +} + +/* move to with different easing */ + +.pt-page-moveToLeftEasing { + -webkit-animation: moveToLeft .7s ease-in-out both; + -moz-animation: moveToLeft .7s ease-in-out both; + animation: moveToLeft .7s ease-in-out both; +} +.pt-page-moveToRightEasing { + -webkit-animation: moveToRight .7s ease-in-out both; + -moz-animation: moveToRight .7s ease-in-out both; + animation: moveToRight .7s ease-in-out both; +} +.pt-page-moveToTopEasing { + -webkit-animation: moveToTop .7s ease-in-out both; + -moz-animation: moveToTop .7s ease-in-out both; + animation: moveToTop .7s ease-in-out both; +} +.pt-page-moveToBottomEasing { + -webkit-animation: moveToBottom .7s ease-in-out both; + -moz-animation: moveToBottom .7s ease-in-out both; + animation: moveToBottom .7s ease-in-out both; +} + +/********************************* keyframes **************************************/ + +/* move from / to */ + +@-webkit-keyframes moveToLeft { + to { -webkit-transform: translateX(-100%); } +} +@-moz-keyframes moveToLeft { + to { -moz-transform: translateX(-100%); } +} +@keyframes moveToLeft { + to { transform: translateX(-100%); } +} + +@-webkit-keyframes moveFromLeft { + from { -webkit-transform: translateX(-100%); } +} +@-moz-keyframes moveFromLeft { + from { -moz-transform: translateX(-100%); } +} +@keyframes moveFromLeft { + from { transform: translateX(-100%); } +} + +@-webkit-keyframes moveToRight { + to { -webkit-transform: translateX(100%); } +} +@-moz-keyframes moveToRight { + to { -moz-transform: translateX(100%); } +} +@keyframes moveToRight { + to { transform: translateX(100%); } +} + +@-webkit-keyframes moveFromRight { + from { -webkit-transform: translateX(100%); } +} +@-moz-keyframes moveFromRight { + from { -moz-transform: translateX(100%); } +} +@keyframes moveFromRight { + from { transform: translateX(100%); } +} + +@-webkit-keyframes moveToTop { + to { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes moveToTop { + to { -moz-transform: translateY(-100%); } +} +@keyframes moveToTop { + to { transform: translateY(-100%); } +} + +@-webkit-keyframes moveFromTop { + from { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes moveFromTop { + from { -moz-transform: translateY(-100%); } +} +@keyframes moveFromTop { + from { transform: translateY(-100%); } +} + +@-webkit-keyframes moveToBottom { + to { -webkit-transform: translateY(100%); } +} +@-moz-keyframes moveToBottom { + to { -moz-transform: translateY(100%); } +} +@keyframes moveToBottom { + to { transform: translateY(100%); } +} + +@-webkit-keyframes moveFromBottom { + from { -webkit-transform: translateY(100%); } +} +@-moz-keyframes moveFromBottom { + from { -moz-transform: translateY(100%); } +} +@keyframes moveFromBottom { + from { transform: translateY(100%); } +} + +/* fade */ + +@-webkit-keyframes fade { + to { opacity: 0.3; } +} +@-moz-keyframes fade { + to { opacity: 0.3; } +} +@keyframes fade { + to { opacity: 0.3; } +} + +/* move from / to and fade */ + +@-webkit-keyframes moveToLeftFade { + to { opacity: 0.3; -webkit-transform: translateX(-100%); } +} +@-moz-keyframes moveToLeftFade { + to { opacity: 0.3; -moz-transform: translateX(-100%); } +} +@keyframes moveToLeftFade { + to { opacity: 0.3; transform: translateX(-100%); } +} + +@-webkit-keyframes moveFromLeftFade { + from { opacity: 0.3; -webkit-transform: translateX(-100%); } +} +@-moz-keyframes moveFromLeftFade { + from { opacity: 0.3; -moz-transform: translateX(-100%); } +} +@keyframes moveFromLeftFade { + from { opacity: 0.3; transform: translateX(-100%); } +} + +@-webkit-keyframes moveToRightFade { + to { opacity: 0.3; -webkit-transform: translateX(100%); } +} +@-moz-keyframes moveToRightFade { + to { opacity: 0.3; -moz-transform: translateX(100%); } +} +@keyframes moveToRightFade { + to { opacity: 0.3; transform: translateX(100%); } +} + +@-webkit-keyframes moveFromRightFade { + from { opacity: 0.3; -webkit-transform: translateX(100%); } +} +@-moz-keyframes moveFromRightFade { + from { opacity: 0.3; -moz-transform: translateX(100%); } +} +@keyframes moveFromRightFade { + from { opacity: 0.3; transform: translateX(100%); } +} + +@-webkit-keyframes moveToTopFade { + to { opacity: 0.3; -webkit-transform: translateY(-100%); } +} +@-moz-keyframes moveToTopFade { + to { opacity: 0.3; -moz-transform: translateY(-100%); } +} +@keyframes moveToTopFade { + to { opacity: 0.3; transform: translateY(-100%); } +} + +@-webkit-keyframes moveFromTopFade { + from { opacity: 0.3; -webkit-transform: translateY(-100%); } +} +@-moz-keyframes moveFromTopFade { + from { opacity: 0.3; -moz-transform: translateY(-100%); } +} +@keyframes moveFromTopFade { + from { opacity: 0.3; transform: translateY(-100%); } +} + +@-webkit-keyframes moveToBottomFade { + to { opacity: 0.3; -webkit-transform: translateY(100%); } +} +@-moz-keyframes moveToBottomFade { + to { opacity: 0.3; -moz-transform: translateY(100%); } +} +@keyframes moveToBottomFade { + to { opacity: 0.3; transform: translateY(100%); } +} + +@-webkit-keyframes moveFromBottomFade { + from { opacity: 0.3; -webkit-transform: translateY(100%); } +} +@-moz-keyframes moveFromBottomFade { + from { opacity: 0.3; -moz-transform: translateY(100%); } +} +@keyframes moveFromBottomFade { + from { opacity: 0.3; transform: translateY(100%); } +} + +/* scale and fade */ + +.pt-page-scaleDown { + -webkit-animation: scaleDown .7s ease both; + -moz-animation: scaleDown .7s ease both; + animation: scaleDown .7s ease both; +} + +.pt-page-scaleUp { + -webkit-animation: scaleUp .7s ease both; + -moz-animation: scaleUp .7s ease both; + animation: scaleUp .7s ease both; +} + +.pt-page-scaleUpDown { + -webkit-animation: scaleUpDown .5s ease both; + -moz-animation: scaleUpDown .5s ease both; + animation: scaleUpDown .5s ease both; +} + +.pt-page-scaleDownUp { + -webkit-animation: scaleDownUp .5s ease both; + -moz-animation: scaleDownUp .5s ease both; + animation: scaleDownUp .5s ease both; +} + +.pt-page-scaleDownCenter { + -webkit-animation: scaleDownCenter .4s ease-in both; + -moz-animation: scaleDownCenter .4s ease-in both; + animation: scaleDownCenter .4s ease-in both; +} + +.pt-page-scaleUpCenter { + -webkit-animation: scaleUpCenter .4s ease-out both; + -moz-animation: scaleUpCenter .4s ease-out both; + animation: scaleUpCenter .4s ease-out both; +} + +/********************************* keyframes **************************************/ + +/* scale and fade */ + +@-webkit-keyframes scaleDown { + to { opacity: 0; -webkit-transform: scale(.8); } +} +@-moz-keyframes scaleDown { + to { opacity: 0; -moz-transform: scale(.8); } +} +@keyframes scaleDown { + to { opacity: 0; transform: scale(.8); } +} + +@-webkit-keyframes scaleUp { + from { opacity: 0; -webkit-transform: scale(.8); } +} +@-moz-keyframes scaleUp { + from { opacity: 0; -moz-transform: scale(.8); } +} +@keyframes scaleUp { + from { opacity: 0; transform: scale(.8); } +} + +@-webkit-keyframes scaleUpDown { + from { opacity: 0; -webkit-transform: scale(1.2); } +} +@-moz-keyframes scaleUpDown { + from { opacity: 0; -moz-transform: scale(1.2); } +} +@keyframes scaleUpDown { + from { opacity: 0; transform: scale(1.2); } +} + +@-webkit-keyframes scaleDownUp { + to { opacity: 0; -webkit-transform: scale(1.2); } +} +@-moz-keyframes scaleDownUp { + to { opacity: 0; -moz-transform: scale(1.2); } +} +@keyframes scaleDownUp { + to { opacity: 0; transform: scale(1.2); } +} + +@-webkit-keyframes scaleDownCenter { + to { opacity: 0; -webkit-transform: scale(.7); } +} +@-moz-keyframes scaleDownCenter { + to { opacity: 0; -moz-transform: scale(.7); } +} +@keyframes scaleDownCenter { + to { opacity: 0; transform: scale(.7); } +} + +@-webkit-keyframes scaleUpCenter { + from { opacity: 0; -webkit-transform: scale(.7); } +} +@-moz-keyframes scaleUpCenter { + from { opacity: 0; -moz-transform: scale(.7); } +} +@keyframes scaleUpCenter { + from { opacity: 0; transform: scale(.7); } +} + +/* rotate sides first and scale */ + +.pt-page-rotateRightSideFirst { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateRightSideFirst .8s both ease-in; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateRightSideFirst .8s both ease-in; + transform-origin: 0% 50%; + animation: rotateRightSideFirst .8s both ease-in; +} +.pt-page-rotateLeftSideFirst { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateLeftSideFirst .8s both ease-in; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateLeftSideFirst .8s both ease-in; + transform-origin: 100% 50%; + animation: rotateLeftSideFirst .8s both ease-in; +} +.pt-page-rotateTopSideFirst { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateTopSideFirst .8s both ease-in; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateTopSideFirst .8s both ease-in; + transform-origin: 50% 100%; + animation: rotateTopSideFirst .8s both ease-in; +} +.pt-page-rotateBottomSideFirst { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateBottomSideFirst .8s both ease-in; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateBottomSideFirst .8s both ease-in; + transform-origin: 50% 0%; + animation: rotateBottomSideFirst .8s both ease-in; +} + +/* flip */ + +.pt-page-flipOutRight { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipOutRight .5s both ease-in; + -moz-transform-origin: 50% 50%; + -moz-animation: flipOutRight .5s both ease-in; + transform-origin: 50% 50%; + animation: flipOutRight .5s both ease-in; +} +.pt-page-flipInLeft { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipInLeft .5s both ease-out; + -moz-transform-origin: 50% 50%; + -moz-animation: flipInLeft .5s both ease-out; + transform-origin: 50% 50%; + animation: flipInLeft .5s both ease-out; +} +.pt-page-flipOutLeft { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipOutLeft .5s both ease-in; + -moz-transform-origin: 50% 50%; + -moz-animation: flipOutLeft .5s both ease-in; + transform-origin: 50% 50%; + animation: flipOutLeft .5s both ease-in; +} +.pt-page-flipInRight { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipInRight .5s both ease-out; + -moz-transform-origin: 50% 50%; + -moz-animation: flipInRight .5s both ease-out; + transform-origin: 50% 50%; + animation: flipInRight .5s both ease-out; +} +.pt-page-flipOutTop { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipOutTop .5s both ease-in; + -moz-transform-origin: 50% 50%; + -moz-animation: flipOutTop .5s both ease-in; + transform-origin: 50% 50%; + animation: flipOutTop .5s both ease-in; +} +.pt-page-flipInBottom { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipInBottom .5s both ease-out; + -moz-transform-origin: 50% 50%; + -moz-animation: flipInBottom .5s both ease-out; + transform-origin: 50% 50%; + animation: flipInBottom .5s both ease-out; +} +.pt-page-flipOutBottom { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipOutBottom .5s both ease-in; + -moz-transform-origin: 50% 50%; + -moz-animation: flipOutBottom .5s both ease-in; + transform-origin: 50% 50%; + animation: flipOutBottom .5s both ease-in; +} +.pt-page-flipInTop { + -webkit-transform-origin: 50% 50%; + -webkit-animation: flipInTop .5s both ease-out; + -moz-transform-origin: 50% 50%; + -moz-animation: flipInTop .5s both ease-out; + transform-origin: 50% 50%; + animation: flipInTop .5s both ease-out; +} + +/* rotate fall */ + +.pt-page-rotateFall { + -webkit-transform-origin: 0% 0%; + -webkit-animation: rotateFall 1s both ease-in; + -moz-transform-origin: 0% 0%; + -moz-animation: rotateFall 1s both ease-in; + transform-origin: 0% 0%; + animation: rotateFall 1s both ease-in; +} + +/* rotate newspaper */ +.pt-page-rotateOutNewspaper { + -webkit-transform-origin: 50% 50%; + -webkit-animation: rotateOutNewspaper .5s both ease-in; + -moz-transform-origin: 50% 50%; + -moz-animation: rotateOutNewspaper .5s both ease-in; + transform-origin: 50% 50%; + animation: rotateOutNewspaper .5s both ease-in; +} +.pt-page-rotateInNewspaper { + -webkit-transform-origin: 50% 50%; + -webkit-animation: rotateInNewspaper .5s both ease-out; + -moz-transform-origin: 50% 50%; + -moz-animation: rotateInNewspaper .5s both ease-out; + transform-origin: 50% 50%; + animation: rotateInNewspaper .5s both ease-out; +} + +/* push */ +.pt-page-rotatePushLeft { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotatePushLeft .8s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotatePushLeft .8s both ease; + transform-origin: 0% 50%; + animation: rotatePushLeft .8s both ease; +} +.pt-page-rotatePushRight { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotatePushRight .8s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotatePushRight .8s both ease; + transform-origin: 100% 50%; + animation: rotatePushRight .8s both ease; +} +.pt-page-rotatePushTop { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotatePushTop .8s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotatePushTop .8s both ease; + transform-origin: 50% 0%; + animation: rotatePushTop .8s both ease; +} +.pt-page-rotatePushBottom { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotatePushBottom .8s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotatePushBottom .8s both ease; + transform-origin: 50% 100%; + animation: rotatePushBottom .8s both ease; +} + +/* pull */ +.pt-page-rotatePullRight { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotatePullRight .5s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotatePullRight .5s both ease; + transform-origin: 100% 50%; + animation: rotatePullRight .5s both ease; +} +.pt-page-rotatePullLeft { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotatePullLeft .5s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotatePullLeft .5s both ease; + transform-origin: 0% 50%; + animation: rotatePullLeft .5s both ease; +} +.pt-page-rotatePullTop { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotatePullTop .5s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotatePullTop .5s both ease; + transform-origin: 50% 0%; + animation: rotatePullTop .5s both ease; +} +.pt-page-rotatePullBottom { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotatePullBottom .5s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotatePullBottom .5s both ease; + transform-origin: 50% 100%; + animation: rotatePullBottom .5s both ease; +} + +/* fold */ +.pt-page-rotateFoldRight { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateFoldRight .7s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateFoldRight .7s both ease; + transform-origin: 0% 50%; + animation: rotateFoldRight .7s both ease; +} +.pt-page-rotateFoldLeft { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateFoldLeft .7s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateFoldLeft .7s both ease; + transform-origin: 100% 50%; + animation: rotateFoldLeft .7s both ease; +} +.pt-page-rotateFoldTop { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateFoldTop .7s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateFoldTop .7s both ease; + transform-origin: 50% 100%; + animation: rotateFoldTop .7s both ease; +} +.pt-page-rotateFoldBottom { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateFoldBottom .7s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateFoldBottom .7s both ease; + transform-origin: 50% 0%; + animation: rotateFoldBottom .7s both ease; +} + +/* unfold */ +.pt-page-rotateUnfoldLeft { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateUnfoldLeft .7s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateUnfoldLeft .7s both ease; + transform-origin: 100% 50%; + animation: rotateUnfoldLeft .7s both ease; +} +.pt-page-rotateUnfoldRight { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateUnfoldRight .7s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateUnfoldRight .7s both ease; + transform-origin: 0% 50%; + animation: rotateUnfoldRight .7s both ease; +} +.pt-page-rotateUnfoldTop { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateUnfoldTop .7s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateUnfoldTop .7s both ease; + transform-origin: 50% 100%; + animation: rotateUnfoldTop .7s both ease; +} +.pt-page-rotateUnfoldBottom { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateUnfoldBottom .7s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateUnfoldBottom .7s both ease; + transform-origin: 50% 0%; + animation: rotateUnfoldBottom .7s both ease; +} + +/* room walls */ +.pt-page-rotateRoomLeftOut { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateRoomLeftOut .8s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateRoomLeftOut .8s both ease; + transform-origin: 100% 50%; + animation: rotateRoomLeftOut .8s both ease; +} +.pt-page-rotateRoomLeftIn { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateRoomLeftIn .8s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateRoomLeftIn .8s both ease; + transform-origin: 0% 50%; + animation: rotateRoomLeftIn .8s both ease; +} +.pt-page-rotateRoomRightOut { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateRoomRightOut .8s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateRoomRightOut .8s both ease; + transform-origin: 0% 50%; + animation: rotateRoomRightOut .8s both ease; +} +.pt-page-rotateRoomRightIn { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateRoomRightIn .8s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateRoomRightIn .8s both ease; + transform-origin: 100% 50%; + animation: rotateRoomRightIn .8s both ease; +} +.pt-page-rotateRoomTopOut { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateRoomTopOut .8s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateRoomTopOut .8s both ease; + transform-origin: 50% 100%; + animation: rotateRoomTopOut .8s both ease; +} +.pt-page-rotateRoomTopIn { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateRoomTopIn .8s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateRoomTopIn .8s both ease; + transform-origin: 50% 0%; + animation: rotateRoomTopIn .8s both ease; +} +.pt-page-rotateRoomBottomOut { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateRoomBottomOut .8s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateRoomBottomOut .8s both ease; + transform-origin: 50% 0%; + animation: rotateRoomBottomOut .8s both ease; +} +.pt-page-rotateRoomBottomIn { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateRoomBottomIn .8s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateRoomBottomIn .8s both ease; + transform-origin: 50% 100%; + animation: rotateRoomBottomIn .8s both ease; +} + +/* cube */ +.pt-page-rotateCubeLeftOut { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateCubeLeftOut .6s both ease-in; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateCubeLeftOut .6s both ease-in; + transform-origin: 100% 50%; + animation: rotateCubeLeftOut .6s both ease-in; +} +.pt-page-rotateCubeLeftIn { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateCubeLeftIn .6s both ease-in; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateCubeLeftIn .6s both ease-in; + transform-origin: 0% 50%; + animation: rotateCubeLeftIn .6s both ease-in; +} +.pt-page-rotateCubeRightOut { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateCubeRightOut .6s both ease-in; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateCubeRightOut .6s both ease-in; + transform-origin: 0% 50%; + animation: rotateCubeRightOut .6s both ease-in; +} +.pt-page-rotateCubeRightIn { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateCubeRightIn .6s both ease-in; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateCubeRightIn .6s both ease-in; + transform-origin: 100% 50%; + animation: rotateCubeRightIn .6s both ease-in; +} +.pt-page-rotateCubeTopOut { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateCubeTopOut .6s both ease-in; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateCubeTopOut .6s both ease-in; + transform-origin: 50% 100%; + animation: rotateCubeTopOut .6s both ease-in; +} +.pt-page-rotateCubeTopIn { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateCubeTopIn .6s both ease-in; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateCubeTopIn .6s both ease-in; + transform-origin: 50% 0%; + animation: rotateCubeTopIn .6s both ease-in; +} +.pt-page-rotateCubeBottomOut { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateCubeBottomOut .6s both ease-in; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateCubeBottomOut .6s both ease-in; + transform-origin: 50% 0%; + animation: rotateCubeBottomOut .6s both ease-in; +} +.pt-page-rotateCubeBottomIn { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateCubeBottomIn .6s both ease-in; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateCubeBottomIn .6s both ease-in; + transform-origin: 50% 100%; + animation: rotateCubeBottomIn .6s both ease-in; +} + +/* carousel */ +.pt-page-rotateCarouselLeftOut { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateCarouselLeftOut .8s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateCarouselLeftOut .8s both ease; + transform-origin: 100% 50%; + animation: rotateCarouselLeftOut .8s both ease; +} +.pt-page-rotateCarouselLeftIn { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateCarouselLeftIn .8s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateCarouselLeftIn .8s both ease; + transform-origin: 0% 50%; + animation: rotateCarouselLeftIn .8s both ease; +} +.pt-page-rotateCarouselRightOut { + -webkit-transform-origin: 0% 50%; + -webkit-animation: rotateCarouselRightOut .8s both ease; + -moz-transform-origin: 0% 50%; + -moz-animation: rotateCarouselRightOut .8s both ease; + transform-origin: 0% 50%; + animation: rotateCarouselRightOut .8s both ease; +} +.pt-page-rotateCarouselRightIn { + -webkit-transform-origin: 100% 50%; + -webkit-animation: rotateCarouselRightIn .8s both ease; + -moz-transform-origin: 100% 50%; + -moz-animation: rotateCarouselRightIn .8s both ease; + transform-origin: 100% 50%; + animation: rotateCarouselRightIn .8s both ease; +} +.pt-page-rotateCarouselTopOut { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateCarouselTopOut .8s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateCarouselTopOut .8s both ease; + transform-origin: 50% 100%; + animation: rotateCarouselTopOut .8s both ease; +} +.pt-page-rotateCarouselTopIn { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateCarouselTopIn .8s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateCarouselTopIn .8s both ease; + transform-origin: 50% 0%; + animation: rotateCarouselTopIn .8s both ease; +} +.pt-page-rotateCarouselBottomOut { + -webkit-transform-origin: 50% 0%; + -webkit-animation: rotateCarouselBottomOut .8s both ease; + -moz-transform-origin: 50% 0%; + -moz-animation: rotateCarouselBottomOut .8s both ease; + transform-origin: 50% 0%; + animation: rotateCarouselBottomOut .8s both ease; +} +.pt-page-rotateCarouselBottomIn { + -webkit-transform-origin: 50% 100%; + -webkit-animation: rotateCarouselBottomIn .8s both ease; + -moz-transform-origin: 50% 100%; + -moz-animation: rotateCarouselBottomIn .8s both ease; + transform-origin: 50% 100%; + animation: rotateCarouselBottomIn .8s both ease; +} + +/* sides */ +.pt-page-rotateSidesOut { + -webkit-transform-origin: -50% 50%; + -webkit-animation: rotateSidesOut .5s both ease-in; + -moz-transform-origin: -50% 50%; + -moz-animation: rotateSidesOut .5s both ease-in; + transform-origin: -50% 50%; + animation: rotateSidesOut .5s both ease-in; +} +.pt-page-rotateSidesIn { + -webkit-transform-origin: 150% 50%; + -webkit-animation: rotateSidesIn .5s both ease-out; + -moz-transform-origin: 150% 50%; + -moz-animation: rotateSidesIn .5s both ease-out; + transform-origin: 150% 50%; + animation: rotateSidesIn .5s both ease-out; +} + +/* slide */ +.pt-page-rotateSlideOut { + -webkit-animation: rotateSlideOut 1s both ease; + -moz-animation: rotateSlideOut 1s both ease; + animation: rotateSlideOut 1s both ease; +} +.pt-page-rotateSlideIn { + -webkit-animation: rotateSlideIn 1s both ease; + -moz-animation: rotateSlideIn 1s both ease; + animation: rotateSlideIn 1s both ease; +} + +/********************************* keyframes **************************************/ + +/* rotate sides first and scale */ + +@-webkit-keyframes rotateRightSideFirst { + 40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } + 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@-moz-keyframes rotateRightSideFirst { + 40% { -moz-transform: rotateY(15deg); opacity: .8; -moz-animation-timing-function: ease-out; } + 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@keyframes rotateRightSideFirst { + 40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } +} + +@-webkit-keyframes rotateLeftSideFirst { + 40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } + 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@-moz-keyframes rotateLeftSideFirst { + 40% { -moz-transform: rotateY(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; } + 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@keyframes rotateLeftSideFirst { + 40% { transform: rotateY(-15deg); opacity: .8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } +} + +@-webkit-keyframes rotateTopSideFirst { + 40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } + 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@-moz-keyframes rotateTopSideFirst { + 40% { -moz-transform: rotateX(15deg); opacity: .8; -moz-animation-timing-function: ease-out; } + 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@keyframes rotateTopSideFirst { + 40% { transform: rotateX(15deg); opacity: .8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } +} + +@-webkit-keyframes rotateBottomSideFirst { + 40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } + 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@-moz-keyframes rotateBottomSideFirst { + 40% { -moz-transform: rotateX(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; } + 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } +} +@keyframes rotateBottomSideFirst { + 40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; } + 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } +} + +/* flip */ + +@-webkit-keyframes flipOutRight { + to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} +@-moz-keyframes flipOutRight { + to { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} +@keyframes flipOutRight { + to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipInLeft { + from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} +@-moz-keyframes flipInLeft { + from { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} +@keyframes flipInLeft { + from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipOutLeft { + to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} +@-moz-keyframes flipOutLeft { + to { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} +@keyframes flipOutLeft { + to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipInRight { + from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} +@-moz-keyframes flipInRight { + from { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} +@keyframes flipInRight { + from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipOutTop { + to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} +@-moz-keyframes flipOutTop { + to { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} +@keyframes flipOutTop { + to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipInBottom { + from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} +@-moz-keyframes flipInBottom { + from { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} +@keyframes flipInBottom { + from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipOutBottom { + to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} +@-moz-keyframes flipOutBottom { + to { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} +@keyframes flipOutBottom { + to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } +} + +@-webkit-keyframes flipInTop { + from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} +@-moz-keyframes flipInTop { + from { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} +@keyframes flipInTop { + from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } +} + +/* fall */ + +@-webkit-keyframes rotateFall { + 0% { -webkit-transform: rotateZ(0deg); } + 20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; } + 40% { -webkit-transform: rotateZ(17deg); } + 60% { -webkit-transform: rotateZ(16deg); } + 100% { -webkit-transform: translateY(100%) rotateZ(17deg); } +} +@-moz-keyframes rotateFall { + 0% { -moz-transform: rotateZ(0deg); } + 20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; } + 40% { -moz-transform: rotateZ(17deg); } + 60% { -moz-transform: rotateZ(16deg); } + 100% { -moz-transform: translateY(100%) rotateZ(17deg); } +} +@keyframes rotateFall { + 0% { transform: rotateZ(0deg); } + 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } + 40% { transform: rotateZ(17deg); } + 60% { transform: rotateZ(16deg); } + 100% { transform: translateY(100%) rotateZ(17deg); } +} + +/* newspaper */ + +@-webkit-keyframes rotateOutNewspaper { + to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } +} +@-moz-keyframes rotateOutNewspaper { + to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } +} +@keyframes rotateOutNewspaper { + to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } +} + +@-webkit-keyframes rotateInNewspaper { + from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } +} +@-moz-keyframes rotateInNewspaper { + from { -moz-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } +} +@keyframes rotateInNewspaper { + from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } +} + +/* push */ + +@-webkit-keyframes rotatePushLeft { + to { opacity: 0; -webkit-transform: rotateY(90deg); } +} +@-moz-keyframes rotatePushLeft { + to { opacity: 0; -moz-transform: rotateY(90deg); } +} +@keyframes rotatePushLeft { + to { opacity: 0; transform: rotateY(90deg); } +} + +@-webkit-keyframes rotatePushRight { + to { opacity: 0; -webkit-transform: rotateY(-90deg); } +} +@-moz-keyframes rotatePushRight { + to { opacity: 0; -moz-transform: rotateY(-90deg); } +} +@keyframes rotatePushRight { + to { opacity: 0; transform: rotateY(-90deg); } +} + +@-webkit-keyframes rotatePushTop { + to { opacity: 0; -webkit-transform: rotateX(-90deg); } +} +@-moz-keyframes rotatePushTop { + to { opacity: 0; -moz-transform: rotateX(-90deg); } +} +@keyframes rotatePushTop { + to { opacity: 0; transform: rotateX(-90deg); } +} + +@-webkit-keyframes rotatePushBottom { + to { opacity: 0; -webkit-transform: rotateX(90deg); } +} +@-moz-keyframes rotatePushBottom { + to { opacity: 0; -moz-transform: rotateX(90deg); } +} +@keyframes rotatePushBottom { + to { opacity: 0; transform: rotateX(90deg); } +} + +/* pull */ + +@-webkit-keyframes rotatePullRight { + from { opacity: 0; -webkit-transform: rotateY(-90deg); } +} +@-moz-keyframes rotatePullRight { + from { opacity: 0; -moz-transform: rotateY(-90deg); } +} +@keyframes rotatePullRight { + from { opacity: 0; transform: rotateY(-90deg); } +} + +@-webkit-keyframes rotatePullLeft { + from { opacity: 0; -webkit-transform: rotateY(90deg); } +} +@-moz-keyframes rotatePullLeft { + from { opacity: 0; -moz-transform: rotateY(90deg); } +} +@keyframes rotatePullLeft { + from { opacity: 0; transform: rotateY(90deg); } +} + +@-webkit-keyframes rotatePullTop { + from { opacity: 0; -webkit-transform: rotateX(-90deg); } +} +@-moz-keyframes rotatePullTop { + from { opacity: 0; -moz-transform: rotateX(-90deg); } +} +@keyframes rotatePullTop { + from { opacity: 0; transform: rotateX(-90deg); } +} + +@-webkit-keyframes rotatePullBottom { + from { opacity: 0; -webkit-transform: rotateX(90deg); } +} +@-moz-keyframes rotatePullBottom { + from { opacity: 0; -moz-transform: rotateX(90deg); } +} +@keyframes rotatePullBottom { + from { opacity: 0; transform: rotateX(90deg); } +} + +/* fold */ + +@-webkit-keyframes rotateFoldRight { + to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } +} +@-moz-keyframes rotateFoldRight { + to { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); } +} +@keyframes rotateFoldRight { + to { opacity: 0; transform: translateX(100%) rotateY(90deg); } +} + +@-webkit-keyframes rotateFoldLeft { + to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } +} +@-moz-keyframes rotateFoldLeft { + to { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); } +} +@keyframes rotateFoldLeft { + to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } +} + +@-webkit-keyframes rotateFoldTop { + to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } +} +@-moz-keyframes rotateFoldTop { + to { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); } +} +@keyframes rotateFoldTop { + to { opacity: 0; transform: translateY(-100%) rotateX(90deg); } +} + +@-webkit-keyframes rotateFoldBottom { + to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } +} +@-moz-keyframes rotateFoldBottom { + to { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); } +} +@keyframes rotateFoldBottom { + to { opacity: 0; transform: translateY(100%) rotateX(-90deg); } +} + +/* unfold */ + +@-webkit-keyframes rotateUnfoldLeft { + from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } +} +@-moz-keyframes rotateUnfoldLeft { + from { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); } +} +@keyframes rotateUnfoldLeft { + from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } +} + +@-webkit-keyframes rotateUnfoldRight { + from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } +} +@-moz-keyframes rotateUnfoldRight { + from { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); } +} +@keyframes rotateUnfoldRight { + from { opacity: 0; transform: translateX(100%) rotateY(90deg); } +} + +@-webkit-keyframes rotateUnfoldTop { + from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } +} +@-moz-keyframes rotateUnfoldTop { + from { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); } +} +@keyframes rotateUnfoldTop { + from { opacity: 0; transform: translateY(-100%) rotateX(90deg); } +} + +@-webkit-keyframes rotateUnfoldBottom { + from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } +} +@-moz-keyframes rotateUnfoldBottom { + from { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); } +} +@keyframes rotateUnfoldBottom { + from { opacity: 0; transform: translateY(100%) rotateX(-90deg); } +} + +/* room walls */ + +@-webkit-keyframes rotateRoomLeftOut { + to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } +} +@-moz-keyframes rotateRoomLeftOut { + to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); } +} +@keyframes rotateRoomLeftOut { + to { opacity: .3; transform: translateX(-100%) rotateY(90deg); } +} + +@-webkit-keyframes rotateRoomLeftIn { + from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } +} +@-moz-keyframes rotateRoomLeftIn { + from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); } +} +@keyframes rotateRoomLeftIn { + from { opacity: .3; transform: translateX(100%) rotateY(-90deg); } +} + +@-webkit-keyframes rotateRoomRightOut { + to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } +} +@-moz-keyframes rotateRoomRightOut { + to { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); } +} +@keyframes rotateRoomRightOut { + to { opacity: .3; transform: translateX(100%) rotateY(-90deg); } +} + +@-webkit-keyframes rotateRoomRightIn { + from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } +} +@-moz-keyframes rotateRoomRightIn { + from { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); } +} +@keyframes rotateRoomRightIn { + from { opacity: .3; transform: translateX(-100%) rotateY(90deg); } +} + +@-webkit-keyframes rotateRoomTopOut { + to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } +} +@-moz-keyframes rotateRoomTopOut { + to { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); } +} +@keyframes rotateRoomTopOut { + to { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } +} + +@-webkit-keyframes rotateRoomTopIn { + from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } +} +@-moz-keyframes rotateRoomTopIn { + from { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); } +} +@keyframes rotateRoomTopIn { + from { opacity: .3; transform: translateY(100%) rotateX(90deg); } +} + +@-webkit-keyframes rotateRoomBottomOut { + to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } +} +@-moz-keyframes rotateRoomBottomOut { + to { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); } +} +@keyframes rotateRoomBottomOut { + to { opacity: .3; transform: translateY(100%) rotateX(90deg); } +} + +@-webkit-keyframes rotateRoomBottomIn { + from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } +} +@-moz-keyframes rotateRoomBottomIn { + from { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); } +} +@keyframes rotateRoomBottomIn { + from { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } +} + +/* cube */ + +@-webkit-keyframes rotateCubeLeftOut { + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } + 100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); } +} +@-moz-keyframes rotateCubeLeftOut { + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } + 100% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); } +} +@keyframes rotateCubeLeftOut { + 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } + 100% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); } +} + +@-webkit-keyframes rotateCubeLeftIn { + 0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); } + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } +} +@-moz-keyframes rotateCubeLeftIn { + 0% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); } + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } +} +@keyframes rotateCubeLeftIn { + 0% { opacity: .3; transform: translateX(100%) rotateY(90deg); } + 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } +} + +@-webkit-keyframes rotateCubeRightOut { + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } + 100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); } +} +@-moz-keyframes rotateCubeRightOut { + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } + 100% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); } +} +@keyframes rotateCubeRightOut { + 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } + 100% { opacity: .3; transform: translateX(100%) rotateY(90deg); } +} + +@-webkit-keyframes rotateCubeRightIn { + 0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); } + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } +} +@-moz-keyframes rotateCubeRightIn { + 0% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); } + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } +} +@keyframes rotateCubeRightIn { + 0% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); } + 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } +} + +@-webkit-keyframes rotateCubeTopOut { + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } + 100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); } +} +@-moz-keyframes rotateCubeTopOut { + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } + 100% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); } +} +@keyframes rotateCubeTopOut { + 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } + 100% { opacity: .3; transform: translateY(-100%) rotateX(90deg); } +} + +@-webkit-keyframes rotateCubeTopIn { + 0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); } + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } +} +@-moz-keyframes rotateCubeTopIn { + 0% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); } + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } +} +@keyframes rotateCubeTopIn { + 0% { opacity: .3; transform: translateY(100%) rotateX(-90deg); } + 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } +} + +@-webkit-keyframes rotateCubeBottomOut { + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } + 100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); } +} +@-moz-keyframes rotateCubeBottomOut { + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } + 100% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); } +} +@keyframes rotateCubeBottomOut { + 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } + 100% { opacity: .3; transform: translateY(100%) rotateX(-90deg); } +} + +@-webkit-keyframes rotateCubeBottomIn { + 0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); } + 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } +} +@-moz-keyframes rotateCubeBottomIn { + 0% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); } + 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } +} +@keyframes rotateCubeBottomIn { + 0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); } + 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } +} + +/* carousel */ + +@-webkit-keyframes rotateCarouselLeftOut { + to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); } +} +@-moz-keyframes rotateCarouselLeftOut { + to { opacity: .3; -moz-transform: translateX(-150%) scale(.4) rotateY(-65deg); } +} +@keyframes rotateCarouselLeftOut { + to { opacity: .3; transform: translateX(-150%) scale(.4) rotateY(-65deg); } +} + +@-webkit-keyframes rotateCarouselLeftIn { + from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } +} +@-moz-keyframes rotateCarouselLeftIn { + from { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); } +} +@keyframes rotateCarouselLeftIn { + from { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } +} + +@-webkit-keyframes rotateCarouselRightOut { + to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } +} +@-moz-keyframes rotateCarouselRightOut { + to { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); } +} +@keyframes rotateCarouselRightOut { + to { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } +} + +@-webkit-keyframes rotateCarouselRightIn { + from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); } +} +@-moz-keyframes rotateCarouselRightIn { + from { opacity: .3; -moz-transform: translateX(-200%) scale(.4) rotateY(-65deg); } +} +@keyframes rotateCarouselRightIn { + from { opacity: .3; transform: translateX(-200%) scale(.4) rotateY(-65deg); } +} + +@-webkit-keyframes rotateCarouselTopOut { + to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } +} +@-moz-keyframes rotateCarouselTopOut { + to { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); } +} +@keyframes rotateCarouselTopOut { + to { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } +} + +@-webkit-keyframes rotateCarouselTopIn { + from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } +} +@-moz-keyframes rotateCarouselTopIn { + from { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); } +} +@keyframes rotateCarouselTopIn { + from { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } +} + +@-webkit-keyframes rotateCarouselBottomOut { + to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } +} +@-moz-keyframes rotateCarouselBottomOut { + to { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); } +} +@keyframes rotateCarouselBottomOut { + to { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } +} + +@-webkit-keyframes rotateCarouselBottomIn { + from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } +} +@-moz-keyframes rotateCarouselBottomIn { + from { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); } +} +@keyframes rotateCarouselBottomIn { + from { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } +} + +/* sides */ + +@-webkit-keyframes rotateSidesOut { + to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); } +} +@-moz-keyframes rotateSidesOut { + to { opacity: 0; -moz-transform: translateZ(-500px) rotateY(90deg); } +} +@keyframes rotateSidesOut { + to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } +} + +@-webkit-keyframes rotateSidesIn { + from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); } +} +@-moz-keyframes rotateSidesIn { + from { opacity: 0; -moz-transform: translateZ(-500px) rotateY(-90deg); } +} +@keyframes rotateSidesIn { + from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } +} + +/* slide */ + +@-webkit-keyframes rotateSlideOut { + 25% { opacity: .5; -webkit-transform: translateZ(-500px); } + 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } + 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } +} +@-moz-keyframes rotateSlideOut { + 25% { opacity: .5; -moz-transform: translateZ(-500px); } + 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } + 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } +} +@keyframes rotateSlideOut { + 25% { opacity: .5; transform: translateZ(-500px); } + 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } + 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } +} + +@-webkit-keyframes rotateSlideIn { + 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } + 75% { opacity: .5; -webkit-transform: translateZ(-500px); } + 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } +} +@-moz-keyframes rotateSlideIn { + 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } + 75% { opacity: .5; -moz-transform: translateZ(-500px); } + 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } +} +@keyframes rotateSlideIn { + 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } + 75% { opacity: .5; transform: translateZ(-500px); } + 100% { opacity: 1; transform: translateZ(0) translateX(0); } +} + +/* animation delay classes */ + +.pt-page-delay100 { + -webkit-animation-delay: .1s; + -moz-animation-delay: .1s; + animation-delay: .1s; +} +.pt-page-delay180 { + -webkit-animation-delay: .180s; + -moz-animation-delay: .180s; + animation-delay: .180s; +} +.pt-page-delay200 { + -webkit-animation-delay: .2s; + -moz-animation-delay: .2s; + animation-delay: .2s; +} +.pt-page-delay300 { + -webkit-animation-delay: .3s; + -moz-animation-delay: .3s; + animation-delay: .3s; +} +.pt-page-delay400 { + -webkit-animation-delay: .4s; + -moz-animation-delay: .4s; + animation-delay: .4s; +} +.pt-page-delay500 { + -webkit-animation-delay: .5s; + -moz-animation-delay: .5s; + animation-delay: .5s; +} +.pt-page-delay700 { + -webkit-animation-delay: .7s; + -moz-animation-delay: .7s; + animation-delay: .7s; +} +.pt-page-delay1000 { + -webkit-animation-delay: 1s; + -moz-animation-delay: 1s; + animation-delay: 1s; +} \ No newline at end of file diff --git a/_old/ifr/css/component.css b/_old/ifr/css/component.css new file mode 100644 index 0000000..29146c5 --- /dev/null +++ b/_old/ifr/css/component.css @@ -0,0 +1,206 @@ +html, body { height: 100%; } + +.pt-perspective { + position: relative; + width: 100%; + height: 100%; + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + perspective: 1200px; +} + +.pt-page { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + visibility: hidden; + overflow: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.pt-page-current, +.no-js .pt-page { + visibility: visible; + z-index: 1; +} + +.no-js body { + overflow: auto; +} + +.pt-page-ontop { + z-index: 999; +} + +/* Text Styles, Colors, Backgrounds */ + +.pt-page h1 { + position: absolute; + font-weight: 300; + font-size: 4.4em; + line-height: 1; + letter-spacing: 6px; + margin: 0; + top: 12%; + width: 100%; + text-align: center; + text-transform: uppercase; + word-spacing: -0.3em; +} + +.pt-page h1 span { + font-family: 'Satisfy', serif; + font-weight: 400; + font-size: 40%; + text-transform: none; + word-spacing: 0; + letter-spacing: 0; + display: block; + opacity: 0.4; +} + +.pt-page h1 strong { + color: rgba(0,0,0,0.1); +} + +.pt-page-1 { + background: #0ac2d2; +} + +.pt-page-2 { + background: #7bb7fa; +} + +.pt-page-3 { + background: #60d7a9; +} + +.pt-page-4 { + background: #fdc162; +} + +.pt-page-5 { + background: #fd6a62; +} + +.pt-page-6 { + background: #f68dbb; +} + +/* Triggers (menu and button) */ + +.pt-triggers { + position: absolute; + width: 300px; + z-index: 999999; + top: 12%; + left: 50%; + margin-top: 130px; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.no-js .pt-triggers { + display: none; +} + +.pt-triggers .dl-menuwrapper button, +.pt-touch-button { + border: none; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + margin: 10px 0 20px; + padding: 0px 20px; + line-height: 50px; + height: 50px; + letter-spacing: 1px; + width: 100%; + cursor: pointer; + display: block; + font-family: 'Lato', Calibri, Arial, sans-serif; + box-shadow: 0 3px 0 rgba(0,0,0,0.1); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.pt-touch-button { + background: #fff; + color: #aaa; +} + +.pt-triggers .dl-menuwrapper button { + margin-bottom: 0; +} + +.pt-touch-button:active { + box-shadow: 0 1px 0 rgba(0,0,0,0.1); +} + +.touch .pt-triggers .dl-menuwrapper { + display: none; +} + +.pt-message { + display: none; + position: absolute; + z-index: 99999; + bottom: 0; + left: 0; + width: 100%; + background: #da475c; + color: #fff; + text-align: center; +} + +.pt-message p { + margin: 0; + line-height: 60px; + font-size: 26px; +} + +.no-cssanimations .pt-message { + display: block; +} + +@media screen and (max-width: 47.4375em) { + .pt-page h1 { + font-size: 3em; + } + + .pt-triggers .dl-menuwrapper { + display: none; + } +} + +@media screen and (max-height: 45.9em) { + .pt-triggers .dl-menuwrapper li a { + padding-top: 2px; + padding-bottom: 2px; + } + .pt-triggers .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { + line-height: 24px; + } +} + +@media screen and (max-height: 38em) { + .pt-triggers .dl-menuwrapper { + display: none; + } +} diff --git a/_old/ifr/css/default.css b/_old/ifr/css/default.css new file mode 100644 index 0000000..a9d8133 --- /dev/null +++ b/_old/ifr/css/default.css @@ -0,0 +1,104 @@ +/* General Demo Style */ +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Satisfy); + +@font-face { + font-family: 'codropsicons'; + src:url('../fonts/codropsicons/codropsicons.eot'); + src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), + url('../fonts/codropsicons/codropsicons.woff') format('woff'), + url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), + url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); + font-weight: normal; + font-style: normal; +} + +*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +body, html { font-size: 100%; padding: 0; margin: 0;} + +/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, .clearfix:after { content: " "; display: table; } +.clearfix:after { clear: both; } + +body { + font-family: 'Lato', Calibri, Arial, sans-serif; + color: #fff; + background: #333; + overflow: hidden; +} + +a { + color: #ddd; + text-decoration: none; +} + +a:hover { + color: #fff; +} + +/* Header Style */ +.codrops-top { + background: #fff; + background: rgba(255, 255, 255, 0.1); + text-transform: uppercase; + position: fixed; + width: 100%; + font-size: 0.68em; + line-height: 2.2; + z-index: 50000; + top: 0; + left: 0; +} + +.codrops-top a { + padding: 0 1em; + letter-spacing: 0.1em; + color: #fff; + display: inline-block; +} + +.codrops-top a:hover { + background: rgba(255,255,255,0.2); +} + +.codrops-top span.right { + float: right; +} + +.codrops-top span.right a { + float: left; + display: block; +} + +.codrops-icon:before { + font-family: 'codropsicons'; + margin: 0 4px; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.codrops-icon-drop:before { + content: "\e001"; +} +.codrops-icon-prev:before { + content: "\e004"; +} +.codrops-icon-archive:before { + content: "\e002"; +} +.codrops-icon-next:before { + content: "\e000"; +} +.codrops-icon-about:before { + content: "\e003"; +} + +@media screen and (max-width: 25em) { + .codrops-icon span { + display: none; + } +} + diff --git a/_old/ifr/css/multilevelmenu.css b/_old/ifr/css/multilevelmenu.css new file mode 100644 index 0000000..3405716 --- /dev/null +++ b/_old/ifr/css/multilevelmenu.css @@ -0,0 +1,955 @@ +@font-face { + font-family: 'icomoon'; + src:url('../fonts/menuicons/icomoon.eot'); + src:url('../fonts/menuicons/icomoon.eot?#iefix') format('embedded-opentype'), + url('../fonts/menuicons/icomoon.woff') format('woff'), + url('../fonts/menuicons/icomoon.ttf') format('truetype'), + url('../fonts/menuicons/icomoon.svg#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +.dl-menuwrapper { + width: 300px; + position: relative; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + -webkit-perspective-origin: 50% 200%; + -moz-perspective-origin: 50% 200%; + perspective-origin: 50% 200%; +} + +.dl-menuwrapper:first-child { + margin-right: 100px; +} + +.dl-menuwrapper button { + display: block; + width: 100%; + margin: 0; + border: none; + overflow: hidden; + position: relative; + cursor: pointer; + outline: none; +} + +.dl-menuwrapper ul { + padding: 0; + list-style: none; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.dl-menuwrapper li { + position: relative; +} + +.dl-menuwrapper li a { + display: block; + position: relative; + padding: 7px 10px; + font-size: 13px; + line-height: 20px; + font-weight: 700; + outline: none; + text-transform: uppercase; + letter-spacing: 1px; +} + +.dl-menuwrapper button, +.dl-menuwrapper li a { + background: #fff; + color: #aaa; +} + +.no-touch .dl-menuwrapper li a:hover { + background: #f8f8f8; +} + +.dl-menuwrapper li.dl-back > a { + padding-left: 30px; + background: #f2f2f2; +} + +.dl-menuwrapper li.dl-back:after, +.dl-menuwrapper li > a:not(:only-child):after, +.dl-menuwrapper button:after { + position: absolute; + top: 0; + line-height: 33px; + color: #ddd; + font-family: 'icomoon'; + speak: none; + -webkit-font-smoothing: antialiased; + content: "\e000"; +} + +.dl-menuwrapper button:after { + line-height: 50px; + right: 15px; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.dl-menuwrapper li.dl-back:after { + left: 10px; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.dl-menuwrapper li > a:after { + right: 10px; + color: rgba(0,0,0,0.15); +} + +.dl-menuwrapper .dl-menu { + margin: 5px 0 0 0; + position: absolute; + width: 100%; + opacity: 0; + pointer-events: none; + box-shadow: 0 3px 0 rgba(0,0,0,0.1); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + transform: translateY(10px); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; +} + +.dl-menuwrapper .dl-menu.dl-menu-toggle { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.dl-menuwrapper .dl-menu.dl-menuopen { + opacity: 1; + pointer-events: auto; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + transform: translateY(0px); +} + +/* Hide the inner submenus */ +.dl-menuwrapper li .dl-submenu { + display: none; +} + +/* +When a submenu is openend, we will hide all li siblings. +For that we give a class to the parent menu called "dl-subview". +We also hide the submenu link. +The opened submenu will get the class "dl-subviewopen". +All this is done for any sub-level being entered. +*/ +.dl-menu.dl-subview li, +.dl-menu.dl-subview li.dl-subviewopen > a, +.dl-menu.dl-subview li.dl-subview > a { + display: none; +} + +.dl-menu.dl-subview li.dl-subview, +.dl-menu.dl-subview li.dl-subview .dl-submenu, +.dl-menu.dl-subview li.dl-subviewopen, +.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, +.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { + display: block; +} + +/* Dynamically added submenu outside of the menu context */ +.dl-menuwrapper > .dl-submenu { + position: absolute; + width: 100%; + top: 55px; /* This needs to be adjusted to the button */ + left: 0; + margin: 0; +} + +/* Animation classes for moving out and in */ + +.dl-menu.dl-animate-out-1 { + -webkit-animation: MenuAnimOut1 0.4s linear forwards; + -moz-animation: MenuAnimOut1 0.4s linear forwards; + animation: MenuAnimOut1 0.4s linear forwards; +} + +.dl-menu.dl-animate-out-2 { + -webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards; + -moz-animation: MenuAnimOut2 0.3s ease-in-out forwards; + animation: MenuAnimOut2 0.3s ease-in-out forwards; +} + +.dl-menu.dl-animate-out-3 { + -webkit-animation: MenuAnimOut3 0.4s ease forwards; + -moz-animation: MenuAnimOut3 0.4s ease forwards; + animation: MenuAnimOut3 0.4s ease forwards; +} + +.dl-menu.dl-animate-out-4 { + -webkit-animation: MenuAnimOut4 0.4s ease forwards; + -moz-animation: MenuAnimOut4 0.4s ease forwards; + animation: MenuAnimOut4 0.4s ease forwards; +} + +.dl-menu.dl-animate-out-5 { + -webkit-animation: MenuAnimOut5 0.4s ease forwards; + -moz-animation: MenuAnimOut5 0.4s ease forwards; + animation: MenuAnimOut5 0.4s ease forwards; +} + +@-webkit-keyframes MenuAnimOut1 { + 50% { + -webkit-transform: translateZ(-250px) rotateY(30deg); + } + 75% { + -webkit-transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + -webkit-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut2 { + 100% { + -webkit-transform: translateX(-100%); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut3 { + 100% { + -webkit-transform: translateZ(300px); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut4 { + 100% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimOut5 { + 100% { + -webkit-transform: translateY(40%); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut1 { + 50% { + -moz-transform: translateZ(-250px) rotateY(30deg); + } + 75% { + -moz-transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + -moz-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut2 { + 100% { + -moz-transform: translateX(-100%); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut3 { + 100% { + -moz-transform: translateZ(300px); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut4 { + 100% { + -moz-transform: translateZ(-300px); + opacity: 0; + } +} + +@-moz-keyframes MenuAnimOut5 { + 100% { + -moz-transform: translateY(40%); + opacity: 0; + } +} + +@keyframes MenuAnimOut1 { + 50% { + transform: translateZ(-250px) rotateY(30deg); + } + 75% { + transform: translateZ(-372.5px) rotateY(15deg); + opacity: .5; + } + 100% { + transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } +} + +@keyframes MenuAnimOut2 { + 100% { + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes MenuAnimOut3 { + 100% { + transform: translateZ(300px); + opacity: 0; + } +} + +@keyframes MenuAnimOut4 { + 100% { + transform: translateZ(-300px); + opacity: 0; + } +} + +@keyframes MenuAnimOut5 { + 100% { + transform: translateY(40%); + opacity: 0; + } +} + +.dl-menu.dl-animate-in-1 { + -webkit-animation: MenuAnimIn1 0.3s linear forwards; + -moz-animation: MenuAnimIn1 0.3s linear forwards; + animation: MenuAnimIn1 0.3s linear forwards; +} + +.dl-menu.dl-animate-in-2 { + -webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards; + -moz-animation: MenuAnimIn2 0.3s ease-in-out forwards; + animation: MenuAnimIn2 0.3s ease-in-out forwards; +} + +.dl-menu.dl-animate-in-3 { + -webkit-animation: MenuAnimIn3 0.4s ease forwards; + -moz-animation: MenuAnimIn3 0.4s ease forwards; + animation: MenuAnimIn3 0.4s ease forwards; +} + +.dl-menu.dl-animate-in-4 { + -webkit-animation: MenuAnimIn4 0.4s ease forwards; + -moz-animation: MenuAnimIn4 0.4s ease forwards; + animation: MenuAnimIn4 0.4s ease forwards; +} + +.dl-menu.dl-animate-in-5 { + -webkit-animation: MenuAnimIn5 0.4s ease forwards; + -moz-animation: MenuAnimIn5 0.4s ease forwards; + animation: MenuAnimIn5 0.4s ease forwards; +} + +@-webkit-keyframes MenuAnimIn1 { + 0% { + -webkit-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + -webkit-transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + -webkit-transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn2 { + 0% { + -webkit-transform: translateX(-100%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn3 { + 0% { + -webkit-transform: translateZ(300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn4 { + 0% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes MenuAnimIn5 { + 0% { + -webkit-transform: translateY(40%); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn1 { + 0% { + -moz-transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + -moz-transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + -moz-transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn2 { + 0% { + -moz-transform: translateX(-100%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn3 { + 0% { + -moz-transform: translateZ(300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn4 { + 0% { + -moz-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes MenuAnimIn5 { + 0% { + -moz-transform: translateY(40%); + opacity: 0; + } + 100% { + -moz-transform: translateY(0); + opacity: 1; + } +} + +@keyframes MenuAnimIn1 { + 0% { + transform: translateZ(-500px) rotateY(0deg); + opacity: 0; + } + 20% { + transform: translateZ(-250px) rotateY(30deg); + opacity: 0.5; + } + 100% { + transform: translateZ(0px) rotateY(0deg); + opacity: 1; + } +} + +@keyframes MenuAnimIn2 { + 0% { + transform: translateX(-100%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn3 { + 0% { + transform: translateZ(300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn4 { + 0% { + transform: translateZ(-300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes MenuAnimIn5 { + 0% { + transform: translateY(40%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { + -webkit-animation: SubMenuAnimIn1 0.4s ease forwards; + -moz-animation: SubMenuAnimIn1 0.4s ease forwards; + animation: SubMenuAnimIn1 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-in-2 { + -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out forwards; + -moz-animation: SubMenuAnimIn2 0.3s ease-in-out forwards; + animation: SubMenuAnimIn2 0.3s ease-in-out forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-in-3 { + -webkit-animation: SubMenuAnimIn3 0.4s ease forwards; + -moz-animation: SubMenuAnimIn3 0.4s ease forwards; + animation: SubMenuAnimIn3 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-in-4 { + -webkit-animation: SubMenuAnimIn4 0.4s ease forwards; + -moz-animation: SubMenuAnimIn4 0.4s ease forwards; + animation: SubMenuAnimIn4 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-in-5 { + -webkit-animation: SubMenuAnimIn5 0.4s ease forwards; + -moz-animation: SubMenuAnimIn5 0.4s ease forwards; + animation: SubMenuAnimIn5 0.4s ease forwards; +} + +@-webkit-keyframes SubMenuAnimIn1 { + 0% { + -webkit-transform: translateX(50%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn2 { + 0% { + -webkit-transform: translateX(100%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn3 { + 0% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn4 { + 0% { + -webkit-transform: translateZ(300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn5 { + 0% { + -webkit-transform: translateZ(-200px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn1 { + 0% { + -moz-transform: translateX(50%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn2 { + 0% { + -moz-transform: translateX(100%); + opacity: 0; + } + 100% { + -moz-transform: translateX(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn3 { + 0% { + -moz-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn4 { + 0% { + -moz-transform: translateZ(300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} + +@-moz-keyframes SubMenuAnimIn5 { + 0% { + -moz-transform: translateZ(-200px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn1 { + 0% { + transform: translateX(50%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn2 { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn3 { + 0% { + transform: translateZ(-300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn4 { + 0% { + transform: translateZ(300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@keyframes SubMenuAnimIn5 { + 0% { + transform: translateZ(-200px); + opacity: 0; + } + 100% { + transform: translateZ(0); + opacity: 1; + } +} + +.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { + -webkit-animation: SubMenuAnimOut1 0.4s ease forwards; + -moz-animation: SubMenuAnimOut1 0.4s ease forwards; + animation: SubMenuAnimOut1 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-out-2 { + -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out forwards; + -moz-animation: SubMenuAnimOut2 0.3s ease-in-out forwards; + animation: SubMenuAnimOut2 0.3s ease-in-out forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-out-3 { + -webkit-animation: SubMenuAnimOut3 0.4s ease forwards; + -moz-animation: SubMenuAnimOut3 0.4s ease forwards; + animation: SubMenuAnimOut3 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-out-4 { + -webkit-animation: SubMenuAnimOut4 0.4s ease forwards; + -moz-animation: SubMenuAnimOut4 0.4s ease forwards; + animation: SubMenuAnimOut4 0.4s ease forwards; +} + +.dl-menuwrapper > .dl-submenu.dl-animate-out-5 { + -webkit-animation: SubMenuAnimOut5 0.4s ease forwards; + -moz-animation: SubMenuAnimOut5 0.4s ease forwards; + animation: SubMenuAnimOut5 0.4s ease forwards; +} + +@-webkit-keyframes SubMenuAnimOut1 { + 0% { + -webkit-transform: translateX(0%); + opacity: 1; + } + 100% { + -webkit-transform: translateX(50%); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut2 { + 0% { + -webkit-transform: translateX(0%); + opacity: 1; + } + 100% { + -webkit-transform: translateX(100%); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut3 { + 0% { + -webkit-transform: translateZ(0px); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut4 { + 0% { + -webkit-transform: translateZ(0px); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(300px); + opacity: 0; + } +} + +@-webkit-keyframes SubMenuAnimOut5 { + 0% { + -webkit-transform: translateZ(0); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-200px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut1 { + 0% { + -moz-transform: translateX(0%); + opacity: 1; + } + 100% { + -moz-transform: translateX(50%); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut2 { + 0% { + -moz-transform: translateX(0%); + opacity: 1; + } + 100% { + -moz-transform: translateX(100%); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut3 { + 0% { + -moz-transform: translateZ(0px); + opacity: 1; + } + 100% { + -moz-transform: translateZ(-300px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut4 { + 0% { + -moz-transform: translateZ(0px); + opacity: 1; + } + 100% { + -moz-transform: translateZ(300px); + opacity: 0; + } +} + +@-moz-keyframes SubMenuAnimOut5 { + 0% { + -moz-transform: translateZ(0); + opacity: 1; + } + 100% { + -moz-transform: translateZ(-200px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut1 { + 0% { + transform: translateX(0%); + opacity: 1; + } + 100% { + transform: translateX(50%); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut2 { + 0% { + transform: translateX(0%); + opacity: 1; + } + 100% { + transform: translateX(100%); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut3 { + 0% { + transform: translateZ(0px); + opacity: 1; + } + 100% { + transform: translateZ(-300px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut4 { + 0% { + transform: translateZ(0px); + opacity: 1; + } + 100% { + transform: translateZ(300px); + opacity: 0; + } +} + +@keyframes SubMenuAnimOut5 { + 0% { + transform: translateZ(0); + opacity: 1; + } + 100% { + transform: translateZ(-200px); + opacity: 0; + } +} + +/* No JS Fallback */ +.no-js .dl-menuwrapper .dl-menu { + position: relative; + opacity: 1; + -webkit-transform: none; + -moz-transform: none; + transform: none; +} + +.no-js .dl-menuwrapper li .dl-submenu { + display: block; +} + +.no-js .dl-menuwrapper li.dl-back { + display: none; +} + +.no-js .dl-menuwrapper li > a:not(:only-child) { + background: rgba(0,0,0,0.1); +} + +.no-js .dl-menuwrapper li > a:not(:only-child):after { + content: ''; +} + diff --git a/_old/ifr/fonts/.DS_Store b/_old/ifr/fonts/.DS_Store new file mode 100644 index 0000000..83ca089 Binary files /dev/null and b/_old/ifr/fonts/.DS_Store differ diff --git a/_old/ifr/fonts/codropsicons/.DS_Store b/_old/ifr/fonts/codropsicons/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/_old/ifr/fonts/codropsicons/.DS_Store differ diff --git a/_old/ifr/fonts/codropsicons/codropsicons.eot b/_old/ifr/fonts/codropsicons/codropsicons.eot new file mode 100644 index 0000000..f46c7f4 Binary files /dev/null and b/_old/ifr/fonts/codropsicons/codropsicons.eot differ diff --git a/_old/ifr/fonts/codropsicons/codropsicons.svg b/_old/ifr/fonts/codropsicons/codropsicons.svg new file mode 100644 index 0000000..d202d21 --- /dev/null +++ b/_old/ifr/fonts/codropsicons/codropsicons.svg @@ -0,0 +1,24 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_old/ifr/fonts/codropsicons/codropsicons.ttf b/_old/ifr/fonts/codropsicons/codropsicons.ttf new file mode 100644 index 0000000..72bed1f Binary files /dev/null and b/_old/ifr/fonts/codropsicons/codropsicons.ttf differ diff --git a/_old/ifr/fonts/codropsicons/codropsicons.woff b/_old/ifr/fonts/codropsicons/codropsicons.woff new file mode 100644 index 0000000..1003218 Binary files /dev/null and b/_old/ifr/fonts/codropsicons/codropsicons.woff differ diff --git a/_old/ifr/fonts/codropsicons/license.txt b/_old/ifr/fonts/codropsicons/license.txt new file mode 100644 index 0000000..88a5cbc --- /dev/null +++ b/_old/ifr/fonts/codropsicons/license.txt @@ -0,0 +1,6 @@ +Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ +License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL + + +Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico +License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ \ No newline at end of file diff --git a/_old/ifr/fonts/menuicons/icomoon.eot b/_old/ifr/fonts/menuicons/icomoon.eot new file mode 100644 index 0000000..a5a98df Binary files /dev/null and b/_old/ifr/fonts/menuicons/icomoon.eot differ diff --git a/_old/ifr/fonts/menuicons/icomoon.svg b/_old/ifr/fonts/menuicons/icomoon.svg new file mode 100644 index 0000000..cf664ee --- /dev/null +++ b/_old/ifr/fonts/menuicons/icomoon.svg @@ -0,0 +1,15 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + \ No newline at end of file diff --git a/_old/ifr/fonts/menuicons/icomoon.ttf b/_old/ifr/fonts/menuicons/icomoon.ttf new file mode 100644 index 0000000..2efa996 Binary files /dev/null and b/_old/ifr/fonts/menuicons/icomoon.ttf differ diff --git a/_old/ifr/fonts/menuicons/icomoon.woff b/_old/ifr/fonts/menuicons/icomoon.woff new file mode 100644 index 0000000..98c481e Binary files /dev/null and b/_old/ifr/fonts/menuicons/icomoon.woff differ diff --git a/_old/ifr/fonts/menuicons/license.txt b/_old/ifr/fonts/menuicons/license.txt new file mode 100644 index 0000000..6edc1f2 --- /dev/null +++ b/_old/ifr/fonts/menuicons/license.txt @@ -0,0 +1,2 @@ +Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ +License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ \ No newline at end of file diff --git a/_old/ifr/ifr-home.html b/_old/ifr/ifr-home.html new file mode 100644 index 0000000..6c0d51d --- /dev/null +++ b/_old/ifr/ifr-home.html @@ -0,0 +1,178 @@ + + + + + + + A Collection of Page Transitions + + + + + + + + + + + +
+ Previous Demo + Back to the Codrops Article +
+ +
+ +
+ + +
+
+ +
+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+
+ +
+

Your browser does not support CSS animations.

+
+ + + + + + diff --git a/_old/ifr/index.html b/_old/ifr/index.html new file mode 100644 index 0000000..6c0d51d --- /dev/null +++ b/_old/ifr/index.html @@ -0,0 +1,178 @@ + + + + + + + A Collection of Page Transitions + + + + + + + + + + + +
+ Previous Demo + Back to the Codrops Article +
+ +
+ +
+ + +
+
+ +
+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+

A collection ofPage Transitions

+
+ +
+

Your browser does not support CSS animations.

+
+ + + + + + diff --git a/_old/ifr/js/jquery.dlmenu.js b/_old/ifr/js/jquery.dlmenu.js new file mode 100644 index 0000000..52f7bba --- /dev/null +++ b/_old/ifr/js/jquery.dlmenu.js @@ -0,0 +1,252 @@ +/** + * jquery.dlmenu.js v1.0.1 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +;( function( $, window, undefined ) { + + 'use strict'; + + // global + var Modernizr = window.Modernizr, $body = $( 'body' ); + + $.DLMenu = function( options, element ) { + this.$el = $( element ); + this._init( options ); + }; + + // the options + $.DLMenu.defaults = { + // classes for the animation effects + animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' }, + // callback: click a link that has a sub menu + // el is the link element (li); name is the level name + onLevelClick : function( el, name ) { return false; }, + // callback: click a link that does not have a sub menu + // el is the link element (li); ev is the event obj + onLinkClick : function( el, ev ) { return false; } + }; + + $.DLMenu.prototype = { + _init : function( options ) { + + // options + this.options = $.extend( true, {}, $.DLMenu.defaults, options ); + // cache some elements and initialize some variables + this._config(); + + var animEndEventNames = { + 'WebkitAnimation' : 'webkitAnimationEnd', + 'OAnimation' : 'oAnimationEnd', + 'msAnimation' : 'MSAnimationEnd', + 'animation' : 'animationend' + }, + transEndEventNames = { + 'WebkitTransition' : 'webkitTransitionEnd', + 'MozTransition' : 'transitionend', + 'OTransition' : 'oTransitionEnd', + 'msTransition' : 'MSTransitionEnd', + 'transition' : 'transitionend' + }; + // animation end event name + this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu'; + // transition end event name + this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu', + // support for css animations and css transitions + this.supportAnimations = Modernizr.cssanimations, + this.supportTransitions = Modernizr.csstransitions; + + this._initEvents(); + + }, + _config : function() { + this.open = false; + this.$trigger = this.$el.children( '.dl-trigger' ); + this.$menu = this.$el.children( 'ul.dl-menu' ); + this.$menuitems = this.$menu.find( 'li:not(.dl-back)' ); + this.$el.find( 'ul.dl-submenu' ).prepend( '
  • back
    • ' ); + this.$back = this.$menu.find( 'li.dl-back' ); + }, + _initEvents : function() { + + var self = this; + + this.$trigger.on( 'click.dlmenu', function() { + + if( self.open ) { + self._closeMenu(); + } + else { + self._openMenu(); + } + return false; + + } ); + + this.$menuitems.on( 'click.dlmenu', function( event ) { + + event.stopPropagation(); + + var $item = $(this), + $submenu = $item.children( 'ul.dl-submenu' ); + + if( $submenu.length > 0 ) { + + var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ), + onAnimationEndFn = function() { + self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' ); + $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' ); + $flyin.remove(); + }; + + setTimeout( function() { + $flyin.addClass( self.options.animationClasses.classin ); + self.$menu.addClass( self.options.animationClasses.classout ); + if( self.supportAnimations ) { + self.$menu.on( self.animEndEventName, onAnimationEndFn ); + } + else { + onAnimationEndFn.call(); + } + + self.options.onLevelClick( $item, $item.children( 'a:first' ).text() ); + } ); + + return false; + + } + else { + self.options.onLinkClick( $item, event ); + } + + } ); + + this.$back.on( 'click.dlmenu', function( event ) { + + var $this = $( this ), + $submenu = $this.parents( 'ul.dl-submenu:first' ), + $item = $submenu.parent(), + + $flyin = $submenu.clone().insertAfter( self.$menu ); + + var onAnimationEndFn = function() { + self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin ); + $flyin.remove(); + }; + + setTimeout( function() { + $flyin.addClass( self.options.animationClasses.classout ); + self.$menu.addClass( self.options.animationClasses.classin ); + if( self.supportAnimations ) { + self.$menu.on( self.animEndEventName, onAnimationEndFn ); + } + else { + onAnimationEndFn.call(); + } + + $item.removeClass( 'dl-subviewopen' ); + + var $subview = $this.parents( '.dl-subview:first' ); + if( $subview.is( 'li' ) ) { + $subview.addClass( 'dl-subviewopen' ); + } + $subview.removeClass( 'dl-subview' ); + } ); + + return false; + + } ); + + }, + closeMenu : function() { + if( this.open ) { + this._closeMenu(); + } + }, + _closeMenu : function() { + var self = this, + onTransitionEndFn = function() { + self.$menu.off( self.transEndEventName ); + self._resetMenu(); + }; + + this.$menu.removeClass( 'dl-menuopen' ); + this.$menu.addClass( 'dl-menu-toggle' ); + this.$trigger.removeClass( 'dl-active' ); + + if( this.supportTransitions ) { + this.$menu.on( this.transEndEventName, onTransitionEndFn ); + } + else { + onTransitionEndFn.call(); + } + + this.open = false; + }, + openMenu : function() { + if( !this.open ) { + this._openMenu(); + } + }, + _openMenu : function() { + var self = this; + // clicking somewhere else makes the menu close + $body.off( 'click' ).on( 'click.dlmenu', function() { + self._closeMenu() ; + } ); + this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() { + $( this ).removeClass( 'dl-menu-toggle' ); + } ); + this.$trigger.addClass( 'dl-active' ); + this.open = true; + }, + // resets the menu to its original state (first level of options) + _resetMenu : function() { + this.$menu.removeClass( 'dl-subview' ); + this.$menuitems.removeClass( 'dl-subview dl-subviewopen' ); + } + }; + + var logError = function( message ) { + if ( window.console ) { + window.console.error( message ); + } + }; + + $.fn.dlmenu = function( options ) { + if ( typeof options === 'string' ) { + var args = Array.prototype.slice.call( arguments, 1 ); + this.each(function() { + var instance = $.data( this, 'dlmenu' ); + if ( !instance ) { + logError( "cannot call methods on dlmenu prior to initialization; " + + "attempted to call method '" + options + "'" ); + return; + } + if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { + logError( "no such method '" + options + "' for dlmenu instance" ); + return; + } + instance[ options ].apply( instance, args ); + }); + } + else { + this.each(function() { + var instance = $.data( this, 'dlmenu' ); + if ( instance ) { + instance._init(); + } + else { + instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) ); + } + }); + } + return this; + }; + +} )( jQuery, window ); \ No newline at end of file diff --git a/_old/ifr/js/modernizr.custom.js b/_old/ifr/js/modernizr.custom.js new file mode 100644 index 0000000..db5e1ea --- /dev/null +++ b/_old/ifr/js/modernizr.custom.js @@ -0,0 +1,4 @@ +/* Modernizr 2.6.2 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-cssanimations-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.cssanimations=function(){return F("animationName")},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 67 ) { + animcursor = 1; + } + nextPage( animcursor ); + ++animcursor; + } ); + + } + + function nextPage( animation ) { + + if( isAnimating ) { + return false; + } + + isAnimating = true; + + var $currPage = $pages.eq( current ); + + if( current < pagesCount - 1 ) { + ++current; + } + else { + current = 0; + } + + var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ), + outClass = '', inClass = ''; + + switch( animation ) { + + case 1: + outClass = 'pt-page-moveToLeft'; + inClass = 'pt-page-moveFromRight'; + break; + case 2: + outClass = 'pt-page-moveToRight'; + inClass = 'pt-page-moveFromLeft'; + break; + case 3: + outClass = 'pt-page-moveToTop'; + inClass = 'pt-page-moveFromBottom'; + break; + case 4: + outClass = 'pt-page-moveToBottom'; + inClass = 'pt-page-moveFromTop'; + break; + case 5: + outClass = 'pt-page-fade'; + inClass = 'pt-page-moveFromRight pt-page-ontop'; + break; + case 6: + outClass = 'pt-page-fade'; + inClass = 'pt-page-moveFromLeft pt-page-ontop'; + break; + case 7: + outClass = 'pt-page-fade'; + inClass = 'pt-page-moveFromBottom pt-page-ontop'; + break; + case 8: + outClass = 'pt-page-fade'; + inClass = 'pt-page-moveFromTop pt-page-ontop'; + break; + case 9: + outClass = 'pt-page-moveToLeftFade'; + inClass = 'pt-page-moveFromRightFade'; + break; + case 10: + outClass = 'pt-page-moveToRightFade'; + inClass = 'pt-page-moveFromLeftFade'; + break; + case 11: + outClass = 'pt-page-moveToTopFade'; + inClass = 'pt-page-moveFromBottomFade'; + break; + case 12: + outClass = 'pt-page-moveToBottomFade'; + inClass = 'pt-page-moveFromTopFade'; + break; + case 13: + outClass = 'pt-page-moveToLeftEasing pt-page-ontop'; + inClass = 'pt-page-moveFromRight'; + break; + case 14: + outClass = 'pt-page-moveToRightEasing pt-page-ontop'; + inClass = 'pt-page-moveFromLeft'; + break; + case 15: + outClass = 'pt-page-moveToTopEasing pt-page-ontop'; + inClass = 'pt-page-moveFromBottom'; + break; + case 16: + outClass = 'pt-page-moveToBottomEasing pt-page-ontop'; + inClass = 'pt-page-moveFromTop'; + break; + case 17: + outClass = 'pt-page-scaleDown'; + inClass = 'pt-page-moveFromRight pt-page-ontop'; + break; + case 18: + outClass = 'pt-page-scaleDown'; + inClass = 'pt-page-moveFromLeft pt-page-ontop'; + break; + case 19: + outClass = 'pt-page-scaleDown'; + inClass = 'pt-page-moveFromBottom pt-page-ontop'; + break; + case 20: + outClass = 'pt-page-scaleDown'; + inClass = 'pt-page-moveFromTop pt-page-ontop'; + break; + case 21: + outClass = 'pt-page-scaleDown'; + inClass = 'pt-page-scaleUpDown pt-page-delay300'; + break; + case 22: + outClass = 'pt-page-scaleDownUp'; + inClass = 'pt-page-scaleUp pt-page-delay300'; + break; + case 23: + outClass = 'pt-page-moveToLeft pt-page-ontop'; + inClass = 'pt-page-scaleUp'; + break; + case 24: + outClass = 'pt-page-moveToRight pt-page-ontop'; + inClass = 'pt-page-scaleUp'; + break; + case 25: + outClass = 'pt-page-moveToTop pt-page-ontop'; + inClass = 'pt-page-scaleUp'; + break; + case 26: + outClass = 'pt-page-moveToBottom pt-page-ontop'; + inClass = 'pt-page-scaleUp'; + break; + case 27: + outClass = 'pt-page-scaleDownCenter'; + inClass = 'pt-page-scaleUpCenter pt-page-delay400'; + break; + case 28: + outClass = 'pt-page-rotateRightSideFirst'; + inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop'; + break; + case 29: + outClass = 'pt-page-rotateLeftSideFirst'; + inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop'; + break; + case 30: + outClass = 'pt-page-rotateTopSideFirst'; + inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop'; + break; + case 31: + outClass = 'pt-page-rotateBottomSideFirst'; + inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'; + break; + case 32: + outClass = 'pt-page-flipOutRight'; + inClass = 'pt-page-flipInLeft pt-page-delay500'; + break; + case 33: + outClass = 'pt-page-flipOutLeft'; + inClass = 'pt-page-flipInRight pt-page-delay500'; + break; + case 34: + outClass = 'pt-page-flipOutTop'; + inClass = 'pt-page-flipInBottom pt-page-delay500'; + break; + case 35: + outClass = 'pt-page-flipOutBottom'; + inClass = 'pt-page-flipInTop pt-page-delay500'; + break; + case 36: + outClass = 'pt-page-rotateFall pt-page-ontop'; + inClass = 'pt-page-scaleUp'; + break; + case 37: + outClass = 'pt-page-rotateOutNewspaper'; + inClass = 'pt-page-rotateInNewspaper pt-page-delay500'; + break; + case 38: + outClass = 'pt-page-rotatePushLeft'; + inClass = 'pt-page-moveFromRight'; + break; + case 39: + outClass = 'pt-page-rotatePushRight'; + inClass = 'pt-page-moveFromLeft'; + break; + case 40: + outClass = 'pt-page-rotatePushTop'; + inClass = 'pt-page-moveFromBottom'; + break; + case 41: + outClass = 'pt-page-rotatePushBottom'; + inClass = 'pt-page-moveFromTop'; + break; + case 42: + outClass = 'pt-page-rotatePushLeft'; + inClass = 'pt-page-rotatePullRight pt-page-delay180'; + break; + case 43: + outClass = 'pt-page-rotatePushRight'; + inClass = 'pt-page-rotatePullLeft pt-page-delay180'; + break; + case 44: + outClass = 'pt-page-rotatePushTop'; + inClass = 'pt-page-rotatePullBottom pt-page-delay180'; + break; + case 45: + outClass = 'pt-page-rotatePushBottom'; + inClass = 'pt-page-rotatePullTop pt-page-delay180'; + break; + case 46: + outClass = 'pt-page-rotateFoldLeft'; + inClass = 'pt-page-moveFromRightFade'; + break; + case 47: + outClass = 'pt-page-rotateFoldRight'; + inClass = 'pt-page-moveFromLeftFade'; + break; + case 48: + outClass = 'pt-page-rotateFoldTop'; + inClass = 'pt-page-moveFromBottomFade'; + break; + case 49: + outClass = 'pt-page-rotateFoldBottom'; + inClass = 'pt-page-moveFromTopFade'; + break; + case 50: + outClass = 'pt-page-moveToRightFade'; + inClass = 'pt-page-rotateUnfoldLeft'; + break; + case 51: + outClass = 'pt-page-moveToLeftFade'; + inClass = 'pt-page-rotateUnfoldRight'; + break; + case 52: + outClass = 'pt-page-moveToBottomFade'; + inClass = 'pt-page-rotateUnfoldTop'; + break; + case 53: + outClass = 'pt-page-moveToTopFade'; + inClass = 'pt-page-rotateUnfoldBottom'; + break; + case 54: + outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop'; + inClass = 'pt-page-rotateRoomLeftIn'; + break; + case 55: + outClass = 'pt-page-rotateRoomRightOut pt-page-ontop'; + inClass = 'pt-page-rotateRoomRightIn'; + break; + case 56: + outClass = 'pt-page-rotateRoomTopOut pt-page-ontop'; + inClass = 'pt-page-rotateRoomTopIn'; + break; + case 57: + outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop'; + inClass = 'pt-page-rotateRoomBottomIn'; + break; + case 58: + outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop'; + inClass = 'pt-page-rotateCubeLeftIn'; + break; + case 59: + outClass = 'pt-page-rotateCubeRightOut pt-page-ontop'; + inClass = 'pt-page-rotateCubeRightIn'; + break; + case 60: + outClass = 'pt-page-rotateCubeTopOut pt-page-ontop'; + inClass = 'pt-page-rotateCubeTopIn'; + break; + case 61: + outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop'; + inClass = 'pt-page-rotateCubeBottomIn'; + break; + case 62: + outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop'; + inClass = 'pt-page-rotateCarouselLeftIn'; + break; + case 63: + outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop'; + inClass = 'pt-page-rotateCarouselRightIn'; + break; + case 64: + outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop'; + inClass = 'pt-page-rotateCarouselTopIn'; + break; + case 65: + outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop'; + inClass = 'pt-page-rotateCarouselBottomIn'; + break; + case 66: + outClass = 'pt-page-rotateSidesOut'; + inClass = 'pt-page-rotateSidesIn pt-page-delay200'; + break; + case 67: + outClass = 'pt-page-rotateSlideOut'; + inClass = 'pt-page-rotateSlideIn'; + break; + + } + + $currPage.addClass( outClass ).on( animEndEventName, function() { + $currPage.off( animEndEventName ); + endCurrPage = true; + if( endNextPage ) { + onEndAnimation( $currPage, $nextPage ); + } + } ); + + $nextPage.addClass( inClass ).on( animEndEventName, function() { + $nextPage.off( animEndEventName ); + endNextPage = true; + if( endCurrPage ) { + onEndAnimation( $currPage, $nextPage ); + } + } ); + + if( !support ) { + onEndAnimation( $currPage, $nextPage ); + } + + } + + function onEndAnimation( $outpage, $inpage ) { + endCurrPage = false; + endNextPage = false; + resetPage( $outpage, $inpage ); + isAnimating = false; + } + + function resetPage( $outpage, $inpage ) { + $outpage.attr( 'class', $outpage.data( 'originalClassList' ) ); + $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' ); + } + + init(); + + return { init : init }; + +})(); \ No newline at end of file diff --git a/_old/live-web-tv.html b/_old/live-web-tv.html new file mode 100644 index 0000000..ece38c1 --- /dev/null +++ b/_old/live-web-tv.html @@ -0,0 +1,271 @@ + + + + + Live Web Tv + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + + + + + + +
    +
    +
    +
    + + + +
    +
    mobile web tv
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    +

    Lorem ipsum dolor sit amet magna egestas morbi bibendum sed malesuada

    + Tempus feugiat veroeros sed nullam dolore +
    + + + +

    Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. + odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum + facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam + tempus euismod. Vestibulum ante ipsum primis in faucibus.

    +

    Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque + habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi + bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh + lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. + Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non + magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat + leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit + amet risus elit.

    +

    Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra + ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci + eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus + eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis + tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper + odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum + facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam + tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia.

    +

    Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque + habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi + bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh + lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. + Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non + magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat + leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit + amet risus elit.

    +
    +
    +
    +
    +
    +
    +

    Magna pulvinar tempus

    +
    + +

    Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus + eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis + tempus.

    + More +
    +
    +
    +
    +
    +

    Magna pulvinar tempus

    +
    + +

    Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus + eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis + tempus.

    +
    +
    +
    +
    +
    + +
    +
    + + + + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/_old/slider/css/bigvideo.css b/_old/slider/css/bigvideo.css new file mode 100644 index 0000000..7c90b88 --- /dev/null +++ b/_old/slider/css/bigvideo.css @@ -0,0 +1,22 @@ +/* BigVideo Styles + You may need to adjust these styles to get this working right in your design. +*/ +#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;} +#big-video-vid,#big-video-image{position:absolute;} +#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%; + -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;} +#big-video-control{width:100%;height:16px;position:relative;} +#big-video-control-middle{margin: 0 56px 0 24px;} +#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;} +#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;} +#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;} +#big-video-control-bound-left{left:0;} +#big-video-control-bound-right{right:-1px} +#big-video-control-track .ui-slider-handle {opacity:0;} +#big-video-control-playhead{left:30%;} +#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');} +#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;} +#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;} +#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;} +.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;} +.vjs-big-play-button{display:none !important;} \ No newline at end of file diff --git a/_old/slider/css/bigvideo.png b/_old/slider/css/bigvideo.png new file mode 100644 index 0000000..3dd6655 Binary files /dev/null and b/_old/slider/css/bigvideo.png differ diff --git a/_old/slider/css/dia.css b/_old/slider/css/dia.css new file mode 100644 index 0000000..326ae96 --- /dev/null +++ b/_old/slider/css/dia.css @@ -0,0 +1,440 @@ +@charset 'UTF-8'; + +@font-face { + font-family: 'futura_bk_btbook'; + src: url('../fonts/futura_book_bt-webfont.eot'); + src: url('../fonts/futura_book_bt-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/futura_book_bt-webfont.woff') format('woff'), + url('../fonts/futura_book_bt-webfont.ttf') format('truetype'), + url('../fonts/futura_book_bt-webfont.svg#futura_bk_btbook') format('svg'); + font-weight: normal; + font-style: normal; +} + +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media only screen and (max-width: 1800px){ + +html, +body { + margin: 0; + padding: 0; + color: #fff; + background-color: rgba(255,255,255,0.0); + overflow: hidden; + font-family: 'futura_bk_btbook', Arial, sans-serif; + font-size: 0.8em; + font-weight: normal; + font-style: normal; +} + +.canvas1 { + width: 100%; + height: 100%; +} + +.trame { + position: absolute; + width: 100%; + height: 100%; + z-index: 997; + background-image:url('../img/diag.png'); + background-repeat:repeat; +} +.wrapper { + position: absolute; + width: 500%; + height: 100%; + +} + +/* Text */ + +h1, +h2 { + margin: 0; + padding: 0; +} + +p { + line-height: 1.3; + letter-spacing: 6px; + text-transform: uppercase; + background: #271a42; + border: solid 2px #271a42; +} + +a, +a:visited { + color: #fff; + text-decoration: none; + letter-spacing: 6px; +} + +a:hover { + color: #65639e; +} + +h1 a, +h1 a:hover, +h1 a:visited { + text-decoration: none; +} + +p a { + font-weight: normal; +} + +/* Header */ + +header { + position: absolute; + top: 50%; + left: 50%; + z-index: 999; + color: #fff; + padding: 95px; + width: 400px; + height: 400px; + margin: -250px 0 0 -200px; + text-align: center; + +} + +header h1 { + padding: 0 0 20px 0; + font-size: 11px; + letter-spacing: 2px; + font-weight: normal; +} + +header h1 span { + font-size: 11px; + letter-spacing: 2px; + font-weight: normal; +} + +header p { + font-family: 'futura_bk_btbook', Georgia, serif; + font-style: normal; + font-weight: normal; + letter-spacing: 2px; +} + +/* Video Pages */ + +.screen { + position: relative; + height: 100%; + width: 20%; /* NOTE: numVideos/100% */; + float: left; + overflow: hidden; +} + +.big-image { + min-width: 100%; + min-height: 100%; + height: auto; + width: auto; +} + +.video-title { + position: absolute; + top: 3%; + right: 0%; + opacity: 0.8; + margin: 20px 0 0 0; + padding: 6px; + font-size: 11px; + text-transform: uppercase; + background: #271a42; + border: solid 2px #271a42; + font-weight: normal; + letter-spacing: 2px; + z-index: 998; +} + +/* Nav */ + +nav { + position: absolute; + right: 1%; + top: 40%; + padding: 20px; + opacity: 10; + cursor: pointer; + z-index: 1000; +} + +nav:hover { + opacity: .3; +} + +.next-icon { + display: block; + border-top: solid 1px #fff; + border-right: solid 1px #fff; + width: 40px; + height: 40px; + position: relative; + left: -3px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + color: #fff; + text-decoration: none; + font-weight: normal; +} + +/* Codrops Header Style */ +.codrops-top { + line-height: 24px; + font-size: 12px; + background: #fff; + background: rgba(255, 255, 255, 0.5); + text-transform: uppercase; + z-index: 9999; + position: absolute; + width: 100%; + top: 0; + left: 0; + font-family:'futura_bk_btbook', Georgia, serif; + box-shadow: 1px 0px 2px rgba(0,0,0,0.2); + font-weight: normal; +} +.codrops-top a { + padding: 0px 10px; + letter-spacing: 1px; + color: #333; + display: inline-block; + text-decoration: none; + font-weight: normal; +} +.codrops-top a:hover { + background: rgba(255,255,255,0.4); +} +.codrops-top span.right{ + float: right; +} +.codrops-top span.right a{ + float: left; + display: block; +} +/* End Codrops Header Style */ + +/* Smartphones (portrait and landscape) ----------- */ +@media only screen and (max-width : 640px) { +html, +body { + margin: 0; + padding: 0; + color: #fff; + background: #180d19; + overflow: hidden; + font-family: 'futura_bk_btbook', Arial, sans-serif; + font-size: 0.75em; + font-weight: normal; + font-style: normal; +} + +.canvas1 { + width: 100%; + height: 100%; +} + +.trame { + position: absolute; + width: 100%; + height: 100%; + z-index: 997; + background-image:url('../img/diag.png'); + background-repeat:repeat; +} +.wrapper { + position: absolute; + width: 500%; + height: 100%; + +} + +/* Text */ + +h1, +h2 { + margin: 0; + padding: 0; +} + +p { + line-height: 0.9; + letter-spacing: 3px; + text-transform: uppercase; + background: #271a42; + border: solid 2px #271a42; +} + +a, +a:visited { + color: #fff; + text-decoration: none; + letter-spacing: 3px; +} + +a:hover { + color: #65639e; +} + +h1 a, +h1 a:hover, +h1 a:visited { + text-decoration: none; +} + +p a { + font-weight: normal; +} + +/* Header */ + +header { + position: absolute; + top: 50%; + left: 50%; + z-index: 999; + color: #fff; + padding: 12px; + width: 150px; + height: 150px; + margin: -90px 0 0 -75px; + text-align: center; + +} + +header h1 { + padding: 0 0 5px 0; + font-size: 7px; + letter-spacing: 1px; + font-weight: normal; +} + +header h1 span { + font-size: 7px; + letter-spacing: 1px; + font-weight: normal; +} + +header p { + font-family: 'futura_bk_btbook', Georgia, serif; + font-style: normal; + font-weight: normal; + letter-spacing: 1px; +} + +/* Video Pages */ + +.screen { + position: relative; + height: 100%; + width: 20%; /* NOTE: numVideos/100% */; + float: left; + overflow: hidden; +} + +.big-image { + min-width: 100%; + min-height: 100%; + height: auto; + width: auto; +} + +.video-title { + position: absolute; + top: 3%; + right: 0%; + opacity: 0.8; + margin: 5px 0 0 0; + padding: 3px; + font-size: 7px; + text-transform: uppercase; + background: #271a42; + border: solid 2px #271a42; + font-weight: normal; + letter-spacing: 1px; + z-index: 998; +} + +/* Nav */ + +nav { + position: absolute; + right: 1%; + top: 40%; + padding: 10px; + opacity: 10; + cursor: pointer; + z-index: 1000; +} + +nav:hover { + opacity: .3; +} + +.next-icon { + display: block; + border-top: solid 1px #fff; + border-right: solid 1px #fff; + width: 15px; + height: 15px; + position: relative; + left: -2px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + color: #fff; + text-decoration: none; + font-weight: normal; +} + +/* Codrops Header Style */ +.codrops-top { + line-height: 12px; + font-size: 7px; + background: #fff; + background: rgba(255, 255, 255, 0.5); + text-transform: uppercase; + z-index: 9999; + position: absolute; + width: 100%; + top: 0; + left: 0; + font-family:'futura_bk_btbook', Georgia, serif; + box-shadow: 1px 0px 2px rgba(0,0,0,0.2); + font-weight: normal; +} +.codrops-top a { + padding: 0px 10px; + letter-spacing: 1px; + color: #333; + display: inline-block; + text-decoration: none; + font-weight: normal; +} +.codrops-top a:hover { + background: rgba(255,255,255,0.4); +} +.codrops-top span.right{ + float: right; +} +.codrops-top span.right a{ + float: left; + display: block; +/* End Codrops Header Style */ +} \ No newline at end of file diff --git a/_old/slider/css/video-js.css b/_old/slider/css/video-js.css new file mode 100644 index 0000000..a19157f --- /dev/null +++ b/_old/slider/css/video-js.css @@ -0,0 +1,757 @@ +/*! +Video.js Default Styles (http://videojs.com) +Version 4.2.0 +Create your own skin at http://designer.videojs.com +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'vjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g.