Interfaz de usuario semántica | Transición

Posted on by Rudeus Greyrat

La interfaz de usuario semántica es un marco de código abierto que proporciona una animación de transición que generalmente se usa para mover el contenido de la página dentro o fuera de la ventana gráfica. Utiliza jQuery y CSS para crear buenas interfaces de usuario que son muy similares a bootstrap. Tiene muchos elementos para crear páginas web interactivas. Las clases se utilizan para diseñar diferentes elementos en la estructura de la página HTML.

Ejemplo: El siguiente ejemplo muestra cómo los elementos se pueden escalar hacia adentro o hacia afuera de la vista.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
        class="ui container">
         
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <button class="ui button">
            Go out
        </button>
    </div>
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <script>
        $('button').click(function () {
            $('.image').transition('scale');
        })
    </script>
</body>
 
</html>

Producción: 
 

Ejemplo: El siguiente ejemplo muestra las transiciones de acercamiento y alejamiento.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
        class="ui container">
         
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <button class="ui button">
            Zoom
        </button>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
     
    <script>
        $('button').click(function () {
            $('.image').transition('zoom');
        })         
    </script>
</body>
 
</html>

Producción: 
 

Ejemplo: El siguiente ejemplo demuestra la transición de fundido.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <br>
        <button class="ui button one">Fade</button>
        <button class="ui button up">Fade Up</button>
        <button class="ui button down">Fade Down</button>
        <button class="ui button left">Fade Left</button>
        <button class="ui button right">Fade Right</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
     
    <script>
        $('.one').click(function () {
            $('.image').transition('fade');
        })
        $('.up').click(function () {
            $('.image').transition('fade up');
        })
        $('.down').click(function () {
            $('.image').transition('fade down');
        })
        $('.left').click(function () {
            $('.image').transition('fade left');
        })
        $('.right').click(function () {
            $('.image').transition('fade right');
        })        
    </script>
</body>
 
</html>

Producción: 
 

Ejemplo: El siguiente ejemplo demuestra la transición de volteo.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
        class="ui container">
         
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <br>
        <button class="ui button hor">
            Horizontal Flip
        </button>
 
        <button class="ui button ver">
            Vertical Flip
        </button>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <script>
        $('.hor').click(function () {
            $('.image').transition('horizontal flip');
        })
        $('.ver').click(function () {
            $('.image').transition('vertical flip');
        })
    </script>
</body>
 
</html>

Producción: 
 

Ejemplo: El siguiente ejemplo muestra transiciones de vuelo, balanceo y deslizamiento.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <br>
        <button class="ui button fly">Fly Left</button>
        <button class="ui button swing">Swing Left</button>
        <button class="ui button slide">Slide Left</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <script>
        $('.fly').click(function () {
            $('.image').transition('fly left');
        })
        $('.swing').click(function () {
            $('.image').transition('swing left');
        })
        $('.slide').click(function () {
            $('.image').transition('slide left');
        })
    </script>
</body>
 
</html>

Producción: 
 

También puede usar derecha, abajo y arriba.

Ejemplo: El siguiente ejemplo demuestra una animación estática.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
        class="ui container">
         
        <h2>Transitions</h2>
        <img class="ui image medium"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200612171552/image34.png" />
        <br>
        <button class="ui button jiggle">Jiggle</button>
        <button class="ui button flash">Flash</button>
        <button class="ui button shake">Shake</button>
        <button class="ui button pulse">Pulse</button>
        <button class="ui button tada">Tada</button>
        <button class="ui button bounce">Bounce</button>
        <button class="ui button glow">Glow</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <script>
        $('.jiggle').click(function () {
            $('.image').transition('jiggle');
        })
        $('.flash').click(function () {
            $('.image').transition('flash');
        })
        $('.shake').click(function () {
            $('.image').transition('shake');
        })
        $('.pulse').click(function () {
            $('.image').transition('pulse');
        })
        $('.tada').click(function () {
            $('.image').transition('tada');
        })
        $('.bounce').click(function () {
            $('.image').transition('bounce');
        })
        $('.glow').click(function () {
            $('.image').transition('glow');
        })
    </script>
</body>
 
</html>

Salida:se 
 

Publicación traducida automáticamente

Artículo escrito por iamsahil1910 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 *