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 se utilizan normalmente para transformar el contenido web dentro y fuera de la ventana gráfica. Las animaciones estáticas se utilizan para llamar la atención del usuario sobre la posición, la visibilidad, etc. y son predeterminadas y predecibles cuando se transforman 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 la animación de movimiento estático de la interfaz de usuario semántica y cómo implementarla con la ayuda de un código de ejemplo.
Semantic UI Static Shake Animation: Static Shake Animation en Semantic UI atrae la atención del usuario hacia su posición agitando el elemento que se va a animar.
Sintaxis:
$('.image').transition('shake');
Ejemplo 1: Una vez que hagamos clic en el botón, se llamará a la función y podremos observar la animación de movimiento estático.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Shake 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 Shake 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 Shake Animation
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('shake');
})
</script>
</body>
</html>
Producción :
Animación de movimiento estático de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Shake 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>
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Static Shake 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('shake');
})
</script>
</body>
</html>
Producción:
Animación de movimiento estático de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#shake
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA