One place for hosting & domains

      rolagem

      Como estilizar barras de rolagem com o CSS


      Introdução

      Em setembro de 2018, a W3C CSS Scrollbars definiu especificações para a personalização da aparência de barras de rolagem com o CSS.

      Desde 2020, 96% dos usuários da internet já estão utilizando navegadores que suportam a estilização da barra de rolagem do CSS. No entanto, você precisará escrever dois conjuntos de regras CSS para cobrir o Blink e WebKit, bem como os navegadores Firefox.

      Neste tutorial, você irá aprender a como usar o CSS para personalizar barras de rolagem para dar suporte a navegadores modernos.

      Pré-requisitos

      Para acompanhar este artigo, você irá precisar do seguinte:

      Estilizando barras de rolagem no Chrome, Edge e Safari

      Atualmente, a estilização de barras de rolagem para o Chrome, Edge e o Safari está disponível com o pseudoelemento do prefixo de fabricante -webkit-scrollbar.

      Aqui está um exemplo que usa os pseudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

      Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

      Este código funciona nas versões mais recentes do Chrome, Edge e Safari.

      Infelizmente, essa especificação foi oficialmente abandonada pela W3C e provavelmente será descontinuada ao longo do tempo.

      Estilizando barras de rolagem no Firefox

      Atualmente, a estilização de barras para o Firefox está disponível com as novas CSS Scrollbars.

      Aqui está um exemplo que usa as propriedades scrollbar-width e scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

      Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

      Essa especificação possui algumas características em comum com a especificação -webkit-scrollbar para o controle da cor da barra de rolagem. No entanto, atualmente, não há suporte para modificar o preenchimento e arredondamento para o “track thumb”.

      Construindo estilos de barra de rolagem à prova do tempo

      É possível escrever seu CSS de forma a suportar tanto as especificações de -webkit-scrollbar quanto das CSS Scrollbars.

      Aqui está um exemplo que usa scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Os navegadores Blink e WebKit irão ignorar as regras que eles não reconhecem e aplicar as regras de -webkit-scrollbar. Os navegadores Firefox irão ignorar as regras que não reconhecem e aplicar as regras de CSS Scrollbars . Assim que os navegadores Blink e WebKit descontinuarem totalmente a especificação -webkit-scrollbar, eles passarão a utilizar as novas especificações das CSS Scrollbars.

      Conclusão

      Neste artigo, foi apresentada a utilização do CSS para estilizar barras de rolagem e como garantir que esses estilos sejam reconhecidos na maioria dos navegadores modernos.

      Também é possível simular uma barra de rolagem escondendo a barra de rolagem padrão e usando o JavaScript para detectar a altura e a posição de rolagem. No entanto, essas abordagens enfrentam limitações com a reprodução de experiências como a rolagem por inércia (por exemplo, o movimento em decadência ao fazer a rolagem com trackpads).

      Se quiser aprender mais sobre o CSS, confira nossa página de tópico do CSS para exercícios e projetos de programação.



      Source link

      Como criar um efeito de rolagem parallax com CSS puro no Chrome


      Introdução

      O CSS moderno é uma ferramenta poderosa que pode ser usada para criar muitas funcionalidades avançadas de interface de usuário (UI). No passado, essas funcionalidades dependiam de bibliotecas de JavaScript.

      Neste guia, você irá configurar algumas linhas de CSS para criar um efeito de rolagem parallax em uma página Web. Serão usadas imagens de placekitten.com como imagens de fundo de espaço reservado.

      Assim que completar o tutorial, você terá uma página Web com um efeito rolagem parallax de CSS puro.

      Aviso: este artigo usa propriedades de CSS experimentais que não funcionam em todos os navegadores. Este projeto foi testado e funciona no Chrome. Essa técnica não funciona bem no Firefox, Safari e iOS devido a algumas otimizações desses navegadores.

      Passo 1 — Criando um novo projeto

      Neste passo, use a linha de comando para criar uma nova pasta de projeto e arquivos. Para iniciar, abra seu terminal e crie uma nova pasta de projeto.

      Digite o comando a seguir para criar a pasta do projeto:

      Neste caso, foi dado o nome css-parallax à pasta. Agora, entre na pasta css-parallax:

      Em seguida, crie um arquivo index.html em sua pasta css-parallax com o comando nano:

      Todo o HTML para o projeto será colocado neste arquivo.

      No próximo passo, você irá iniciar a criação da estrutura da página.

      Passo 2 — Configurando a estrutura do aplicativo

      Neste passo, será adicionado o HTML necessário para criar a estrutura do projeto.

      Dentro do seu arquivo index.html, adicione o seguinte código:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Esta é a estrutura básica da maioria das páginas que usam o HTML.

      Adicione o código a seguir dentro da etiqueta <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Esse código cria três seções diferentes. Duas terão uma imagem de fundo, e uma terá um fundo simples estático.

      Nos próximos passos, os estilos para cada seção serão adicionados usando as classes que você adicionou no HTML.

      Passo 3 — Criando um arquivo CSS e adicionando o CSS inicial

      Neste passo, você irá criar um arquivo CSS. Em seguida, irá adicionar o CSS inicial necessário para estilizar o site e criar o efeito parallax.

      Primeiro, crie um arquivo style.css em sua pasta css-parallax com o comando nano:

      É aqui que você irá colocar todo o CSS necessário para criar o efeito de rolagem parallax.

      Em seguida, comece pela classe .wrapper. Dentro do seu arquivo styles.css, adicione o seguinte código:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      A classe .wrapper define a perspectiva e as propriedades de rolagem para toda a página.

      A altura do wrapper precisa ser definida como um valor fixo para que o efeito funcione. Utilize a unidade de visor vh definida em 100 para obter a altura completa do visor da tela.

      Ao escalar as imagens, elas irão adicionar uma barra de rolagem horizontal à tela. Desabilite isso adicionando overflow-x: hidden;. A propriedade perspective simula a distância do visor até os pseudoelementos que você irá criar e transformar mais adiante no CSS.

      No próximo passo, você irá adicionar mais CSS para estilizar sua página.

      Passo 4 — Adicionando estilos para a classe .section

      Neste passo, você irá adicionar estilos à classe .section.

      Dentro do seu arquivo styles.css, adicione o código a seguir abaixo da classe wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      A classe .section define as propriedades de tamanho, exibição e texto para as seções principais.

      Defina uma posição de relative para que o filho, .parallax::after , possa estar absolutamente posicionado com relação ao elemento pai. section.

      Cada seção possui uma view-height(vh) de 100 para utilizar a altura total do visor. Esse valor pode ser alterado e definido para qualquer altura que você preferir para cada seção.

      Por fim, as propriedades de CSS restantes são usadas para formatar e adicionar estilização ao texto dentro de cada seção. Elas posicionam o texto no centro de cada seção e adicionam a cor white (branco).

      Em seguida, você irá adicionar um pseudoelemento e estilizá-lo para criar o efeito parallax em duas das seções em seu HTML.

      Passo 5 — Adicionando estilos para a classe .parallax

      Neste passo, você irá adicionar estilos à classe .parallax.

      Primeiro, você irá adicionar um pseudoelemento na classe .parallax a ser estilizado.

      Nota: visite os documentos Web do MDN para aprender mais sobre os pseudoelementos do CSS.

      Adicione o código a seguir abaixo da classe .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      A classe parallax adiciona um pseudoelemento ::after à imagem de fundo e fornece as transformações necessárias para o efeito parallax.

      O pseudoelemento é o último filho do elemento com a classe .parallax.

      A primeira metade do código exibe e posiciona o pseudoelemento. A propriedade transform move o pseudoelemento para trás, longe da câmera, no z-index e então escala ele de volta para preencher o visor.

      Como o pseudoelemento está mais longe, ele aparenta mover-se mais lentamente.

      No próximo passo, você irá adicionar as imagens de fundo e o estilo de fundo estático.

      Passo 6 — Adicionando imagens e imagem de fundo para cada seção

      Neste passo, você irá adicionar as propriedades de CSS finais para adicionar as imagens de fundo e cor de fundo da seção estática.

      Primeiro, adicione uma cor sólida de fundo à seção .static com o código a seguir, após a classe .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      A classe .static adiciona uma imagem de fundo à seção estática que não possui uma imagem.

      As duas seções com a classe .parallax também possuem uma classe extra diferente para cada uma. Use as classes .bg1 e .bg2 para adicionar as imagens de fundo de gatinhos.

      Adicione o código a seguir abaixo da classe .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      As classes .bg1, .bg2 adicionam as respectivas imagens de fundo para cada seção.

      As imagens são do site placekitten. É um serviço para obter fotos de gatinhos para usar como espaços reservados.

      Agora que todo o código para o efeito de rolagem parallax foi adicionado, faça o link para seu arquivo styles.css em seu index.html.

      Neste passo, você irá criar o link do seu arquivo styles.css e abrir o projeto em seu navegador para ver o efeito de rolagem parallax.

      Primeiro, adicione o código a seguir à etiqueta <head> no arquivo index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Agora, abra seu arquivo index.html em seu navegador:

      Gif do efeito de rolagem parallax

      Com isso, você configurou uma página Web funcional com um efeito de rolagem. Confira este repositório do GitHub para ver o código completo.

      Conclusão

      Neste artigo, você configurou um projeto com um arquivo index.html e um styles.css e agora possui uma página Web funcional. Você adicionou a estrutura de sua página Web e criou estilos para as várias seções do site.

      É possível colocar as imagens que você usa ou o efeito parallax mais longe, para que elas se movam mais lentamente. Você terá que alterar a quantidade de pixels nas propriedades perspective e transform. Se não quiser que haja uma imagem de fundo a ser rolada, use background-attachment: fixed; em vez de perspective/translate/scale.



      Source link

      Como implementar uma rolagem suave no React


      Introdução

      A rolagem suave é quando em vez de clicar em um botão e ser imediatamente levado a uma parte diferente da mesma página, o usuário é enviado para lá através de uma animação de rolagem. É um daqueles recursos sutis de IU em um site que fazem uma grande diferença estética.

      Neste artigo, você irá usar o pacote react-scroll no npm para implementar uma rolagem suave.

      Pré-requisitos

      Você precisará do seguinte para completar este tutorial:

      Este tutorial foi verificado com o Node v13.14.0, npm v6.14.5, react v16.13.1 e o react-scroll v.1.7.16.

      Você irá construir um aplicativo simples neste tutorial, mas caso deseje um resumo rápido de como o react-scroll funciona, sinta-se a vontade para consultar estes passos condensados:

      Instale o react-scroll:

      npm i -S react-scroll
      

      Importe o pacote react-scroll:

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Adicione o componente de ligação. O componente <Link /> irá apontar para uma determinada área do seu aplicativo:

      <Link to="section1">
      

      Vamos nos aprofundar mais e construir um pequeno aplicativo React com rolagem suave.

      Passo 1 — Instalar e executar um aplicativo React

      Por questões de conveniência, este tutorial ira usar um projeto iniciador do React (usando o Create React App 2.0) que possui uma barra de navegação (ou navbar) no topo, juntamente com cinco seções distintas de conteúdo.

      Os links na barra de navegação são apenas marcadores de ancoragem neste ponto, mas logo serão atualizados para habilitar a rolagem suave.

      O projeto pode ser encontrado em React With Smooth Scrolling. Observe que esse link é para a ramificação de início. A ramificação mestre inclui todas as alterações finalizadas.

      Captura de tela do repositório GitHub

      Para clonar o projeto, use o comando a seguir:

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      Se você olhar no diretório src/Components, irá encontrar um arquivo Navbar.js que contém o <Navbar> com nav-items correspondentes a cinco diferentes <Section>s.

      src/Components/Navbar.js

      import React, { Component } from "react";
      import logo from "../logo.svg";
      
      export default class Navbar extends Component {
        render() {
          return (
            <nav className="nav" id="navbar">
              <div className="nav-content">
                <img
                  src={logo}
                  className="nav-logo"
                  alt="Logo."
                  onClick={this.scrollToTop}
                />
                <ul className="nav-items">
                  <li className="nav-item">Section 1</li>
                  <li className="nav-item">Section 2</li>
                  <li className="nav-item">Section 3</li>
                  <li className="nav-item">Section 4</li>
                  <li className="nav-item">Section 5</li>
                </ul>
              </div>
            </nav>
          );
        }
      }
      

      Em seguida, se abrir o arquivo App.js no diretório src, verá onde o <Navbar> está incluído juntamente com as cinco <Section>s.

      src/Components/App.js

      import React, { Component } from "react";
      import logo from "./logo.svg";
      import "./App.css";
      import Navbar from "./Components/Navbar";
      import Section from "./Components/Section";
      import dummyText from "./DummyText";
      class App extends Component {
        render() {
          return (
            <div className="App">
              <Navbar />
              <Section
                title="Section 1"
                subtitle={dummyText}
                dark={true}
                id="section1"
              />
              <Section
                title="Section 2"
                subtitle={dummyText}
                dark={false}
                id="section2"
              />
              <Section
                title="Section 3"
                subtitle={dummyText}
                dark={true}
                id="section3"
              />
              <Section
                title="Section 4"
                subtitle={dummyText}
                dark={false}
                id="section4"
              />
              <Section
                title="Section 5"
                subtitle={dummyText}
                dark={true}
                id="section5"
              />
            </div>
          );
        }
      }
      
      export default App;
      

      Cada componente <Section> assume um title (título) e subtitle (subtítulo).

      Como o projeto está usando textos fictícios nas diferentes seções, de forma a reduzir o código repetido, esse texto foi adicionado em um arquivo DummyText.js, importado e passado para cada componente <Section>.

      Para executar o aplicativo, utilize os comandos a seguir.

      • cd React-With-Smooth-Scrolling
      • npm install
      • npm start

      Isso irá iniciar o aplicativo no modo de desenvolvimento e atualizar automaticamente o aplicativo quando for salvar seus arquivos. É possível visualizá-lo no navegador em localhost:3000.

      Captura de tela do aplicativo no navegador

      Agora, é hora de instalar o pacote react-scroll e adicionar essa funcionalidade. Encontre mais informações para o pacote no npm.

      Pacote react-scroll no npm

      Para instalar o pacote, execute o seguinte comando:

      Em seguida, abra o arquivo Navbar.js novamente e adicione um import para duas importações chamadas Link e animateScroll.

      src/Components/Navbar.js

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Observe que o nome animatedScroll foi alterado para scroll para facilitar o uso.

      Com todas as importações definidas, atualize agora seus nav-items para usar o componente <Link>. Esse componente recebe várias propriedades. Leia mais sobre todas elas na página de documentação.

      Por enquanto, preste bastante atenção no activeClass, to, spy, smooth, offset e duration.

      • activeClass – a classe aplicada quando o elemento é atingido.
      • to – o alvo para onde a rolagem é feita.
      • spy – para tornar o Link selecionado quando o scroll estiver na posição do seu alvo.
      • smooth – para animar a rolagem.
      • offset – para rolar pixels adicionais (como um preenchimento).
      • duration – o tempo que leva a animação de rolagem. Isso pode ser um número ou uma função.

      A propriedade to é a mais importante, já que informa ao componente para qual elemento deve ser feita a rolagem. Neste caso, isso será cada uma das suas <Section>s.

      Com a propriedade offset, é possível definir uma quantidade adicional de rolagem a ser feita de forma a chegar em cada <Section>.

      Aqui está um exemplo das propriedades que você usará para cada componente <Link>. A única diferença entre eles será a propriedade to, já que cada uma delas aponta para uma <Section> distinta:

      <Link
          activeClass="active"
          to="section1"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
      >
      

      Será necessário atualizar cada um dos nav-items adequadamente. Com tudo isso adicionado, você deve ser capaz de voltar ao seu navegador (seu aplicativo já deve ter sido reiniciado automaticamente) e ver a rolagem suave em ação.

      A propriedade activeClass permite definir uma classe a ser aplicada no componente <Link> quando o seu elemento to estiver ativo. Um <Link> é considerado ativo se seu elemento to estiver em exibição próximo ao topo da página. Isso pode ser acionado clicando no <Link> em si ou rolando a página até a <Section> manualmente.

      Para provar isso, o Chrome DevTools foi aberto e o quinto <Link> foi inspecionado, assim como mostrado abaixo. Ao clicar nesse <Link> ou manualmente rolar a página até o final, vê-se que a classe ativa foi, de fato, aplicada.

      Visualização do navegador do aplicativo React

      Para aproveitar isso, crie uma classe ativa e adicione um sublinhado ao link. Adicione este pequeno código CSS no arquivo App.css no diretório src:

      src/App.css

      .nav-item > .active {
          border-bottom: 1px solid #333;
      }
      

      Agora, caso volte para o seu navegador e role um pouco na página, perceberá que o <Link> apropriado está sublinhado.

      Visualização do navegador atualizada do aplicativo React

      Passo 4 — Adicionando funções adicionais

      Para finalizar com mais um pouco de conteúdo, este pacote também fornece algumas funções que podem ser chamadas diretamente, como scrollToTop, scrollToBottom, etc., bem como diversos eventos que você pode manipular.

      Em referência a essas funções, tipicamente, o logotipo do aplicativo em uma barra de navegação irá levar o usuário à página inicial ou ao topo da página atual.

      Como um exemplo simples de como chamar uma dessas funções mencionadas, um manipulador de cliques foi adicionado ao nav-logo para trazer o usuário de volta ao topo da página, desta forma:

      src/Components/Navbar.js

      scrollToTop = () => {
          scroll.scrollToTop();
      };
      

      De volta no navegador, você deve ser capaz de rolar a página para baixo, clicar no logotipo na barra de navegação e ser levado de volta para o topo da página.

      Conclusão

      A rolagem suave é um daqueles recursos que pode adicionar um grande valor estético para seu aplicativo. O pacote react-scroll permite que você implemente esse recurso sem uma sobrecarga significativa.

      Neste tutorial, você adicionou uma rolagem suave a um aplicativo e experimentou diferentes configurações. Se tiver curiosidade, explore as outras funções e eventos que este pacote tem a oferecer.



      Source link