diff --git a/main/scripts/drag.js b/main/scripts/drag.js index 2dec971..7ef3a06 100644 --- a/main/scripts/drag.js +++ b/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(); diff --git a/main/variations/arrow.png b/main/variations/arrow.png new file mode 100644 index 0000000..d7e9972 Binary files /dev/null and b/main/variations/arrow.png differ diff --git a/main/variations/fish.png b/main/variations/fish.png new file mode 100644 index 0000000..9e05d4a Binary files /dev/null and b/main/variations/fish.png differ diff --git a/main/variations/fish2.png b/main/variations/fish2.png new file mode 100644 index 0000000..e08bd64 Binary files /dev/null and b/main/variations/fish2.png differ diff --git a/main/variations/fish3.png b/main/variations/fish3.png new file mode 100644 index 0000000..0980b6c Binary files /dev/null and b/main/variations/fish3.png differ diff --git a/main/variations/index.html b/main/variations/index.html index b5f79b6..32eb3da 100644 --- a/main/variations/index.html +++ b/main/variations/index.html @@ -49,20 +49,56 @@
+
+
- Lab_1 - +
+ Lab_1 + clippy + almere + + + + + + + + + + + + +
+ + + +
- Katak Temple +
+ Katak Temple + Vbhus + + + + + + + + + + + +
diff --git a/main/variations/style.css b/main/variations/style.css index 8653ec2..4e1f903 100644 --- a/main/variations/style.css +++ b/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%; + } +}