Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>The inevitable hybrid reality.</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
  <body>
 
    <h2>
      The inevitable hybrid reality
    </h2>
    Nikki Loef / Thesis 2019
​
  <div class="viewport">
  <div class="scene3D-container">
    <div class="scene3D">
      <div>
        <h3>Wat ik me afvraag?</h3>
        <br>
        <p>
          In de normale wereld hebben we regels en afspraken om ervoor te zorgen dat onze maatschappij zo goede mogelijk kan functioneren. Ik vraag me af of dat ook nodig is voor de hybride wereld die steeds meer vorm krijgt in en om ons heen. Moeten we de hybride wereld met regels gaan sturen of is dat onmogelijk?
          <br>
          Om deze vraag te kunnen beantwoorden moeten een aantal stappen gemaakt worden.
          <br>  
          Wat is een hybride wereld?
          Wie heeft hier al een bijdrage in geleverd en kan me op weg helpen?
          Hoe staat het met regelgeving en hybride?
          <br>
          Met al deze informatie probeer in een aantwoord te vinden op mijn vraag:
          Moeten we de hybride wereld gaan sturen of is dat onmogelijk?
      </p>
      </div>
​
      <div>
        <h3>Wat is de hybride wereld</h3>
        <br>
        <p>
          Als mens zijn wij vanaf onze geboorte al erg geïnteresseerd in alles wat er om ons heen te vinden is en als we ouder worden word deze drang als maar sterker. We zoeken allerlei vormen en manieren om beter en sneller te kunnen werken en denken. Bijvoorbeeld, als je een kunstenaar bent gebruik je een schetsblok of complexe software om je creatieve ideeën uit te denken. Dit zou je kunnen zien als een eerste aanzet tot een hybride wereld.
          <br>
          Leven we in een wereld die steeds meer hybride wordt, een wereld waarin de mens die hier in leeft ook gehybridiseerd is geraakt tussen het fysieke en het digitale bestaan? 
          <br>  
          Ik vraag me af?
          Zijn de online en de offline mens steeds minder gescheiden maar met elkaar versmolten tot één bestaan? Hoewel de technologie niet letterlijk in ons lijf is geïntegreerd, zijn ons lichaam en onze geest dan al vervlochten tot een basisbestaan in het dagelijkse leven zoals we dat nu kennen? Wordt het daardoor steeds moeilijker om te duiden waar waar de digitale wereld ophoud en de fysieke wereld begint?
          We praten immers al met elkaar via media, waar we ook zijn op de wereld. We kijken op buienradar terwijl we buiten ook naar de lucht kunnen kijken, de wind kunnen voelen. We voelen ons naakt zonder de smartphone. We vinden een pacemakere en gehoorapparatuur normaal en een toegangs chip kan al.
        </p>
      </div>
​
      <div>
        <h3>Wat is de hybride wereld</h3>
        <br>
        <p>
            Hybride betekend een nauwe versmelding van ongelijksoortige zaken, bijvoorbeeld natuurlijke en kunstmatige delen (bio-hybride) of menselijke interacties met een technologisch systeem (socio-technisch). De versmelding kan zowel fysiek als non fysiek zijn. Ik denk dat we al lang leven in een hybride bestaan waarin een persoon niet meer los te definiëren is van de technologie om hem heen. De versmelding waarover ik spreek is geen fysieke niet tastbare versmelting, namelijk deze in het fundament van wie we zijn als mens. Ons brein en ons zijn is al lang niet meer zelfstandig en autonoom maar is vergroeid met de technologische vorm van bestaan en daarmee dus een. 
          <br>
          In mijn essay onderzoek ik of de versmelting van het fysieke en digitale bestaan en al heeft plaatsgevonden en we door deze versmelting opnieuw zouden moeten kijken naar de waarde en daarmee de bescherming die we geven aan onze hybride realiteit. 
Digitale mediums vervormen onze nieuwe realiteit en daarmee lijken ze een belangrijk onderdeel van ons lijf om deze realiteit te kunnen betreden. 
          <br>  
          Ik vraag me af?
          Zijn de online en de offline mens steeds minder gescheiden maar met elkaar versmolten tot één bestaan? Hoewel de technologie niet letterlijk in ons lijf is geïntegreerd, zijn ons lichaam en onze geest dan al vervlochten tot een basisbestaan in het dagelijkse leven zoals we dat nu kennen? Wordt het daardoor steeds moeilijker om te duiden waar waar de digitale wereld ophoud en de fysieke wereld begint?
          We praten immers al met elkaar via media, waar we ook zijn op de wereld. We kijken op buienradar terwijl we buiten ook naar de lucht kunnen kijken, de wind kunnen voelen. We voelen ons naakt zonder de smartphone. We vinden een pacemakere en gehoorapparatuur normaal en een toegangs chip kan al.
        </p>
      </div>
​
      <div>Op zoek met Jay David Bolter</h3>
        <br>
        <p>
          Jay David Bolter is de Wesley-voorzitter van New Media en een professor in de School voor Literatuur, Media en Communicatie aan het Georgia Institute of Technology. Zijn studiegebieden omvatten de evolutie van media, het gebruik van technologie in het onderwijs en de rol van computers in het schrijfproces. 
          <br>
          Jay David Bolter publiceerde in 2006 een artikel genaamd “The Desire for Transparancy in an Era of Hybridity”. In dit artikel word beargumenteerd dat de technologische applicaties in ons leven steeds meer hybride worden. Voglens Bolter is het voornaamste verschil dat vroeger in de tijd van de desktop er een vaste plaats was om het internet te betreden. Namelijk van achter je bureau via het scherm van deze computer. Sinds de introductie van de smartphone is dit drastisch veranderd. Vandaag de dag is het internet mobiel en kan in onze zak overal met ons mee naar toe. Dit zorgt ervoor dat wij elk gewenst moment van de dag toegang hebben tot deze technologie. Daarbij is de basis functie van deze mobile telefoon ook niet meer enkel de communicatie tussen de bezitters van deze mobiele telefoon.
​
        </p>
      </div>
​
      <!--Etc.-->
    </div>
  </div>
</div>
</div>
​
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
​
 
@import url("https://fonts.googleapis.com/css?family=Merriweather|Revalia&display=swap&subset=latin-ext" rel="stylesheet");
:root {
  --scenePerspective: 1;
  --scenePerspectiveOriginX: 50;
  --scenePerspectiveOriginY: 30;
  --itemZ: 2;
  --cameraSpeed: 150;
  --cameraZ: 0;
  --viewportHeight: 0;
}
​
.viewport {
  height: calc(var(--viewportHeight) * 1px);
}
​
.viewport .scene3D-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
          perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
  -webkit-perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
          perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
  will-change: perspective-origin;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
​
.viewport .scene3D-container .scene3D {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(calc(var(--cameraZ) * 1px));
          transform: translateZ(calc(var(--cameraZ) * 1px));
  will-change: transform;
}
​
.viewport .scene3D-container .scene3D > div {
  position: absolute;
  display: block;
  width: 100%;
  top: 40%;
}
​
@media only screen and (min-width: 600px) {
  .viewport .scene3D-container .scene3D > div {
    width: 45%;
  }
}
​
.viewport .scene3D-container .scene3D > div:nth-child(2n) {
  left: 0;
}
​
.viewport .scene3D-container .scene3D > div:nth-child(2n + 1) {
  right: 0;
}
​
.viewport .scene3D-container .scene3D > div:nth-child(0) {
  -webkit-transform: translate3D(22%, 30%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px));
          transform: translate3D(22%, 30%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(1) {
  -webkit-transform: translate3D(10%, -3%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px));
          transform: translate3D(10%, -3%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(2) {
  -webkit-transform: translate3D(-15%, -5%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px));
          transform: translate3D(-15%, -5%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(3) {
  -webkit-transform: translate3D(5%, -44%, calc(var(--itemZ) * var(--cameraSpeed) * 3 * -1px));
          transform: translate3D(5%, -44%, calc(var(--itemZ) * var(--cameraSpeed) * 3 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(4) {
  -webkit-transform: translate3D(15%, -22%, calc(var(--itemZ) * var(--cameraSpeed) * 4 * -1px));
          transform: translate3D(15%, -22%, calc(var(--itemZ) * var(--cameraSpeed) * 4 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(5) {
  -webkit-transform: translate3D(10%, -6%, calc(var(--itemZ) * var(--cameraSpeed) * 5 * -1px));
          transform: translate3D(10%, -6%, calc(var(--itemZ) * var(--cameraSpeed) * 5 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(6) {
  -webkit-transform: translate3D(8%, -16%, calc(var(--itemZ) * var(--cameraSpeed) * 6 * -1px));
          transform: translate3D(8%, -16%, calc(var(--itemZ) * var(--cameraSpeed) * 6 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(7) {
  -webkit-transform: translate3D(3%, 20%, calc(var(--itemZ) * var(--cameraSpeed) * 7 * -1px));
          transform: translate3D(3%, 20%, calc(var(--itemZ) * var(--cameraSpeed) * 7 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(8) {
  -webkit-transform: translate3D(10%, 34%, calc(var(--itemZ) * var(--cameraSpeed) * 8 * -1px));
          transform: translate3D(10%, 34%, calc(var(--itemZ) * var(--cameraSpeed) * 8 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(9) {
  -webkit-transform: translate3D(-13%, 21%, calc(var(--itemZ) * var(--cameraSpeed) * 9 * -1px));
          transform: translate3D(-13%, 21%, calc(var(--itemZ) * var(--cameraSpeed) * 9 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(10) {
  -webkit-transform: translate3D(-3%, 47%, calc(var(--itemZ) * var(--cameraSpeed) * 10 * -1px));
          transform: translate3D(-3%, 47%, calc(var(--itemZ) * var(--cameraSpeed) * 10 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(11) {
  -webkit-transform: translate3D(14%, -20%, calc(var(--itemZ) * var(--cameraSpeed) * 11 * -1px));
          transform: translate3D(14%, -20%, calc(var(--itemZ) * var(--cameraSpeed) * 11 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(12) {
  -webkit-transform: translate3D(5%, 25%, calc(var(--itemZ) * var(--cameraSpeed) * 12 * -1px));
          transform: translate3D(5%, 25%, calc(var(--itemZ) * var(--cameraSpeed) * 12 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(13) {
  -webkit-transform: translate3D(-2%, -20%, calc(var(--itemZ) * var(--cameraSpeed) * 13 * -1px));
          transform: translate3D(-2%, -20%, calc(var(--itemZ) * var(--cameraSpeed) * 13 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(14) {
  -webkit-transform: translate3D(16%, 25%, calc(var(--itemZ) * var(--cameraSpeed) * 14 * -1px));
          transform: translate3D(16%, 25%, calc(var(--itemZ) * var(--cameraSpeed) * 14 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(15) {
  -webkit-transform: translate3D(-6%, 37%, calc(var(--itemZ) * var(--cameraSpeed) * 15 * -1px));
          transform: translate3D(-6%, 37%, calc(var(--itemZ) * var(--cameraSpeed) * 15 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(16) {
  -webkit-transform: translate3D(25%, -7%, calc(var(--itemZ) * var(--cameraSpeed) * 16 * -1px));
          transform: translate3D(25%, -7%, calc(var(--itemZ) * var(--cameraSpeed) * 16 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(17) {
  -webkit-transform: translate3D(11%, -25%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px));
          transform: translate3D(11%, -25%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(18) {
  -webkit-transform: translate3D(-7%, -37%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1px));
          transform: translate3D(-7%, -37%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(19) {
  -webkit-transform: translate3D(12%, 22%, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -1px));
          transform: translate3D(12%, 22%, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(20) {
  -webkit-transform: translate3D(21%, 32%, calc(var(--itemZ) * var(--cameraSpeed) * 20 * -1px));
          transform: translate3D(21%, 32%, calc(var(--itemZ) * var(--cameraSpeed) * 20 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(21) {
  -webkit-transform: translate3D(6%, 47%, calc(var(--itemZ) * var(--cameraSpeed) * 21 * -1px));
          transform: translate3D(6%, 47%, calc(var(--itemZ) * var(--cameraSpeed) * 21 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(22) {
  -webkit-transform: translate3D(1%, -42%, calc(var(--itemZ) * var(--cameraSpeed) * 22 * -1px));
          transform: translate3D(1%, -42%, calc(var(--itemZ) * var(--cameraSpeed) * 22 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(23) {
  -webkit-transform: translate3D(7%, -42%, calc(var(--itemZ) * var(--cameraSpeed) * 23 * -1px));
          transform: translate3D(7%, -42%, calc(var(--itemZ) * var(--cameraSpeed) * 23 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(24) {
  -webkit-transform: translate3D(-13%, 49%, calc(var(--itemZ) * var(--cameraSpeed) * 24 * -1px));
          transform: translate3D(-13%, 49%, calc(var(--itemZ) * var(--cameraSpeed) * 24 * -1px));
}
​
.viewport .scene3D-container .scene3D > div:nth-child(25) {
  -webkit-transform: translate3D(12%, 43%, calc(var(--itemZ) * var(--cameraSpeed) * 25 * -1px));
          transform: translate3D(12%, 43%, calc(var(--itemZ) * var(--cameraSpeed) * 25 * -1px));
}
​
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
​
body {
  background-color: #272935;
  color: white;
  padding: 0;
  margin: 0;
}
​
h1 {
  font-family: "Playfair Display SC", serif;
  font-size: 1.5rem;
  color: white;
  margin: 0;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  text-align: center;
}
​
h1 .logo {
  display: block;
  margin: 0 auto;
  max-width: 150px;
}
​
.link {
  color: white;
  margin: 0;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}
​
.scene3D > div {
  padding: 2rem;
}
​
.scene3D > div h2 {
  margin-top: 0;
  font-family: "Playfair Display SC", serif;
  font-size: 1.5rem;
}
​
.scene3D > div:nth-child(0) {
  background-color: transparent;
}
​
.scene3D > div:nth-child(1) {
  background-color: transparent;
}
​
.scene3D > div:nth-child(2) {
  background-color: transparent;
}
​
.scene3D > div:nth-child(3) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(4) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(5) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(6) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(7) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(8) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(9) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(10) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(11) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(12) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(13) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(14) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(15) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(16) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(17) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(18) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(19) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(20) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(21) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(22) {
  background-color: transparent;;
}
​
.scene3D > div:nth-child(23) {
  background-color: transparent;
}
​
.scene3D > div:nth-child(24) {
  background-color: transparent;
}
​
.scene3D > div:nth-child(25) {
  background-color: transparent;
}
 
let cards = [];
​
const perspectiveOrigin = {
  x: parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue(
  "--scenePerspectiveOriginX")),
​
​
  y: parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue(
  "--scenePerspectiveOriginY")),
​
​
  maxGap: 10 };
​
​
document.addEventListener("DOMContentLoaded", function () {
  cards = document.querySelectorAll(".scene3D > div");
  window.addEventListener("scroll", moveCamera);
  window.addEventListener("mousemove", moveCameraAngle);
  setSceneHeight();
});
​
function moveCameraAngle(event) {
  const xGap =
  (event.clientX - window.innerWidth / 2) * 100 / (
  window.innerWidth / 2) *
  -1;
  const yGap =
  (event.clientY - window.innerHeight / 2) * 100 / (
  window.innerHeight / 2) *
  -1;
  const newPerspectiveOriginX =
  perspectiveOrigin.x + xGap * perspectiveOrigin.maxGap / 100;
  const newPerspectiveOriginY =
  perspectiveOrigin.y + yGap * perspectiveOrigin.maxGap / 100;
​
  document.documentElement.style.setProperty(
  "--scenePerspectiveOriginX",
  newPerspectiveOriginX);
​
  document.documentElement.style.setProperty(
  "--scenePerspectiveOriginY",
  newPerspectiveOriginY);
​
}
​
function moveCamera() {
  document.documentElement.style.setProperty("--cameraZ", window.pageYOffset);
}
​
function setSceneHeight() {
  const numberOfItems = cards.length; // Or number of items you have in `.scene3D`
  const itemZ = parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue("--itemZ"));
​
  const scenePerspective = parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue(
  "--scenePerspective"));
​
​
  const cameraSpeed = parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue("--cameraSpeed"));
​
​
  const height =
  window.innerHeight +
  scenePerspective * cameraSpeed +
  itemZ * cameraSpeed * numberOfItems;
​
  // Update --viewportHeight value
  document.documentElement.style.setProperty("--viewportHeight", height);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers