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.
Si deseamos transformar el contenido web dentro y fuera de la ventana gráfica, usamos animaciones. Las animaciones estáticas se utilizan para llamar la atención del usuario y son fácilmente predecibles y no dependen de la interacción del usuario con la 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 de rebote estático de la interfaz de usuario semántica junto con la implementación.
Animación de rebote estático de interfaz de usuario semántica: la animación de rebote estático de interfaz de usuario semántica se utiliza para recordarse a sí mismo cortésmente rebotando y, por lo tanto, llamar la atención del usuario.
Sintaxis:
$('.image').transition('bounce');
Ejemplo 1: cuando se hace clic en el botón, se llamará a la función y podremos observar la animación de rebote estático de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI bounce 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 bounce 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 bounce Animation
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('bounce');
})
</script>
</body>
</html>
Producción:
Animación de rebote estático 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 de rebote estático de la interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Bounce 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 Bounce 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('bounce');
})
</script>
</body>
</html>
Producción:
Animación de rebote estático de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#bounce
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA