Eclipsing View Transition

eclipsing-view-transition.markdown

Eclipsing View Transition

A Pen by Vashon Gonzales on CodePen.

License.

index.html

<a
      class="bear-link"
      href="https://twitter.com/intent/follow?screen_name=jh3yy"
      target="_blank"
      rel="noreferrer noopener"
    ><img src="https://framerusercontent.com/images/yoYFVWOVFRbaj0Seqg7eULdo.png">
      <svg
        class="w-9"
        viewBox="0 0 969 955"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="161.191"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="806.809"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="695.019"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <circle
          cx="272.981"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <path
          d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
          fill="currentColor"
        ></path>
        <rect
          x="310.42"
          y="448.31"
          width="343.468"
          height="51.4986"
          fill="#FF1E1E"
        ></rect>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
          fill="currentColor"
        ></path>
      </svg>
    </a>
    <button aria-pressed="false" class="theme-toggle">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
        />
      </svg>
      <span class="sr-only">Toggle Theme</span>
    </button>
    <header>
      <h1>Paygeon<br />Loan Widget</h1>
    </header>
    <main>
      <div class="content">
        <p>
          Add this line of code way up in the <code>head</code> of your website.
        </p>
        <pre>
          <code class="language-js">// CSS styles
var modalStyle = `
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #d3d3d3;
  width: 80%;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}
`;

// Create style element and append CSS
var styleElement = document.createElement("style");
styleElement.innerHTML = modalStyle;
document.head.appendChild(styleElement);

// Create modal structure
var modal = document.createElement("div");
modal.classList.add("modal");

var modalContent = document.createElement("div");
modalContent.classList.add("modal-content");

var closeBtn = document.createElement("span");
closeBtn.classList.add("close");
closeBtn.innerHTML = "&times;";

var iframe = document.createElement("iframe");
iframe.id = "modalIframe";
iframe.style.width = "100%";
iframe.style.height = "80vh";
iframe.style.border = "none";

modalContent.appendChild(closeBtn);
modalContent.appendChild(iframe);
modal.appendChild(modalContent);
document.body.appendChild(modal);

// Add event listener to open modal when button is clicked
document.getElementById("openModalBtn").addEventListener("click", function() {
  modal.style.display = "block";
  loadPageIntoModal("https://paygeon.github.io/Application");
});

// Close the modal when close button is clicked
closeBtn.addEventListener("click", function() {
  modal.style.display = "none";
});

// Close the modal when user clicks outside the modal content
window.addEventListener("click", function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

// Function to load a webpage into the modal
function loadPageIntoModal(url) {
  iframe.src = url;
};</code>
        </pre>
          
      <div>
        <p>
          Then add this line anywhere in the <code>body</code> you want the button to render at.
        </p>
                <pre>
          <code class="language-js">
  
               
<textarea class="npm__react-simple-code-editor__textarea style-WC3pN" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" data-gramm="false" id="style-WC3pN">&lt;button id="YOUR_TRACKING_ID_HERE"&gt;Open Modal&lt;/button&gt;</textarea>
               
    
</code>
        </pre>
      <br>
      <br>
        <a
          href="https://developer.chrome.com/docs/web-platform/view-transitions/"
          target="_blank"
          rel="noopener noreferrer"
          >Level Up Now</a
        >
      </div>
      <img src="https://dxkdvuv3hanyu.cloudfront.net/images/logo-LG-AmexBlueCash11-7.jpeg" alt="" />
    </main>
    <footer>Paygeon &copy; 2024 All Rights Reserved</footer>

script.babel

import Prism from 'https://cdn.skypack.dev/prismjs'

const TOGGLE = document.querySelector(".theme-toggle");

const SWITCH = () => {
  const isDark = TOGGLE.matches("[aria-pressed=true]") ? false : true;
  TOGGLE.setAttribute("aria-pressed", isDark);
  document.documentElement.className = isDark ? 'dark' : 'light'
}

const TOGGLE_THEME = () => {
  if (!document.startViewTransition) SWITCH()
  document.startViewTransition(SWITCH)
};

TOGGLE.addEventListener("click", TOGGLE_THEME);

style.css

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

* {
  box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
  min-height: 100vh;
  color: var(--color);
  background: var(--bg);
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

:root {
	color-scheme: light only;
	--line: color-mix(in lch, canvasText 25%, transparent);
  --color: hsl(0 0% 6%);
  --bg: hsl(0 0% 98%);
  --content-size: 50%;
  --eclipse: 60%;
}

.dark {
	color-scheme: dark only;
  --color: hsl(0 0% 98%);
  --bg: hsl(0 0% 6%);
}

body::before {
  --size: 60px;
  content: '';
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  mask: linear-gradient(-15deg, transparent 60%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

.content {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

a:not(.bear-link) {
	padding: 1rem 2rem;
	border-radius: 12px;
	color: var(--bg);
	text-decoration-line: none;
	background: var(--color);
	font-weight: bold;
	transition: background 0.2s;
/*	justify-self: end;*/
}

.dark a:not(.bear-link):is(:hover, :focus-visible) {
	background: hsl(0 0% 80%);
}

a:not(.bear-link):is(:hover, :focus-visible) {
	background: hsl(0 0% 50%);
}

footer {
	padding: 2rem;
	text-align: center;
	opacity: 0.5;
}

.sr-only {
  position: static;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

h1 {
	font-family: 'EB Garamond', serif;
	font-size: clamp(2rem, 5vw + 1rem, 8rem);
  line-height: 1;
  font-weight: 300;
  margin: 0;
}

header {
	width: var(--content-size);
	max-width: 100%;
	margin: 0 auto;
	min-height: 35vh;
	display: grid;
	align-content: end;
	padding: 0 2rem;
}

main {
  width: var(--content-size);
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
  flex: 1;
}

pre {
  max-width: 100%;
}

p {
  text-align: justify;
  margin: 0;
}

.theme-toggle {
  color: var(--color);
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: transparent;
  transition: background 0.2s;
  cursor: pointer;
  z-index: 10;
}

.theme-toggle:is(:hover, :focus-visible) {
  background: hsl(0 0% 90%);
}

.dark .theme-toggle:is(:hover, :focus-visible) {
  background: hsl(0 0% 30%);
}

img {
  max-width: 100%;
  height: 80%;
  object-fit: stretch;
  width: 35%;
  background: hsl(0 0% 50%);
  border-radius: 1rem 0 0 1rem;
  align-self: end;
  position: fixed;
  top: 50%;
  left: calc(50% + 2rem + (var(--content-size) * 0.5));
  translate: 0 -50%;
  object-position: right center;
  max-height: calc(100vh - 10rem);
}

.dark img {
  filter: brightness(0.75);
}

.theme-toggle[aria-pressed=true] svg path:last-of-type {
  display: block;
}

.theme-toggle svg {
  color: currentColor;
  width: 50%;
}

.theme-toggle[aria-pressed=true] svg path:first-of-type,
.theme-toggle svg path:last-of-type {
  display: none;
}

::view-transition-group(root) {
  animation-duration: 1.25s;
}
::view-transition-new(root),
::view-transition-old(root) {
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation-name: none;
}

::view-transition-old(root) {
  animation-name: reveal-light;
  animation-duration: 3s;
  z-index: 2;
}
.dark::view-transition-new(root) {
  animation-name: reveal-dark;
  animation-duration: 3s;
  z-index: 3;
}
.dark::view-transition-old(root) {
	animation-name: none;
}

@keyframes reveal-dark {
  from {
    clip-path: circle(var(--eclipse) at 200% -200%);
    filter: brightness(0.2);
  }
  40% {
    clip-path: circle(var(--eclipse) at 50% 50%);
  	filter: brightness(0.2);
  }
  to {
  	filter: brightness(1);
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes reveal-light {
  0% {
    filter: brightness(1);
    clip-path: circle(100% at 50% 50%);
  }
  20% {
  	filter: brightness(0.2);
    clip-path: circle(var(--eclipse) at 50% 50%);
  }
  100% {
    filter: brightness(0.2);
    clip-path: circle(var(--eclipse) at -200% 200%);
  }
}

/* Social */
.bear-link {
  color: canvasText;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
  opacity: 1;
}
.bear-link svg {
  width: 75%;
}


/* Prism Code */

/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

.dark code[class*="language-"],
.dark pre[class*="language-"] {
	color: #ccc;
}

code[class*="language-"],
pre[class*="language-"] {
  color: hsl(0 0% 20%);
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 15px;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 1rem;
  margin: 0;
  overflow: auto;
  outline: transparent;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: hsl(0 0% 90%);
}

.dark :not(pre) > code[class*="language-"],
.dark pre[class*="language-"] {
	background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

pre {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.dark .token.punctuation {
  color: #ccc;
}

.token-punctuation {
	color: red;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
  color: hsl(10 100% 50%);
}
.dark .token.boolean,
.dark .token.number,
.dark .token.function {
  color: hsl(20 100% 70%);
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: hsl(280 80% 50%);
}

.dark .token.selector,
.dark .token.important,
.dark .token.atrule,
.dark .token.keyword,
.dark .token.builtin {
  color: hsl(280 80% 80%);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
  color: hsl(140 100% 30%);
}

.dark .token.operator,
.dark .token.entity,
.dark .token.url {
  color: hsl(140 100% 80%);
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

pre {
  border-radius: 12px;
}

.token.entity {
  cursor: help;
}

.token.inserted {
  color: green;
}

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

  .line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
  }

    .line-numbers-rows > span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: 0.8em;
      text-align: right;
    }

span.inline-color-wrapper {
  /*
   * The background image is the following SVG inline in base 64:
   *
   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
   *     <path fill="gray" d="M0 0h2v2H0z"/>
   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
   * </svg>
   *
   * SVG-inlining explained:
   * https://stackoverflow.com/a/21626701/7595472
   */
  background: url("https://framerusercontent.com/images/k1Cr8gysEZgwtS4pK61TGLEqbxI.svg?scale-down-to=512");
  /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
  background-position: center;
  background-size: 110%;

  display: inline-block;
  height: 1.333ch;
  width: 1.333ch;
  margin: 0 .333ch;
  box-sizing: border-box;
  border: 1px solid white;
  outline: 1px solid rgba(0,0,0,.5);
  overflow: hidden;
}

span.inline-color {
  display: block;
  /* To prevent visual glitches again */
  height: 120%;
  width: 120%;
}

div.code-toolbar {
  height: 100%;
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: .3em;
  right: .2em;
  opacity: 1;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button {
  color: #bbb;
  font-size: 1rem;
  padding: 0.5rem;
  font-family: sans-serif;
  background: hsl(0, 0%, 25%);
  border-radius: .5em;
  outline: transparent;
  cursor: pointer;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
/*  background: hsl(0, 0%, 40%);*/
  text-decoration: none;
}