One place for hosting & domains

      desplazamiento

      Cómo cambiar el estilo de las barras de desplazamiento con CSS


      Introducción

      En septiembre de 2018, las barras de desplazamiento de CSS de W3C definieron especificaciones para personalizar el aspecto de las barras de desplazamiento con CSS.

      A partir de 2020, 96 % de los usuarios de Internet ejecutan navegadores que admiten el estilo de barra de desplazamiento de CSS. Sin embargo, deberá escribir dos conjuntos de reglas de CSS para abarcar Blink y WebKit y también los navegadores de Firefox.

      En este tutorial, aprenderá a usar CSS para personalizar barras de desplazamiento para admitir navegadores modernos.

      Requisitos previos

      Para seguir este artículo, necesitará lo siguiente:

      Agregar estilo a las barras de desplazamiento en Chrome, Edge y Safari

      Actualmente, agregar estilo a las barras de desplazamiento para Chrome, Edge y Safari está disponible con el seudoelemento del prefijo de proveedor -webkit-scrollbar.

      A continuación, se muestra un ejemplo que utiliza los seudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track y ::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 */
      }
      

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Este código funciona en las últimas versiones de Chrome, Edge y Safari.

      Desafortunadamente, W3C abandonó formalmente esta especificación y probablemente quedará obsoleta con el paso del tiempo.

      Agregar estilo a las barras de desplazamiento en Firefox

      Actualmente, aplicar estilo a las barras de desplazamiento en Firefox está disponible con las nuevas barras de desplazamiento de CSS.

      A continuación, se muestra un ejemplo que utiliza las propiedades scrollbar-width y scrollbar-color:

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

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Esta especificación comparte algunos puntos en común con la especificación -webkit-scrollbar para controlar el color de la barra de desplazamiento. Sin embargo, actualmente no se puede modificar el relleno y la redondez del “botón de desplazamiento”.

      Crear estilos de barra de desplazamiento a prueba del futuro

      Puede escribir su CSS de tal manera que sea compatible con las especificaciones -webkit-scrollbar y CSS Scrollbars.

      A continuación, se muestra un ejemplo que utiliza scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::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;
      }
      

      Los navegadores Blink y WebKit ignorarán las reglas que no reconocen y aplicarán las reglas -webkit-scrollbar. Los navegadores de Firefox ignorarán las reglas que no reconocen y aplicarán las reglas de CSS Scrollbars. Una vez que los navegadores Blink y WebKit ya no sean compatibles por completo con la especificación -webkit-scrollbar, regresarán fácilmente a la nueva especificación de las barras de CSS Scrollbar.

      Conclusión

      En este artículo, aprendió a usar CSS para agregar estilo a las barras de desplazamiento y garantizar que estos estilos sean reconocidos en la mayoría de los navegadores modernos.

      También es posible simular una barra de desplazamiento ocultando la barra de desplazamiento predeterminada y usando JavaScript para detectar la altura y la posición de desplazamiento. Sin embargo, estos enfoques tienen limitaciones a la hora de reproducir experiencias como el desplazamiento por inercia (por ejemplo, desactivar el movimiento al desplazarse con trackpads).

      Si desea obtener más información sobre CSS, consulte nuestra página del tema CSS para consultar ejercicios y proyectos de programación.



      Source link

      Cómo crear un efecto de paralaje de desplazamiento con Pure CSS en Chrome


      Introducción

      Modern CSS es una potente herramienta que puede usar para crear diversas funciones avanzadas de interfaz de usuario (UI). En el pasado, estas funciones dependían de las bibliotecas de JavaScript.

      En esta guía, configurará algunas líneas CSS para crear un efecto de paralaje de desplazamiento en una página web. Usará imágenes de placekitten.com como imágenes de marcador de posición en segundo plano.

      Tendrá una página web con un efecto puro de paralaje de desplazamiento de CSS una vez que haya completado el tutorial.

      Advertencia: En este artículo, se utilizan propiedades experimentales de CSS que no funcionan en los distintos navegadores. Este proyecto se probó y funciona en Chrome. Esta técnica no funciona bien en Firefox, Safari e iOS por algunas de las optimizaciones de esos navegadores.

      Paso 1: Crear un nuevo proyecto

      En este paso, utilice la línea de comandos para configurar una nueva carpeta y archivos de proyecto. Para comenzar, abra su terminal y cree una nueva carpeta de proyecto.

      Escriba el siguiente comando para crear la carpeta del proyecto:

      En este caso, nombre la carpeta css-parallax. Ahora, posiciónese en la carpeta css-parallax:

      Luego, cree un archivo index.html en su carpeta css-parallax con el comando nano:

      Pondrá todo el HTML para el proyecto en este archivo.

      En el siguiente paso, comenzará a crear la estructura de la página web.

      Paso 2: Configurar la estructura de la aplicación

      En este paso, añadirá el HTML que necesita para crear la estructura del proyecto.

      Dentro de su archivo index.html, agregue el siguiente 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 es la estructura básica de la mayoría de las páginas web que utilizan HTML.

      Añada el siguiente código en la 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>
      
      

      Este código crea tres secciones diferentes. Dos tendrán una imagen de fondo, y una será un fondo estático y simple.

      En los siguientes pasos, añadirá los estilos para cada sección usando las clases que añadió en el HTML.

      Paso 3: Crear un archivo CSS y agregar el CSS inicial

      En este paso, creará un archivo CSS. Luego, añadirá en el CSS inicial que necesita para diseñar el sitio web y crear el efecto de paralaje.

      Primero, cree el archivo styles.css en su carpeta css-parallax con el comando nano:

      Aquí es donde pondrá todo el CSS que necesita para crear el efecto de paralaje de desplazamiento.

      Luego, comience con la clase .wrapper. Dentro de su archivo styles.css, añada el siguiente código:

      css-parallax/styles.css

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

      La clase .wrapper establece las propiedades de perspectiva y desplazamiento para toda la página.

      La altura del wrapper debe configurarse en un valor fijo para que el efecto funcione. Puede usar la unidad del área de visualización (viewport) vh configurada a 100 para obtener la altura completa del área de visualización de la pantalla.

      Cuando escale las imágenes, se añadirá una barra de desplazamiento horizontal a la pantalla para que pueda deshabilitarla añadiendo overflow-x: hidden;. La propiedad perspective simula la distancia desde el área de visualización a los seudoelementos que creará y transformará más adelante en el CSS.

      En el siguiente paso, va a añadir más CSS para diseñar su página web.

      Paso 4: Añadir estilos a la clase .section

      En este paso, añadirá estilos a la clase .section.

      Dentro de su archivo styles.css, añada el siguiente código debajo de la clase 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;
      }
      

      La clase .section define el tamaño, la pantalla y las propiedades de texto para las secciones principales.

      Establezca una posición de relative para que el elemento secundario, .parallax::after pueda posicionarse de manera absoluta en relación con el elemento principal .section.

      Cada sección tiene un view-height(vh) de 100 para ocupar la altura completa del área de visualización. Este valor puede modificarse y configurarse a la altura que prefiera para cada sección.

      Finalmente, las propiedades de CSS restantes se utilizan para dar formato y agregar estilo al texto dentro de cada sección. Posiciona el texto en el centro de cada sección y agrega un color blanco (white).

      El siguiente paso es añadir un seudoelemento y agregarle estilo para crear el efecto de paralaje en dos de las secciones en su HTML.

      Paso 5: Añadir estilos a la clase .parallax

      En este paso, añadirá los estilos a la clase .parallax.

      Primero, añadirá un seudoelemento en la clase .parallax a la que agregará el estilo.

      Nota: Puede visitar la documentación web de MDN para obtener más información sobre los seudoelementos de CSS.

      Añada el siguiente código debajo de la clase .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;
      }
      ...
      

      La clase .parallax añade un seudoelemento ::after a la imagen de fondo y proporciona las transformaciones necesarias para el efecto de paralaje.

      El seudoelemento es el último elemento secundario del elemento con la clase .parallax.

      La primera mitad del código muestra y posiciona el seudoelemento. La propiedad transform mueve el seudoelemento lejos de la cámara en el z-index y, luego, lo escala de vuelta para llenar el área de visualización.

      Dado que el seudoelemento está más lejos, parece moverse más lentamente.

      En el siguiente paso, añadirá las imágenes de fondo y el estilo de fondo estático.

      Paso 6: Añadir las imágenes y el fondo para cada sección

      En este paso, añadirá las propiedades finales de CSS para añadir las imágenes y el color de fondo de la sección estática.

      Primero, añada un color sólido de fondo a la sección .static con el siguiente código después de la clase .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;
      }
      ...
      

      La clase .static agrega un fondo a la sección estática que no tiene ninguna imagen.

      Las dos secciones con la clase .parallax también tienen otra clase que es diferente para cada una. Utilice las clases .bg1 y .bg2 para añadir las imágenes de fondo de Kitten.

      Añada el siguiente código a la clase .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');
      }
      
      ...
      

      Las clases .bg1, .bg2 añaden las imágenes de fondo respectivas para cada sección.

      Las imágenes son del sitio web placekitten. Es un servicio para obtener imágenes de gatitos y utilizarlas como marcadores de posición.

      Una vez que añada el código completo para el efecto de paralaje de desplazamiento, puede vincularlo al archivo styles.css en el archivo index.html.

      Paso 7: Vincular styles.css y abrir index.html en su navegador

      En este paso, vinculará el archivo styles.css y abrirá el proyecto en su navegador para ver el efecto de paralaje de desplazamiento.

      Primero, añada el siguiente código a la etiqueta <head> en el archivo 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>
      
      ...
      

      Ahora, puede abrir el archivo index.html en su navegador:

      Gif animado del efecto de paralaje de desplazamiento

      Al hacer esto, habrá configurado una página web con un efecto de desplazamiento. Consulte este repositorio de GitHub para ver el código completo.

      Conclusión

      En este artículo, configuró un proyecto con un archivo index.html y styles.css, y ahora tiene una página web funcional. Modificó la estructura de su página web y creó estilos para las diversas secciones en el sitio.

      Las imágenes utilizadas o el efecto de paralaje se pueden alejar aún más para que se muevan más lentamente. Tendrá que cambiar la cantidad de píxeles en las propiedades perspective y transform. Si no desea que la imagen de fondo se desplace en absoluto, utilice background-attachment: fixed; en vez de perspective/translate/scale.



      Source link

      Cómo implementar el desplazamiento suave en React


      Introducción

      El desplazamiento suave es cuando, en vez de hacer clic en un botón y ser dirigido de forma instantánea a una parte diferente de la misma página, el usuario navega allí mediante una animación de desplazamiento. Es una de esas sutiles funciones de la IU en un sitio web que marcan una diferencia estética.

      En este artículo, va a usar el paquete react-scroll en npm para implementar el desplazamiento suave.

      Requisitos previos

      Necesitará lo siguiente para completar este tutorial:

      Este tutorial se verificó con Node v13.14.0, npm v6.14.5, react v16.13.1 y react-scroll v.1.7.16.

      Creará una aplicación sencilla en este tutorial, pero si desea un resumen rápido de cómo funciona react-scroll, consulte estos pasos resumidos:

      Instale react-scroll:

      npm i -S react-scroll
      

      Importe el paquete react-scroll:

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

      Añada el componente de enlace. El componente <Link /> apuntará a un área concreta de su aplicación:

      <Link to="section1">
      

      Vamos a profundizar un poco más y crear una pequeña aplicación React con desplazamiento suave.

      Paso 1: Instalar y ejecutar una aplicación React

      Para mayor comodidad, este tutorial usará un proyecto React de inicio (usando Create React App 2.0) que tiene una barra de navegación (o navbar) en la parte superior junto con cinco secciones de contenido diferentes.

      Los enlaces en la navbar son solo etiquetas de anclaje en este momento, pero las actualizará en breve para permitir el desplazamiento suave.

      Puede encontrar el proyecto en React con desplazamiento suave. Observe que este enlace es para la rama start. La rama master incluye todos los cambios terminados.

      Captura de pantalla del repositorio GitHub

      Para clonar el proyecto, puede usar el siguiente comando:

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

      Si observa el directorio src/Components, encontrará un archivo Navbar.js que contiene la <Navbar> con nav-items que corresponden a cinco <Section> diferente.

      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>
          );
        }
      }
      

      A continuación, si abre el archivo App.js en el directorio src, verá dónde se incluye la <Navbar> junto con las cinco <Section> reales.

      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> asume un título y un subtítulo.

      Ya que este proyecto utiliza texto ficticio en las secciones diferentes, para reducir que se repita el código, este texto se añadió a un archivo DummyText.js, se importa y se pasa a cada componente <Section>.

      Para ejecutar la aplicación, puede usar los siguientes comandos.

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

      Esto iniciará la aplicación en modo de desarrollo y actualizará la aplicación automáticamente cuando la guarda en sus archivos. Puede verla en el navegador en localhost:3000.

      Captura de pantalla de la aplicación en el navegador

      Paso 2: Instalar y configurar el desplazamiento en React

      Ahora, es momento de instalar el paquete react-scroll y añadir dicha funcionalidad. Puede encontrar información para el paquete en npm.

      Paquete react-scroll en npm

      Para instalar el paquete, ejecute el siguiente comando:

      A continuación, abra la copia de seguridad del archivo Navbar.js y añada una importación para dos importaciones nombradas, Link y animateScroll.

      src/Components/Navbar.js

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

      Observe que hemos llamado a animatedScroll solo scroll para facilitar el uso.

      Con todas sus importaciones definidas, ahora puede actualizar sus nav-items para usar el componente <Link>. Este componente tiene varias propiedades. Puede leer sobre todas ellas en la página de documentación.

      Por ahora, preste especial atención a activeClass, to spy, smooth, offset y duration.

      • activeClass: La clase aplicada cuando se llega al elemento.
      • to: El objetivo hasta donde desplazarse.
      • spy: Para seleccionar Link cuando scroll está en su posición objetivo.
      • smooth: Para animar el desplazamiento.
      • offset: Para desplazar px adicional (como padding).
      • duration: El tiempo de la animación de desplazamiento. Esto puede ser un número o una función.

      La propiedad to es la parte más importante, ya que indica al componente hasta qué elemento desplazarse. En este caso, esto será cada una de sus <Section>.

      Con la propiedad offset, puede definir una cantidad adicional de desplazamiento que realizar para llegar a cada <Section>.

      Aquí tiene un ejemplo de las propiedades que usará para cada componente <Link>. La única diferencia entre ellos será la propiedad to ya que cada una apunta a una <Section> diferente:

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

      Deberá actualizar cada uno de los nav-items. Con estos añadidos, debería poder volver a su navegador (su aplicación debería haberse reiniciado automáticamente) y ver el desplazamiento suave en acción.

      Paso 3: Dar estilo a los enlaces activos

      La propiedad activeClass le permite definir una clase para aplicar al componente <Link> cuando su elemento to esté activo. Un <Link> se considera activo si su elemento to está a la vista cerca de la parte superior de la página. Esto puede activarse haciendo clic en el <Link> o desplazándose hasta la <Section> manualmente.

      Para demostrar esto, he abierto las DevTools de Chrome e inspeccionado el quinto <Link> como se muestra a continuación. Al hacer clic en ese <Link> o desplazarme manualmente hasta la parte inferior de la página, observé que la clase activa se ha aplicado de hecho.

      Vista del navegador de la aplicación React

      Para aprovechar esto, puede crear una clase activa y añadir un subrayado al enlace. Puede añadir este trozo de CSS en el archivo App.css en el directorio src:

      src/App.css

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

      Ahora, si vuelve a su navegador y se desplaza un poco, debería ver que el <Link> apropiado está subrayado.

      Vista del navegador actualizada de la aplicación React

      Paso 4: Añadir funciones adicionales

      Para un poco más de contenido, por último, este paquete también proporciona algunas funciones que pueden invocarse directamente como scrollToTop, scrollToBottom, etc. Además de varios eventos que puede administrar.

      En referencia a estas funciones, normalmente, el logotipo de la aplicación en una navbar llevará al usuario a la página de inicio o a la parte superior de la página actual.

      Como ejemplo sencillo de cómo invocar una de estas funciones proporcionadas, añadí un controlador de clic al nav-logo para desplazar al usuario de vuelta a la parte superior de la página, de esta forma:

      src/Components/Navbar.js

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

      De vuelva en el navegador, debería poder desplazarse hacia abajo en la página, hacer clic en el logotipo en la navbar y volver a la parte superior de la página.

      Conclusión

      El desplazamiento suave es una de esas funciones que pueden añadir mucho valor estético a su aplicación. El paquete react-scroll le permite aprovechar esta función sin un esfuerzo significativo.

      En este tutorial, ha añadido el desplazamiento suave a una aplicación y ha experimentado con los diferentes ajustes. Si siente curiosidad, pase algún tiempo explorando las otras funciones y eventos que este paquete ofrece.



      Source link