aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorErling Aaby <erlinaa@stud.hist.no>2013-05-07 09:23:37 +0200
committerErling Aaby <erlinaa@stud.hist.no>2013-05-07 09:23:37 +0200
commitf220bf8c60bdfd340d91775f034e21d3dc421c89 (patch)
tree8019b5e48fb7e94482408a7901c3ef7782438416
parentadded divanim to contact.ejs and pushed old use.less that works (diff)
parentAdded divanim animation to contact.ejs (diff)
downloadDivid-f220bf8c60bdfd340d91775f034e21d3dc421c89.tar.gz
Merge branch 'master' of github.com:dennisse/Divid
Dysfunctional use.less
-rw-r--r--public/css/divanim.less203
1 files changed, 203 insertions, 0 deletions
diff --git a/public/css/divanim.less b/public/css/divanim.less
new file mode 100644
index 0000000..ff53e77
--- /dev/null
+++ b/public/css/divanim.less
@@ -0,0 +1,203 @@
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
+.anim {
+ font-size: 10px;
+ font-family: 'Source Sans Pro', Arial, sans-serif;
+ font-weight: 300;
+ margin:0;
+ /*background-color: #08090A;*/ }
+#scene {
+ z-index: 1;
+ position: absolute;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background-position: center 40%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-image: linear-gradient(#8b9da9, #fff6e4);}
+#situation {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-transform-style: preserve-3d; }
+.orbit {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border: 0px solid rgba(255, 255, 255, 0.2);
+ border-radius: 50%;
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: orbit;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear; }
+.orbit .orbit {
+ -webkit-animation-name: suborbit; }
+.pos {
+ position: absolute;
+ top: 50%;
+ width: 2em;
+ height: 2em;
+ margin-top: -1em;
+ margin-left: -1em;
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: invert;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear; }
+#divid, .object, #activity3 .satellitt {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1em;
+ height: 1em;
+ margin-top: -0.5em;
+ margin-left: -0.5em;
+ border-radius: 10%;
+ -webkit-transform-style: preserve-3d; }
+#divid {
+ /*background-color: #FB7209;*/
+ background-repeat: no-repeat;
+ background-size: cover;
+ /*box-shadow: 0 0 60px rgba(255, 160, 60, 0.4);*/}
+.object {
+ background-repeat: no-repeat;
+ background-size: cover;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear; }
+.ring {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border-radius: 50%; }
+/* -------------------index positions-------------------------------------------------------*/
+#activity1 {
+ z-index: 2; }
+#activity2 {
+ z-index: 3; }
+#activity3 {
+ z-index: 4; }
+#satellitt {
+ z-index: 5; }
+#activity4 {
+ z-index: 6; }
+#divid {
+ z-index: 1; }
+/* --------------------------------activity starting positions----------------------------------------*/
+#activity1 .pos {
+ left: 50%;
+ top: -1%; }
+#activity2 .pos {
+ left: 0;
+ top: 50%; }
+#activity3 .pos {
+ left: 100%;
+ top: 50%; }
+#activity4 .pos {
+ left: 100%;
+ top: 50%; }
+
+/* --------------------webkit animations-----------------------------------------------------*/
+@-webkit-keyframes orbit {
+ 0% {
+ -webkit-transform: rotateZ(0deg); }
+ 100% {
+ -webkit-transform: rotateZ(-360deg); } }
+@-webkit-keyframes suborbit {
+ 0% {
+ -webkit-transform: rotateX(90deg) rotateZ(0deg); }
+ 100% {
+ -webkit-transform: rotateX(90deg) rotateZ(-360deg); } }
+@-webkit-keyframes invert {
+ 0% {
+ -webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
+ 100% {
+ -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
+/* ------------------------scale 3D view----------------------------------------*/
+.view-3D.zoom-large #divid {
+ -webkit-transform-style: preserve-3d; }
+.view-3D.zoom-large .orbit {
+ -webkit-transform-style: preserve-3d; }
+.view-3D #situation {
+ -webkit-transform: rotateX(75deg); }
+.view-3D #divid {
+ -webkit-transform: rotateX(-90deg); }
+.view-3D .ring {
+ -webkit-transform: rotateX(90deg); }
+.view-3D .object,
+.view-3D .satellitt {
+ -webkit-transform: rotateX(0deg); }
+/* ------------------------zoom----------------------------------------------------------*/
+.zoom-large #situation {
+ width: 100%; }
+.zoom-large.view-3D .scale-stretched #situation {
+ font-size: 40%; } /*originalstr.62*/
+.zoom-large.view-3D .scale-d #situation {
+ font-size: 48%; }
+.zoom-large.view-3D .scale-s #situation {
+ font-size: 14%; }
+/* ---------------------------data-------------------------------------------------------*/
+/* ---------------------------speed-------------------------------------------------------*/
+/* sideral years */
+#activity1 .pos,
+#activity1 .object,
+#activity1.orbit {
+ /*border: 1px solid white;*/
+ -webkit-animation-duration: 6.89016s; }/*2.89016*/
+#activity2 .pos,
+#activity2 .object,
+#activity2.orbit {
+ /*border: 1px solid white;*/
+ -webkit-animation-duration: 8.38237s; }/*7.38237*/
+#activity3 .pos,
+#activity3 .object,
+#activity3.orbit {
+ /*border: 1px solid white;*/
+ -webkit-animation-duration: 11.00021s; }/*12.00021*/
+#activity3 .orbit .pos,
+#activity3 .orbit {
+ /*border: 1px solid white;*/
+ -webkit-animation-duration: 0.89764s; }/*0.89764*/
+#activity4 .pos,
+#activity4 .object,
+#activity4.orbit {
+ /*border: 1px solid white;*/
+ -webkit-animation-duration: 13.57017s; }/*22.57017*/
+/* ------------Streched orbits-----------------------------------------------------------------*/
+.scale-stretched #activity1.orbit {
+ width: 72em; /*32*/
+ height: 72em;
+ margin-top: -36em; /*-16*/
+ margin-left: -36em; }
+.scale-stretched #activity2.orbit {
+ width: 72em; /*40*/
+ height: 72em;
+ margin-top: -36em; /*-20*/
+ margin-left: -36em; }
+.scale-stretched #activity3.orbit {
+ width: 72em; /*56*/
+ height: 72em;
+ margin-top: -36em; /*-28*/
+ margin-left: -36em; }
+.scale-stretched #activity3 .orbit {
+ width: 16em; /*6*/
+ height: 16em;
+ margin-top: -8em; /*-3*/
+ margin-left: -8em; }
+.scale-stretched #activity4.orbit {
+ width: 72em; /*72*/
+ height: 72em;
+ margin-top: -36em; /*-36*/
+ margin-left: -36em; }
+
+/* ------------pictures---------------------------------------------------------------*/
+#divid {
+ background-image: url('group.png'); }
+#activity1 .object {
+ background-image: url('/img/dennis.jpg');}
+#activity2 .object {
+ background-image: url('/img/erling.jpg');}
+#activity3 .object {
+ background-image: url('/img/robert.jpg');}
+#activity3 .satelite {
+ background-image: url('betaling.png');}
+#activity4 .object {
+ background-image: url('/img/stian.jpeg');}