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.
En general, las animaciones se utilizan para transformar el contenido web dentro y fuera de la ventana gráfica. Las animaciones estáticas no están controladas por ninguna acción del usuario y podemos predecirlas fácilmente cuando se animan de un estado a otro. 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 Jiggle, que es una animación estática junto con la implementación.
Animación de movimiento estático: las animaciones estáticas se utilizan en general para llamar la atención de los usuarios. Static Jiggle Animation llama la atención del usuario sobre la forma del elemento que se va a animar moviendo el elemento.
Sintaxis:
$(....)
.transition('jiggle')
;
Ejemplo: comprendamos ahora la implementación de la animación estática. Tan pronto como hagamos clic en el botón, se llamará a la función y la imagen experimentará la animación de sacudidas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI jiggle 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 Jiggle 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 Jiggle Animation
</button>
</div>
</center>
<script>
$('button').click(function() {
$('.image').transition('jiggle');
})
</script>
</body>
</html>
Producción:
Animación de movimiento estático de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/transition.html#jiggle
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA