sea & symbols

main/scripts/drag.js

@@ -4,39 +4,16 @@
   		// ------------ DRAG ------------ 
 
 		$( function() {
-	  		$( ".draggable" ).draggable();
+	  		$( ".draggable" ).draggable(
+	  				//{ containment: [-1300,-750,1800,1250] }
+	  			);
 		});
-//{ containment: [-1300,-750,1800,1250] }
-		// ------------ ZOOM -------------
-
-		// $(window).on('wheel', function(event){
-		// 	var zoom_wheel = 1.0;
-
-		// 	// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
-		// 	if(event.originalEvent.deltaY < 0){
-		// 		zoom_wheel += 0.1;
-		// 		var zoom_lvl = zoom_wheel.toString();
-		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
-		// 	}
-		// 	else {
-		// 	    zoom_wheel -= 0.1;
-		// 	    var zoom_lvl = zoom_wheel.toString();
-		// 	    $('#chaos').css('transform', 'scale(' + zoom_lvl + ',' + zoom_lvl + ')');
-		// 	}
-		// });    
 
 
+		// ------------ ZOOM -------------
 
 		function zoom(event) {
 
-			$("body").mousemove(function(event){            
-            	var relX = event.pageX - $(this).offset().left;
-            	var relY = event.pageY - $(this).offset().top;
-
-            	var x_lvl = relX.toString();
-            	var y_lvl = relY.toString();
-            	$('body').css('transform-origin', x_lvl + " " + relY);
-        	});
 
 		    event.preventDefault();
 

main/variations/style.css

@@ -63,11 +63,11 @@ a{  text-decoration: none; }
 
 
 
-              #i {cursor: url('./lemur2.png'), auto;}
+              #i {cursor: url('./arrow.png'), auto;}
               #l {cursor: url('./lemur.png'), auto;}
               #ii {cursor: url('./laby.png'), auto;}
               #n {cursor: url('./mu.png'), auto;}
-              #x {cursor: url('./lemur.png'), auto;}
+              #x {cursor: url('./fish3.png'), auto;}
 
               #spiral { 
                 width: 300px;
@@ -161,6 +161,7 @@ a{  text-decoration: none; }
 .places{
     position: absolute; 
     text-align: center;
+    background-color: white;
   }
               /* -------------- LEMURIA ---------------- */
 
@@ -268,7 +269,13 @@ svg {
     float: right;
 }
 
-path, line {
+path {
+    fill: black;
+    stroke: white;
+    stroke-linecap: round;
+}
+
+line {
     fill: none;
     stroke: white;
     stroke-linecap: round;
@@ -381,3 +388,70 @@ circle{
     transform: rotate(1800deg);
   }
 }
+
+
+
+
+html, body {
+  height: 100%;
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  background-color: black !important;
+  background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.04) 80%, rgba(255, 255, 255, 0.04) 99%, transparent 99%, transparent 100%), 
+  radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.04) 80%, rgba(255, 255, 255, 0.04) 99%, transparent 99%, transparent 100%), 
+  radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.03) 99%, transparent 99%, transparent 100%), 
+  radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.03) 99%, transparent 99%, transparent 100%), 
+  radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), 
+  radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3;
+  background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px;
+  background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  -webkit-animation: wave 15s linear infinite;
+          animation: wave 15s linear infinite;
+}
+
+@-webkit-keyframes wave {
+  0% {
+    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  }
+  20% {
+    background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
+  }
+  40% {
+    background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
+  }
+  60% {
+    background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
+  }
+  80% {
+    background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
+  }
+  0% {
+    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  }
+}
+
+@keyframes wave {
+  0% {
+    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  }
+  20% {
+    background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
+  }
+  40% {
+    background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
+  }
+  60% {
+    background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
+  }
+  80% {
+    background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
+  }
+  0% {
+    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  }
+}