Scrollar surgimento da div

Front-end JavaScript
#1


Olá.
Gostaria que me dessem uma luz, vi um efeito no site da Microsoft e gostei.
Ele basicamente para a imagem do lado direito e ao scrollar, scrolla apenas a div contendo o título e conteúdo do lado esquerdo.
Acima um vídeo para demonstração.

Link: https://www.microsoft.com/en-us/d/surface-laptop-go-2/8pglpv76mjhn?activetab=pivot%3Aoverviewtab

1 curtida
#2

Opa. Consegui fazer.

Basicamente com position: sticky

  body{
    height: 300vh;
  }
  .container{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 324px;
    height: 149vh;
  }

  .mexer{
  position: sticky;
  top: 1rem;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .naomexer{
    position: relative;
    top: 100vh;
  }

<div class="container">
  <div class="naomexer"> 
    <h1>TESTE  STICKY</h1>
    <p>Example One</p>
    <p></p>Example 2</p>
  </div>
  <div class="mexer">
    <img src="https://jornalromaria.com.br/uploads/imagens/gutters-are-the-padding.png" alt="">
  </div>
</div>
1 curtida