Add talk draft

MeFoDy · Feb 7, 2024 · 535350b · 535350b
1 parent 647d190
commit 535350b
Show file tree

Hide file tree

Showing 14 changed files with 1,683 additions and 0 deletions.
diff --git a/pretty-transitions/demo/coverflow/index.html b/pretty-transitions/demo/coverflow/index.html
diff --git a/pretty-transitions/demo/lightbox-like/index.html b/pretty-transitions/demo/lightbox-like/index.html
@@ -0,0 +1,57 @@
+<link rel="stylesheet" href="style.css">
+
+<aside id="js-overlay" class="overlay">
+  <div id="js-overlay-target" class="overlay__inner"></div>
+</aside>
+<main>
+  <figure style="--color: #dfe7fd" onclick="toggleImageView(1)">
+    <div>
+      <img id="js-gallery-image-1" class="gallery__image" src="https://images.unsplash.com/photo-1581260466152-d2c0303e54f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Peyto Lake, Canada</figcaption>
+  </figure>
+
+  <figure style="--color: #f8ad9d" onclick="toggleImageView(2)">
+    <div>
+      <img id="js-gallery-image-2" class="gallery__image" src="https://images.unsplash.com/photo-1573057454928-f6eda06245ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Two Jack Lake, Canada</figcaption>
+  </figure>
+
+  <figure style="--color: #d8e2dc" onclick="toggleImageView(3)">
+    <div>
+      <img id="js-gallery-image-3" class="gallery__image" src="https://images.unsplash.com/photo-1571369985645-7859660074fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Crail cottage in Mooroolbark, Australia</figcaption>
+  </figure>
+
+  <figure style="--color: #c1d3fe" onclick="toggleImageView(4)">
+    <div>
+      <img id="js-gallery-image-4" class="gallery__image" src="https://images.unsplash.com/photo-1611029238634-0a9f540a94fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Icefields Parkway, Canada</figcaption>
+  </figure>
+
+  <figure style="--color: #d0f4de" onclick="toggleImageView(5)">
+    <div>
+      <img id="js-gallery-image-5" class="gallery__image" src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Sunlight passing through the tree</figcaption>
+  </figure>
+
+  <figure style="--color: #7bf1a8" onclick="toggleImageView(6)">
+    <div>
+      <img id="js-gallery-image-6" class="gallery__image" src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1336&q=70" />
+    </div>
+    <figcaption>Bridge over a green waterfall</figcaption>
+  </figure>
+</main>
+
+<aside style="display: none" id="js-banner" class="banner">
+  <div class="banner__inner">
+    This browser currently doesn't support View Transitions API. Use Chrome 111 or newer version to view the
+    example.
+  </div>
+</aside>
+
+<script src="script.js"></script>
diff --git a/pretty-transitions/demo/lightbox-like/script.js b/pretty-transitions/demo/lightbox-like/script.js
@@ -0,0 +1,49 @@
+// Select static & shared page elements
+const overlayWrapper = document.getElementById("js-overlay");
+const overlayContent = document.getElementById("js-overlay-target");
+
+function toggleImageView(index) {
+  const image = document.getElementById(`js-gallery-image-${index}`);
+
+  image.classList.add("gallery__image--active");
+
+  const imageParentElement = image.parentElement;
+
+  if (!document.startViewTransition) {
+    moveImageToModal(image);
+    return;
+  }
+
+  const transition = document.startViewTransition(() =>
+    moveImageToModal(image)
+  );
+
+  overlayWrapper.onclick = async function () {
+    if (!document.startViewTransition) {
+      moveImageToGrid(imageParentElement);
+      image.classList.remove("gallery__image--active");
+      return;
+    }
+
+    const transition = document.startViewTransition(() =>
+      moveImageToGrid(imageParentElement)
+    );
+
+    await transition.finished;
+    image.classList.remove("gallery__image--active");
+  };
+}
+
+// Helper functions for moving the image around and toggling the overlay
+
+function moveImageToModal(image) {
+  overlayWrapper.classList.add("overlay--active");
+
+  overlayContent.append(image);
+}
+
+function moveImageToGrid(imageParentElement) {
+  imageParentElement.append(overlayContent.querySelector("img"));
+
+  overlayWrapper.classList.remove("overlay--active");
+}
diff --git a/pretty-transitions/demo/lightbox-like/style.css b/pretty-transitions/demo/lightbox-like/style.css
@@ -0,0 +1,199 @@
+/* SOURCE: https://codepen.io/smashingmag/pen/dyrybPL */
+
+@media (prefers-reduced-motion) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation: none !important;
+    }
+  }
+
+  @supports (view-transition-name: none) {
+    ::view-transition-image-pair(root) {
+      animation-duration: 400ms;
+      animation-timing-function: ease-in-out;
+    }
+
+    ::view-transition-group(active-image) {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    .gallery__image--active {
+      view-transition-name: active-image;
+    }
+  }
+
+  @supports not (view-transition-name: none) {
+    .banner {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background-color: #fae588;
+      text-align: center;
+      z-index: 1;
+    }
+
+    .banner__inner {
+      padding: 1rem 2rem;
+      max-width: 720px;
+      margin: 0 auto;
+    }
+
+    .banner {
+      display: block !important;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  html {
+    overflow: hidden;
+  }
+
+  body {
+    font-family: var(--font-body);
+    display: flex;
+    flex-direction: column;
+    font-family: "Roboto", sans-serif;
+    background-color: #fefae0;
+    overflow: auto;
+    color: #000;
+  }
+
+  main {
+    padding: 3rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 2rem;
+    max-width: 1280px;
+    margin: 0 auto;
+    font-family: "Barlow Condensed", sans-serif;
+  }
+
+  figure {
+    display: block;
+    cursor: pointer;
+    background-color: var(--color);
+    letter-spacing: 0.01rem;
+    border: 2px solid #111;
+    font-size: 24px;
+    font-weight: 700;
+    box-shadow: 5px 5px 0 1px #111;
+  }
+
+  figure div {
+    overflow: hidden;
+    position: relative;
+    background-color: hsl(0, 0%, 0%, 0.3);
+    aspect-ratio: 1;
+    background-position: 50% 50%;
+    background-size: cover;
+  }
+
+  figcaption {
+    padding: 1rem;
+  }
+
+  .overlay {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(0, 0%, 0%, 0.7);
+    width: 100%;
+    height: 100vh;
+    z-index: 2;
+    padding-right: 17px;
+    cursor: pointer;
+  }
+
+  .overlay__inner {
+    padding: 2rem 1rem;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+
+  .overlay:not(.overlay--active) {
+    display: none;
+  }
+
+  .overlay .gallery__image {
+    margin: 0 auto;
+    max-height: calc(100vh - 4rem);
+  }
+
+  .gallery__image {
+    object-fit: cover;
+    object-position: 50% 50%;
+    aspect-ratio: 1;
+  }
+
+  /* CSS custom reset */
+
+  /*
+    1. Use a more-intuitive box-sizing model.
+  */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  /*
+      2. Remove default margin
+    */
+  * {
+    margin: 0;
+  }
+  /*
+      3. Allow percentage-based heights in the application
+    */
+  html,
+  body {
+    height: 100%;
+  }
+  /*
+      Typographic tweaks!
+      4. Add accessible line-height
+      5. Improve text rendering
+    */
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  /*
+      6. Improve media defaults
+    */
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  /*
+      7. Remove built-in form typography styles
+    */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+  /*
+      8. Avoid text overflows
+    */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }