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 generalmente se usan para mover contenido web dentro y fuera de la ventana gráfica. Las animaciones estáticas pueden ser predeterminadas y son predecibles y en general se utilizan para llamar la atención del usuario cambiando la visibilidad, posición, etc. del elemento a animar en la página web. La interfaz de usuario semántica nos brinda muchas variaciones en animaciones estáticas que incluyen Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow.
En este artículo, aprenderemos sobre la animación Semantic UI Static Tada y cómo implementarla con la ayuda de ejemplos de código.
Semantic UI Static Tada animation: Las animaciones estáticas se utilizan para llamar la atención del usuario. La animación semántica de IU estática de Tada atrae la atención del usuario al brindar retroalimentación positiva a la acción.
Sintaxis:
$('.image').transition('tada');
Ejemplo 1: Si hacemos clic en el botón, se llamará a la función y podremos observar la animación de Tada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI tada 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 tada 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 tada Animation
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('tada');
})
</script>
</body>
</html>
Producción:
Animación de Tada estática de interfaz de usuario semántica
Ejemplo 2: cuando la imagen se desplaza , se llamará a la función y podremos observar la animación Semantic UI Static tada .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Tada 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 Tada 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('tada');
})
</script>
</body>
</html>
Producción:
Animación de Tada estática de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#tada
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA