diff --git a/index.html b/index.html index 9653e7a..9b14de8 100644 --- a/index.html +++ b/index.html @@ -19,51 +19,41 @@

scroll.

-
  • Warped Room
  • - - Particle Walker + + Noct
  • - - Wavy Pulsar + + Ink Drop
  • - + Wavy Hairball
  • - - Fireball - -
    • -
  • - - Thomas' Attractor - -
    • -
  • - - Thomas' Attractor + + Live Dots
  • - - Black and White Blobs + + Fireball
  • - - CircleCircle Interaction - +
    + + +
  • @@ -71,33 +61,33 @@

    scroll.
  • - - Live Dots + + GLSL Shader
  • - - GLSL Shader + + Striped Blob
  • - - Endless Mountains + + Thomas' Attractor
  • - - Ink Drop + + Deformation
  • - - Deformation + + Black Holes
  • - - Wavy Hairball + + Particle Walker
  • @@ -106,23 +96,28 @@

    scroll.

  • - - Black Holes + + CircleCircle Interaction
  • - - Smoke + + Endless Mountains
  • - - Noct + + Smoke
  • - Noct + Circle In Circle + +
    • +
  • + + Wavy Pulsar
    • diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store index 940e942..7d947da 100644 Binary files a/src/assets/.DS_Store and b/src/assets/.DS_Store differ diff --git a/src/assets/img/BlackHoles.png b/src/assets/img/BlackHoles.png index b8b58a7..7c9d96a 100644 Binary files a/src/assets/img/BlackHoles.png and b/src/assets/img/BlackHoles.png differ diff --git a/src/assets/img/Deformation.png b/src/assets/img/Deformation.png index 9c3c62d..64ef3c4 100644 Binary files a/src/assets/img/Deformation.png and b/src/assets/img/Deformation.png differ diff --git a/src/assets/img/Ink-Drop.png b/src/assets/img/Ink-Drop.png index 878be2b..12f73c5 100644 Binary files a/src/assets/img/Ink-Drop.png and b/src/assets/img/Ink-Drop.png differ diff --git a/src/assets/img/Noct3.png b/src/assets/img/Noct3.png index 9406ae8..ad432b8 100644 Binary files a/src/assets/img/Noct3.png and b/src/assets/img/Noct3.png differ diff --git a/src/assets/img/Ordered-Chaos.png b/src/assets/img/Ordered-Chaos.png index 9f4a61d..ebaf5d1 100644 Binary files a/src/assets/img/Ordered-Chaos.png and b/src/assets/img/Ordered-Chaos.png differ diff --git a/src/assets/img/fireball.png b/src/assets/img/fireball.png index d6d937d..2977fc6 100644 Binary files a/src/assets/img/fireball.png and b/src/assets/img/fireball.png differ diff --git a/src/assets/img/thomas-attractor.png b/src/assets/img/thomas-attractor.png index e045b26..ce4b8b1 100644 Binary files a/src/assets/img/thomas-attractor.png and b/src/assets/img/thomas-attractor.png differ diff --git a/src/assets/img/warped-room.png b/src/assets/img/warped-room.png index 37acbc7..3ec9150 100644 Binary files a/src/assets/img/warped-room.png and b/src/assets/img/warped-room.png differ diff --git a/src/javascript/loader.js b/src/javascript/loader.js index 34d8ed9..bda8b67 100644 --- a/src/javascript/loader.js +++ b/src/javascript/loader.js @@ -1,6 +1,16 @@ // loader.js window.addEventListener('load', function() { + const loadingScreen = document.querySelector('.loading-screen'); + const loadingText = document.querySelector('.loading-screen .loading'); + setTimeout(function() { - document.body.classList.add('loaded'); - }, 2500); + // Fade out the loading text + loadingText.style.opacity = '0'; + loadingText.style.filter = 'blur(10px)'; + + // After the text fades out, fade out the entire loading screen + setTimeout(function() { + document.body.classList.add('loaded'); + }, 550); // This should match the transition duration in CSS + }, 2750); }); \ No newline at end of file diff --git a/src/styles/loader.css b/src/styles/loader.css index 052232f..c32381c 100644 --- a/src/styles/loader.css +++ b/src/styles/loader.css @@ -15,6 +15,7 @@ .loading-screen .loading { font-family: monospace; + transition: opacity 0.5s ease-out, filter 0.5s ease-out; } .loading-screen .loading:after { @@ -34,4 +35,9 @@ body.loaded .loading-screen { opacity: 0; pointer-events: none; +} + +body.loaded .loading-screen .loading { + opacity: 0; + filter: blur(10px); } \ No newline at end of file