Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Las animaciones nos permiten transformar el contenido web dentro y fuera de la ventana gráfica. La interfaz de usuario semántica tiene muchas animaciones estáticas como Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow. Estas animaciones son predecibles y no dependen de la interacción del usuario con la web. Se utilizan animaciones estáticas para llamar la atención del usuario. En este artículo, conoceremos la animación flash estática de la interfaz de usuario semántica con la ayuda de un ejemplo de código.
Animación flash estática de interfaz de usuario semántica: como ya se mencionó, las animaciones estáticas nos ayudan a llamar la atención del usuario. La animación flash estática en la interfaz de usuario semántica se utiliza para llamar la atención sobre sí misma mediante el parpadeo.
Sintaxis:
$('.image').transition('flash');
Ejemplo 1: El elemento parpadea tan pronto como hacemos clic en el botón en el siguiente ejemplo, llamando así la atención sobre la imagen.
HTML
<html>
<head>
<title>Semantic UI Flash animation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<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>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Static Flash Animation</strong>
<br><br>
<img class="ui image medium"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220212134822/logo-200x200.jpg"/>
<br>
<button class="ui button">
Static Flash Animation
</button>
</div>
</center>
<script>
$('button').click(function() {
$('.image').transition('flash');
})
</script>
</body>
</html>
Producción:
Animación flash estática de interfaz de usuario semántica
Ejemplo 2: el siguiente código muestra la animación flash con el evento de desplazamiento de la imagen del mouse .
HTML
<html>
<head>
<title>Semantic UI Flash animation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<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>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Static Flash Animation</strong>
<br><br>
<img class="ui image medium"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3-200x200.png"/>
<br>
</div>
</center>
<script>
$('img').mouseover(function() {
$('.image').transition('flash');
})
</script>
</body>
</html>
Producción:
Animación flash estática de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/transition.html#flash
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA