<input type= "slide"> Ian Simon Märjama

The project is the culmination of two months of work during residency at post-gallery.online. It focuses on the virtual space and how to orient your experience in it. Bringing into light an element and its associated function that I have taken for granted. What lies above, in between and under?

What? → Slider → process → slide → why? → tool → taken → for → granted → where? → virtual → space → top → bottom → right → left → code → connections → structure? → html → visual → css → function → java → browser → communication → abstraction → Slider? → me? → variable

Ian-Simon Märjama (b. 1993) is an artist who lives and works in Tallinn and Berlin. He graduated from the Painting Department of the Estonian Academy of Arts BA (2016) and the Department of Contemporary Art MA (2020). He has attended exchange studies at the Vienna Academy of Arts (Akademie der bildenden Künste Wien).

best experienced on the computer screen 

    
      <!DOCTYPE html>

      <html>
  
      <head>
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-166975638-1"></script>
      <script>
      
  
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-166975638-1');
      </script>
  
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
      <link rel="icon" type="image/png"sizes="16x16"href="/favicon-16x16.png">
      <link rel="manifest"href"/site.webmanifest">
      <meta charset="utf-8"
      <meta charset="utf-8"
      <metahttp-equiv="Content-Type" content="text/html; charset=us-ascii">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content=<"Online exhibition '<input type=slide">'by Ian Simon Märjama">
      <metaname="keywords"content="online exhibition, ian simon märjama, online gallery, input type slider">
      <title> <input type="slide"> by Ian Simon Märjama </title>
      <title>naitus</title>
  
      <link href="slaidercss.css"  rel="stylesheet">
  
      </head>
  
      <body>
      <input type="range" min="0" max="180" value="0" class=sliderh id="s23">
      <div class="browser"id="browser">
      <img src="./img/Browser.png"id="browserImg">
      </div>
      <div class="bhtml" id="bhtml">
      <img src="./img/HTML_img.png" id="htmlImg">
      </div>
      <div class="bslider" id="bslider">
      <h1 class="tekst" id="tiitel">  
      <input type="slide" Ian Simon Märjama
      
       class="tekst"id="sisu"
       The project is the culmination of two months of work during residency at post-gallery.online. It focuses on the virtual space and how to orient your experience in it. Bringing into light an element and its associated function that I have taken for granted. What lies above, in between and under?
      

      What? → Slider → process → slide → why? → tool → taken → for → granted → where? → virtual → space → top → bottom → right → left → code → connections → structure? → html → visual → css → function → java → browser → communication → abstraction → Slider? → me? → variable
      

      Ian-Simon Märjama (b. 1993) is an artist who lives and works in Tallinn and Berlin. He graduated from the Painting Department of the Estonian Academy of Arts BA (2016) and the Department of Contemporary Art MA (2020). He has attended exchange studies at the Vienna Academy of Arts (Akademie der bildenden Künste Wien).
      
      
      best experienced on the computer screen
      
  
      type="range" min="0" max="100" value="0" class=slider id="s1"
      type="range" min="0" max="100" value="0" class=slider id="s2"
      type="range" min="0" max="100" value="0" class=slider id="s9"
      type="range" min="0" max="100" value="0" class=slider id="s11"
      type="range" min="0" max="100" value="0" class=slider id="s18"
      type="range" min="0" max="100" value="0" class=slider id="s19"
      type="range" min="0" max="100" value="0" class=slider id="s15"
      type="range" min="0" max="100" value="0" class=slider id="s22"
  
      type="range" min="0" max="100" value="0" class=slider id="s4"
      type="range" min="0" max="100" value="0" class=slider id="s12"
      type="range" min="0" max="100" value="0" class=slider id="s17"
      type="range" min="0" max="100" value="0" class=slider id="s14"
      type="range" min="0" max="100" value="0" class=slider id="s20"
  
      type="range" min="0" max="100" value="0" class=slider id="s1"
      type="range" min="0" max="100" value="0" class=slider id="s1"
      type="range" min="0" max="100" value="0" class=slider id="s1"
      type="range" min="0" max="100" value="0" class=slider id="s1"
    
  
    
      * {
          box-sizing: border-box;
        } 
        
        @font-face {
          font-family: Source Code Pro;
          src: url("SourceCodePro-Regular.ttf");
          font-display: block;
        }
        
        .tekst {
          top: 40%;
          position: absolute;
          opacity: 0;
          z-index: 0;
        }
        
        h1 {
          font-size: 7vw;  
          text-align: left;
          font-family: Source Code Pro;
          margin-top: 6%;
          margin-left: 5%;
          width: 40%;
          position: absolute;
          z-index: 0;
              }
              
        h2 {
          font-size: 0.72vw; 
          text-align: right;
          font-family Source Code Pro;  
          margin-top 10%;
          right 4%;
          position: relative;
          z-index: 0;
          width: 40%;
          border-style: solid;
          border-color: lightgray;
          color: grey;
           }  
      
        h3 {
          font-size: 0.7vw; 
          text-align: center;
          font-family: Source Code Pro;
          letter-spacing: 0.7vh;  
          margin-top 30%;
          right 4%;
          position: relative;
          z-index: 0;
          width: 15%;
          border-style: solid;
          border-width: 0.1vw;
          border-color: rgb (0, 0, 0);
          color: rgb (0, 0, 0);
          background-color: rgb (243, 243, 243);
           }  
        
        .bslider {
          width: 94%;
          height: 94%;
          overflow: visible;
          position: absolute;
          margin: auto;
          z-index: 1;
          left: 3%;
        }
        
        .bbslider {
          position: relative;
          width: 100%;
          height 100%;
          overflow visible;
          display block;
          z-index 1;
          opacity 0;
        }
        
        #sliderImg {
          width: inherit;
          height: inherit;
          object-fit: contain;
          position: absolute;
          z-index: 1;
        }
        
        .bcss {
          left: 2%;
          bottom: 2%;
          right: 2%;
          width: 100%;
          height: 100%;
          min-width: 100%;
          min-height 100%;
          overflow: visible;
          display: none;
          visibility: hidden;
          position: absolute;
          opacity: 1;
          z-index: 2;
        }
      
        #CssImg {
          width: inherit;
          height: inherit;
          object-fit: contain;
          position: absolute;
          z-index: 2;
        }
      
        .bjava {
          top: 120%;
          width: 96vw;
          height: 96vh;
          min-width: 96vw;
          min-height: 96vh;
          overflow: visible;
          margin: auto;
          position: absolute;
          display: none;
          opacity: 1;
          z-index: 3;
        }
      
        #javaImg {
          width: inherit;
          height: inherit;
          object-fit: contain;
          position: absolute;
          z-index: 3;
        }
      
        .bhtml {
          width: 100%;
          height: 100%;
          min-width: 100%;
          min-height: 100%;
          overflow: hidden;
          display: none;
          position: absolute;
          opacity: 1;
          z-index: 1;
        }
      
        #htmlImg {
          width: inherit;
          height: inherit;
          object-fit: contain;
          position: absolute;
          z-index: 1;
          opacity: 1;
        }
      
        .browser {
          width: 0vw;
          height: 0vh;
          min-width: 0vw;
          min-height: 0vh;
          overflow: hidden;
          margin: auto;
          display: none;
          position: absolute;
          opacity: 1;
          z-index: 1;
        }
      
        #browserImg {
          width: inherit;
          height: inherit;
          object-fit: contain;
          position: absolute;
          z-index: 1;
        }
      
        .slider {
          z-index: 7;
          left: 30%;
          display: block;
          -webkit-appearance: none;
          appearance: none;
          width: 40vw;
          height: 2vh;
          opacity: 1;
          border: 11pxsolid gray;
          -webkiy-transition: .2s;
          transition: opacity .2s;
          background-color: rgb (230, 230, 230);
          position: absolute;
          transfrom: rotatez(-90deg);
        }
      
        .slider:hover {
          opacity: 0.5;
        }
      
        .slider::-webkit-slider-thumb {
          z-index: 7;
          -webkit-appearance: none;
          appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
          transfrom: rotatez(-90deg);
        } 
      
        .slider::-moz-range-thumb {
          z-index: 7;
          -webkit-appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
          transfrom: rotatez(-90deg);
        } 
      
        .sliderhs {
          z-index: 7;
          display: block;
          -webkit-appearance: none;
          appearance: none;
          border: 11pxsolid gray;
          width: 60vw;
          height: 2vh;
          opacity: 1;
          -webkiy-transition: .2s;
          transition: opacity .2s;
          margin: 0;
          position: absolute;
          background-color: rgb (230, 230, 230);
        }
      
        .sliderh:hover {
          opacity: 0.5;
        }
      
        .sliderh::-webkit-slider-thumb {
          z-index: 7;
          -webkit-appearance: none;
          appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
        } 
      
        .sliderh::-moz-range-thumb {
          z-index: 7;
          -webkit-appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
        } 
      
        .skaalakaust {
          top: 24%;
          left: 50%;
          width: 13vw;
          height: 25vh;
          min-width: 13vw;
          min-height: 25vh;
          position: relative;
          overflow: auto;
          display: block;
          z-index: 6;
        }
      
        #skaala {
          width: inherit;
          height: 20vh;
          margin-top: 2vh;
          position: inherit;
          object-fit: contain;
        }
      
        .koodkaust {
          top: 45%;
          left: 8%;
          width: 11vw;
          height: 13vh;
          min-width: 11vw;
          min-height: 5vh;
          position: absolute;
          overflow: auto;
          display: none;
          z-index: 8;
          opacity: 0;
        }
      
        #CssKood {
          margin: none;
          width: inherit;
          position: inherit;
        }
      
        .javaKoodKaust {
          top: 80%;
          left: 8%;
          width: 11vw;
          height: 13vh;
          min-width: 11vw;
          min-height: 5vh;
          position: absolute;
          overflow: auto;
          display: none;
          z-index: 8;
          opacity: 0;
        }
      
        #htmlKoodKaust {
          top: 13%;
          left: 8%;
          width: 11vw;
          height: 13vh;
          min-width: 11vw;
          min-height: 5vh;
          position: absolute;
          overflow: auto;
          display: none;
          z-index: 8;
          opacity: 0;
        }
      
        #s1 {
          display: block;
          top: 50%;
        }
      
        #s2 {
          position: relative;
          display: none;
          margin: auto;
          left: 2%;
          top: 5%;
        }
      
        #s3 {
          display: none;
          position: relative;
          margin: auto;
          top: 24vh;
        }
      
        #s4 {
          position: relative;
          display: none;
          width: 10vw;
          top: 2vh;
        }
      
        #s5 {
          display: none;
          top: 20%;
          left: 20%;
        }
      
        #s6 {
          display: none;
          top: 20%;
          left: 40%;
        }
      
        #s7 {
          top: 30%;
          left: 50%;
          display: none;
        }
      
        #s9 {
          width: 40vh;
          display: none;
          float: right;
          top: 73%;
          left: 100%;
        }
      
        #s10 {
          left: 32%;
          position: relative;
          display: none;
          top: 48vh;
        }
      
        #s11 {
          width: 40vh;
          display: none;
          top: 73%;
          left: 99%;
        }
      
        #s12 {
          top: 5%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
        }
      
        #s13 {
          left: 7%;
          top: 5%;
          position: relative;
          display: none;
          float: right;
          width: 10vw;
          height: 2vh;
        }
      
        #s14 {
          top: 7%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
        }
      
        #s15 {
          left: 0%;
          top: 85%;
          width: 40vw;s
          display: none;
        }
      
        #s16 {
          left: 7%;
          top: 9%;
          position: relative;
          display: none;
          float: right;
          width: 10vw;
          height: 2vh;
        }
      
        #s17 {
          top: 9%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
        }
      
        #s18 {
          left: 40%;
          top: 55%;
          opacity: 0;
          width: 25vw;
          display: none;
        }
      
        #s19 {
          top: 11%;
          left: 40%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
          opacity: 0;
        }
      
        #s20 {
          top: 11%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
        }
      
        #s21 {
          opacity: 0;
          display: none;
          top: 26%;
          left: 40%;
          width: 30vw;
        }
      
        #s22 {
          top: 14%;
          left: 45%;
          position: relative;
          display: none;
          width: 10vw;
          height: 2vh;
          opacity: 1;
        }
        
        #s23 {
          position: absolute;
          display: none;
          left: 0%;
        }
      
        #s24 {
          z-index: 8;
          display: none;
          -webkit-appearance: none;
          appearance: none;
          border: 11pxsolid gray;
          width: 10vw;
          height: 2vh;
          opacity: 1;
          -webkiy-transition: .2s;
          transition: opacity .2s;
          margin: 0;
          position: absolute;
          background-color: rgb (230, 230, 230);
        }
      
        #s24:hover {
          opacity: 0.5;
        }
      
        #s24::-webkit-slider-thumb {
          z-index: 7;
          -webkit-appearance: none;
          appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
        } 
      
        .sliderh::-moz-range-thumb {
          z-index: 7;
          -webkit-appearance: none;
          height: 2vh;
          width: 1vw;
          background-color: gray;
          cursor: pointer;
        } 
      
        .phone {
          height: 15%;
          width: 40%;
          top: 30%;
          left: 30%;
          border: 3pxsolid gray;
          background-color: light gray;
          border-radius: rotate 1.5s ease-in-out infinite alternate;
          animation: 10px;
          display: none;
          position: absolute;
          object-position: center;
          z-index: 10;
        }
      
        .message {
          width: 98%;
          text-align: center;
          color: rgb (0, 0, 0);
          font-size: 1em;
          top: 60%;
          position: absolute;
          z-index: 10;
          display: none;
          font-family: Source Code Pro;
        }
      
        @keyframes rotate {
          0% {
              transform: rotate(-90deg)
            }
            50% {
              transform rotate0deg)
            }
            100% {
              transform rotate(0deg)
            }
        }
    
  
    
const sisu = document.getElementById("sisu");
const tiitel = document.getElementById("tiitel");
const slider = document.getElementById("s1");
const slider2 = document.getElementById("s2");
const slider3 = document.getElementById("s3");
const slider4 = document.getElementById("s4");
const slider5 = document.getElementById("s5");
const slider6 = document.getElementById("s6");
const slider9 = document.getElementById("s9");
const slider10 = document.getElementById("s10");
const slider11 = document.getElementById("s11");
const slider12 = document.getElementById("s12");
const slider13 = document.getElementById("s13");
const slider14 = document.getElementById("s14");
const slider15 = document.getElementById("s15");
const slider16 = document.getElementById("s16");
const slider17 = document.getElementById("s17");
const slider18 = document.getElementById("s18");
const slider19 = document.getElementById("s19");
const slider20 = document.getElementById("s20");
const slider21 = document.getElementById("s21");
const slider22 = document.getElementById("s22");
const slider23 = document.getElementById("s23");
const slider24 = document.getElementById("s24");
const koodkaust = document.getElementById ("koodkaust");
const skaalakaust = document.getElementById ("skaalakaust");
const Csskood = document.getElementById("CssKoodKaust");
const javaKood = document.getElementById("javaKoodKaust");
const htmlKood = document.getElementById ("htmlKoodKaust");
const bslider = document.getElementById("bslider");
const bbslider = document.getElementById("bbslider");
const bjava = document.getElementById("bjava");
const bcss = document.getElementById("bcss");
const bhtml = document.getElementById("bhtml");
const browser = document.getElementById("browser");
const sliderImg = document.getElementById("sliderImg");
const CssImg = document.getElementById("CssImg");
const javaImg = document.getElementById("javaImg");
const htmlImg = document.getElementById("htmlImg");
slider.addEventListener("input", move);
slider.addEventListener("input", s2);
slider2.addEventListener("input", b1);
slider3.addEventListener("input", sliderkood);
slider3.addEventListener("input", s4s3s9);
slider4.addEventListener("input", s4b2bb2);
slider6.addEventListener("input", s6s14s15);
slider6.addEventListener("input", s6s16);
slider9.addEventListener("input", s9bjava);
slider9.addEventListener("input", s9s10);
slider10.addEventListener("input", s10s3s11);
slider3.addEventListener("input", s3s4s12);
slider12.addEventListener("input", s12sliderImg);
slider11.addEventListener("input", s11s10s3);
slider11.addEventListener("input", javaanim);
slider13.addEventListener("input", s13koodkaust);
slider14.addEventListener("input", s14javaImg);
slider15.addEventListener("input", s15bbslider);
slider15.addEventListener("input", s15s17);
slider16.addEventListener("input", s16javakood);
slider17.addEventListener("input", s17htmlimg);
slider18.addEventListener("input", s18kood);
slider19.addEventListener("input", s19browser);
slider20.addEventListener("input", s20browser);
slider21.addEventListener("input", s21CssImg);
slider22.addEventListener("input", all);
slider23.addEventListener("input", s23flip);
slider24.addEventListener("input", reload);

function all() {
  a = 0)
    id = setInterval(frame, 500);
    function frame() {   
    if (a == 200) {
      slider22.style.display = "none";
      slider24.style.display = "block";
      clearInterval(id);
    } else {
      allsliders.forEach(change)
      allslidersh.forEach(change)
      function change(element) {
        element.style.width = a + "vw";
          element.style.height = a + "vh";
      }
      a++;
    }
    }
  }

  function reload() {
    pos = slider24.value;
    if (pos == 100) {
    location.reload(); 
    }
  } 
  
function move() {
  var pos = slider.value;
  sisu.style.setProperty("opacity", pos / 100);
  tiitel.style.setProperty("opacity", pos / 100);
}


function s2() {
  var pos = slider.value;
  if (pos == 100) {
    slider2.style.visibility="visible";
    slider2.style.opacity= pos / 100 ;
  } else {
    slider2.style.display="none";
  }
}

function b1() {
  var pos = slider2.value;
  if (pos >= 1) {
    slider.style.display="none";
    sisu.style.display="none";
    tiitel.style.display="none";
    slider3.style.display="block";
    sliderImg.style.display="block";
    skaalakaust.style.display="block";
    bbslider.style.display="block";
    bbslider.style.opacity= pos / 100 ;
    notice.style.display="none";
  } else {
    slider.style.display="block";
    sisu.style.display="block";
    tiitel.style.display="block";
    bbslider.style.display="block";
    sliderImg.style.display="visible";
    skaalakaust.style.display="visible";
    notice.style.display="block";
  }
}

function sliderkood() {
  let pos = slider3.value;
  skaalakaust.style.setProperty("left", pos + "%");
  if (pos == 3) {
    slider4.style.display="block";
  }
}

function s3s4s12() {
  pos = slider3.value;
  pos2 = slider4.value;
  if (pos2 > 70 && pos >  80)  {
    slider12.style.display="block";
    slider13.style.display="block";
  }
}

function s12sliderImg() {
  let pos = slider12.value;
  sliderImg.style.opacity= pos / 100   }
}

function s4b2bb2() {
  var pos = slider4.value;
  if (pos != 0) {
    slider4.style.display="block";
    slider4.style.display="block";
    slider4.style.opacity= pos / 100 ;
    slider4.style.opacity= 8 / pos;
  if (pos == 100) {
    slider2.style.display="none";
  }
  }
}

function s6b4bb4() {
  var pos = slider6.value;
  if (pos != 0) {
    bhtml.style.opacity= pos / 100 
    bhtml.style.display="block";
    htmlImg.style.display="block";
  } else {}
    bhtml.style.display="none";
  }
}

function s4s3s9() {
  pos = slider3.value;
  pos2 = slider4.value;
  if (pos == 100 && pos ==  100)  {
    slider9.style.display="block";
  }
}

function s9bjava() {
  pos = slider9.value;
  bcss.style.transform= "rotate(" + (pos*3.6) + "deg)";
  bbslider.style.transform= "rotate(" + (-pos*3.6) + "deg)";
}

function s9s10() {
  pos = slider9.value;
  if (pos > 50)  {
    slider10.style.display="block";
  }
}

function s10s3s11() {
  pos = slider10.value;
  slider3.value = pos;
  skaalakaust.style.setProperty("left", slider3.value + "%");
  if (pos == 50)  {
    slider11.style.display="block";
  }
}

function s11s10s3() {
  pos = slider11.value;
  slider3.style.transform= "rotate(" + (-pos*3.6) + "deg)";
  if (pos == 100)  {
    bjava.style.display="block";
    slider6.style.display="block";
  }
}

function javaanim() {
  pos=slider11.value;
  slider21.style.display = "block";
  var id = null;
  i = 101;
  if (pos == 100) {
    clearInterval(id);
  id = setInterval(frame, 100);
  function frame() {
    if (i == 1) {
      clearInterval(id);
    } else {
      i--;
      bjava.style.top = i + '%';
      slider21.style.opacity = 1 / i;
    }
  }
} 
}
please rotate your device!