Fundación CSS Orbit usando animación

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end de código abierto que simplifica y agiliza la creación de un sitio web, un correo electrónico o una aplicación receptivos y atractivos. ZURB lo lanzó en septiembre de 2011. Numerosas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Esta plataforma, que se asemeja a SaaS, se basa en el marco Bootstrap. Es más único, flexible y complejo. Debido a su interfaz de línea de comandos, tratar con paquetes de módulos también es un placer. El marco de correo electrónico crea correos electrónicos HTML que son accesibles en todos los dispositivos y compatibles con dispositivos móviles. Con Foundation for Apps, puede crear aplicaciones web totalmente receptivas.

Foundation CSS Orbit se usa para crear el control deslizante que puede deslizar los elementos usando la clase de órbita. Podemos almacenar cualquier tipo de contenido en el slider como texto, imágenes, etc.

Foundation CSS Orbit usando clases de animación:

  • orbit: esta clase se agrega para crear la órbita básica.
  • orbit-container: esta clase se agrega para construir un contenedor orbital.
  • orbit-wrapper: esta clase se agrega para envolver todo el contenedor de órbita dejando las viñetas inferiores.
  • orbit-controls: Esta clase se agrega a los botones que controlarán las diapositivas de la órbita.
  • orbit-image: esta clase se agrega para insertar una imagen en la diapositiva.
  • orbit-previous: esta clase se agrega para atravesar la diapositiva anterior.
  • orbit-next: esta clase se agrega para pasar a la siguiente diapositiva.
  • orbit-slide: Esto se usa para crear una diapositiva en el contenedor de órbita.

Foundation CSS Orbit usando atributos de animación:

  • órbita de datos: este atributo th
  • opciones de datos:
  • diapositiva de datos:

Ejemplo 1: el siguiente código muestra cómo crear un control deslizante básico con solo texto con deslizamiento hacia la izquierda, deslizamiento hacia la derecha, deslizamiento hacia la izquierda y deslizamiento hacia la derecha como valores del atributo de opciones de datos .

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"
href=
 "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>
    <link rel="stylesheet"
href=
 "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"/>
    <link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"/>
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css"/>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
    </script>
  </head>
  
<body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>Foundation CSS Orbit Using Animation</h3>
    </center>
  
    <div class="row float-center " style="width: 38rem; margin-top: 2rem;">
      <div class="columns">
        <div class="orbit" role="region" aria-label="" data-orbit
          data-options=
     "animInFromLeft:slide-in-left; animInFromRight:slide-in-right; 
      animOutToLeft:slide-out-left; animOutToRight:slide-out-right;">
          <ul class="orbit-container">
            <button class="orbit-previous" aria-label="previous">
              <span class="show-for-sr">Previous Slide</span>◀
            </button>
            <button class="orbit-next" aria-label="next">
              <span class="show-for-sr">Next Slide</span>▶
            </button>
            <li class="is-active orbit-slide" style="">
                <div>
                    <h3 class="text-center"> GeeksforGeeks 1 </h3>
                    <p class="text-center">
                        A Computer Science portal for geeks.
                    </p>
  
    
                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center"> This is the 2nd slide </h3>
                    <p class="text-center">
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles.
                    </p>
  
                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">3rd slide faded in from right</h3>
                    <p class="text-center">
                        Computer Science portal
                    </p>
  
    
                </div>
            </li>
          </ul>
          <nav class="orbit-bullets">
            <button class="is-active" data-slide="0">
              <span class="show-for-sr">First slide details.</span
              ><span class="show-for-sr">Current Slide</span>
            </button>
            <button data-slide="1">
              <span class="show-for-sr">Second slide details.</span>
            </button>
            <button data-slide="2">
              <span class="show-for-sr">Third slide details.</span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  
    <script>
      $(document).ready(function () {
        $(document).foundation();
      });
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente código demuestra cómo hacer un control deslizante básico con imágenes con fundido de entrada, fundido de entrada, fundido de salida y fundido de salida como valores del atributo de opciones de datos.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
    </script>
</head>
  
<body>  
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>Foundation CSS Orbit Using Animation</h3>
    </center>
  
      <div class="row float-center" style="width: 38rem;">
        <div class="columns">
          <div class="orbit" role="region" aria-label="" 
               data-orbit data-options="animInFromLeft:fade-in;
               animInFromRight:fade-in; animOutToLeft:fade-out; 
                                        animOutToRight:fade-out;">
            <ul class="orbit-container">
              <button class="orbit-previous" aria-label="previous">
                <span class="show-for-sr">Previous Slide</span>◀</button>
              <button class="orbit-next" aria-label="next"><span
                    class="show-for-sr">Next Slide</span>▶</button>
              <li class="is-active orbit-slide">
                <img class="orbit-image" src="1.png" alt="">
                <figcaption class="orbit-caption">First Slide</figcaption>
              </li>
              <li class="orbit-slide">
                <img class="orbit-image" src="2.png" alt="">
                <figcaption class="orbit-caption">second slide</figcaption>
              </li>
              <li class="orbit-slide">
                <img class="orbit-image" src="3.png" alt="">
                <figcaption class="orbit-caption">Third Slide</figcaption>
              </li>
            </ul>
            <nav class="orbit-bullets">
             <button class="is-active" data-slide="0"><span 
                     class="show-for-sr">First slide details.</span>
               <span class="show-for-sr">Current Slide</span></button>
             <button data-slide="1"><span class="show-for-sr">
                  Second slide details.</span></button>
             <button data-slide="2"><span class="show-for-sr">
               Third slide details.</span></button>
           </nav>
          </div>
        </div>
      </div>
        
    <script>
        $(document).ready(function () {
            $(document).foundation();
        });
    </script>
</body>
  
</html>

Producción:
 

 

Referencia: https://get.foundation/sites/docs/orbit.html#using-animation 

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *