CodePen Embed - CSS Animation

<div class="app" data-js="app">
  <nav class="menu">
    <ul>
      <li>
        <a href="#inicio">Início</a>
      </li>
      <li>
        <a href="#explorar">Explorar</a>
      </li>
      <li><a href="#notificacoes">Notificações</a></li>
      <li><a href="#mensagens">Mensagens</a></li>
      <li><a href="#salvos">Itens Salvos</a></li>
      <li><a href="#listas">Listas</a></li>
      <li><a href="#perfil">Perfil</a></li>
      <li><button type="button" class="post-button">Publicar</button></li>
    </ul>
  </nav>

  <header class="header">
    <h1 class="header__title">Mural</h1>
    <button type="button" class="header__menu" data-js="menu-button">Menu</button>
    <button type="button" class="header__toggle" data-js="toggle-computation-button" data-js-state="off">Ligar computação pesada</button>
  </header>

  <main class="main">
    <section class="timeline">
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Aristides Fátima</span>
        </div>
        <p class="post__content">
          Webcam boa e barata, recomendações?
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Cristiano Ester</span>
        </div>
        <p class="post__content">
          Clubhouse has already peaked
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Isaías Antelmo</span>
        </div>
        <p class="post__content">Hoje tem gravação do #devhealthy do @devnaestrada ! Prevejo coisas boas! 😁</p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Otávia Gaspar</span>
        </div>
        <p class="post__content">
          Kowalski, Lara, Doc & Einstein e Jareth curtindo meu kit onboarding! Agora quem sabe não rola um conteúdo de insteimentos tb pra ajudar a galera conforme eu vou aprendendo tb 🥰
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Marina Aníbal</span>
        </div>
        <p class="post__content">
          GitHub actions is failing because I changed the case of folder name. I've done what I need to have Git see the a, but it seems like GH Actions is using a cached version or doesn't know how to handle case sensitivity. Any thoughts? Hard to google.
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Raymundo Geraldo</span>
        </div>
        <p class="post__content">
          I'm one of these people now. Kids all have a laptop from school, nobody used the "kids iMac" anymore, so I guess it's mine!
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Frederica Gabriela</span>
        </div>
        <p class="post__content">
          Hoje aproveitei pra dar uma olhada no novo curso do @Willian_justen e acabou saindo esse site aqui, customizei os marcadores pra passar a ideia de que cada lugar tem uma comida típica, projetinho massa =) pra quem quiser ver mais detalhes: n0xt-cool-recipes.vercel.app
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Lygia Andréia</span>
        </div>
        <p class="post__content">
          Computação é fundamentalmente a ciência da abstração e da composição. Ferramentas melhores são aquelas que permitem abstrair e compor de forma mais expressiva.
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Judite Noémia</span>
        </div>
        <p class="post__content">
          Well thi sis neat: 26 people are reading something on my blog right now, but the most popular page only has 3 readers! I have ~80 posts, and ~10 of them are being read right now 😮
        </p>
      </article>
      <article class="post">
        <div class="post__author">
          <div class="post__author__avatar"></div>
          <span class="post__author__name">Sonia Arsénio</span>
        </div>
        <p class="post__content">
          Tenho que falar, me sinto super emocionada de ver o tanto de gente me marcando em posts sobre admiração do meu trabalho. Mesmo que seja somente hoje, saber que estou me tornando referência na vida de algumas pessoas é algo gigante para mim. Dá uma motivação danada! Thanks 🙏 ✨
        </p>
      </article>
    </section>
  </main>
</div>

body {
  background: lightgray;
}

.app {
  position: relative;
  background: white;
  width: 600px;
  height: calc(100vh - 40px);
  margin: 20px auto 0;
  overflow: hidden;
  overflow-y: scroll;
}

.app:before {
  position: absolute;
  content: "";
  display: block;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  pointer-events: none;
}

.app[data-js-open="true"]:before {
  background: rgba(0,0,0,0.2);
}

.app[data-js-open="true"] .menu {
  left: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.menu {
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left: -200px;
  z-index: 2;
  transition: left 0.3s;
  background: white;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  margin-top: 15px;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.menu ul li a {
  display: inline-block;
  font-size: 1.2rem;
  padding: 15px 15px;
  margin: 5px 15px;
  text-decoration: none;
  color: rgb(15, 20, 25);
  border-radius: 30px;
  transition: background 0.3s, color 0.3s;
}

.menu ul li a:hover {
  background: rgb(232, 245, 254);
  color: rgb(29, 161, 242);
}

.post-button {
  font-size: 1.2rem;
  margin: 10px 15px 0;
  background: rgb(29, 161, 242);
  border: 0;
  padding: 10px 15px;
  color: white;
  border-radius: 30px;
  width: calc(100% - 30px);
  box-sizing: border-box;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.post-button:hover {
  box-shadow: rgb(0 0 0 / 8%) 0px 8px 28px;
}

.header {
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.header__toggle[data-js-state="on"] {
  animation: pulse 1s infinite alternate;
}

.header__title {
  margin: 0;
}

.timeline {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.post {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  transition: all 0.3s;
  cursor: pointer;
}

.post:hover {
  padding: 20px;
  background: rgb(29, 161, 242, 0.4);
  box-shadow: rgb(0 0 0 / 8%) 0px 8px 28px;
}

.post__author {
  display: flex;
  gap: 5px;
  align-items: center;
}

.post__author__avatar {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: rgb(29, 161, 242);
  border-radius: 50%;
}

.post__author__name {
  font-weight: bold;
}

.post__content {
  margin: 0;
}

@keyframes pulse {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

let menuButton$ = document.querySelector("[data-js='menu-button']");
let app$ = document.querySelector("[data-js='app']");
let toggleComputationButton$ = document.querySelector(
  "[data-js='toggle-computation-button']"
);
let computationInterval;

menuButton$.addEventListener("click", handleMenuButtonClick);
toggleComputationButton$.addEventListener(
  "click",
  handleToggleComputationClick
);

function handleMenuButtonClick(event) {
  event.stopPropagation();

  app$.setAttribute("data-js-open", "true");
  app$.addEventListener("click", handleAppOpenMenuClick);
}

function handleAppOpenMenuClick() {
  app$.setAttribute("data-js-open", "false");
  app$.removeEventListener("click", handleAppOpenMenuClick);
}

function handleToggleComputationClick() {
  let isOn = toggleComputationButton$.getAttribute("data-js-state") === "on";
  if (isOn) {
    toggleComputationButton$.innerHTML = "Ligar computação pesada";
    toggleComputationButton$.setAttribute("data-js-state", "off");
    clearInterval(computationInterval);
  } else {
    toggleComputationButton$.innerHTML = "Desligar computação pesada";
    toggleComputationButton$.setAttribute("data-js-state", "on");
    computationInterval = setInterval(function () {
      let iterations = 100;
      let multiplier = 1000000;
      console.log("calculatePrimes", calculatePrimes(iterations, multiplier));
    }, 12);
  }
}

/* From MDN https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript */
function calculatePrimes(iterations, multiplier) {
  var primes = [];
  for (var i = 0; i < iterations; i++) {
    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
        // not prime
        isPrime = false;
        break;
      }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }
  return primes;
}

Run Pen

This Pen is owned by Hugo on CodePen.

See more by @hugobessaa on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.