Added old divanim animation with less code

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');}