Deslizadores de comparación de espectros

El control deslizante Spectre Comparison es un control deslizante de comparación de imágenes que esencialmente ayuda a distinguir dos fotografías o productos. Como resultado, el usuario puede determinar rápidamente cuál de los dos productos o dos imágenes son mejores . En este artículo, crearemos eso con facilidad con las clases de Spectre.

Deslizadores de comparación de espectros:

control deslizante de comparación: esta clase se usa para envolver ambas imágenes una encima de la otra.
compare-before: esta clase contiene la primera imagen (antes) del control deslizante.
etiqueta de comparación: esta clase se usa para mostrar la etiqueta de la imagen que puede ser cualquier cosa en formato de texto.
comparación después: esta clase contiene la segunda imagen (después) del control deslizante.
compare-resizer: esta clase se utiliza para crear el efecto de control deslizante entre dos imágenes.

Sintaxis:

<div class="comparison-slider">
      <figure class="comparison-before">
          ...
         <div class="comparison-label">..</div>
      </figure>
    <figure class="comparison-after">
         ...
         <div class="comparison-label">..</div>
          <textarea class="comparison-resizer"></textarea>
    </figure>
</div>

Ejemplo 1: En este ejemplo, crearemos una interfaz de comparación de dos imágenes.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Comparison Slider</strong>
        <br><br>
        <div class="comparison-slider">
            <figure class="comparison-before">
                <img class="img-responsive rounded" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                     style="height: 100%">
                <div class="comparison-label">Famous till 2016</div>
            </figure>
          
            <figure class="comparison-after">
                <img class="img-responsive rounded" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                   style="height: 100%">
                <div class="comparison-label">After 2016</div>
                <textarea class="comparison-resizer" readonly></textarea>
            </figure>
        </div>
    </center>
</body>
</html>

Producción:

Ejemplo 2: También podemos usar esta característica como una imagen de cajón. En este ejemplo, crearemos un efecto de imagen de cajón usando solo la clase de comparación posterior .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Comparison Slider</strong>
        <br><br>
        <div class="comparison-slider">
          <figure class="comparison-after">
            <img class="img-responsive rounded" 
                   src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                   style="height: 100%">
            <textarea class="comparison-resizer" ></textarea>
          </figure>
        </div>
    </center>
</body>
</html>

Producción:

Referencia: https://picturepan2.github.io/spectre/experimentals/comparison.html#comparison

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta