adamsartell

Dropdown menu interaction

From https://dribbble.com/shots/7011449-VR-Menu-Interaction-Pattern

A Pen by Aaron Iker on CodePen.

License.

adamsartell

<nav>
    <ul>
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2" data-offset="40">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
    </ul>
</nav>

<section id="section-1">
    <div>

adamsartell

<div class="box">
    <div class="scroll">
        <div>
            <div class="target">Target</div>
        </div>
    </div>
    <span>In viewport: <strong>false</strong></span>
</div>

<pre><code class="language-js">function inViewport(elem, callback, options = {}) {

adamsartell

Check Task (check.so)

A Pen by Aaron Iker on CodePen.

License.

adamsartell

Confirm confetti button

A Pen by Aaron Iker on CodePen.

License.

adamsartell

Faux 3D Transforms in SVG

Support for 3d transforms in SVG isn't good enough for production...so fake it with some skew & scale!

(also: https://open.spotify.com/track/4fkAWGCbxNizyNwsHlrajH?si=c1THL0jkSwSGZm_JmADbDw)

A Pen by Tom Miller on CodePen.

License.

adamsartell

<div class="content">
  <div class="wrapper">
    <p>
      <strong>
        altBud is a little character who feels sad when they see images without alt tags! They respect your motion preferences too.
      </strong>
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi
      aspernatur quis nam consequuntur iste doloremque blanditiis, ad quos

adamsartell

<button class="cybr-btn">
  Cyber<span aria-hidden>_</span>
  <span aria-hidden class="cybr-btn__glitch">Cyber_</span>
  <span aria-hidden class="cybr-btn__tag">R25</span>
</button>
<button class="cybr-btn">
  Buttons<span aria-hidden>_</span>
  <span aria-hidden class="cybr-btn__glitch">Buttons_</span>
  <span aria-hidden class="cybr-btn__tag">R25</span>
</button>

adamsartell

h1 Resize Window
.container
  .device
    .frame
      .screen