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 en la interfaz de usuario semántica se utilizan para animar el contenido web dentro y fuera de la ventana gráfica. Las animaciones estáticas se utilizan en la interfaz de usuario semántica para llamar la atención del usuario sobre la visibilidad, la apariencia, resaltar un elemento o brindar comentarios. No dependen de la interacción del usuario con la página web y están predeterminados. La interfaz de usuario semántica nos ofrece muchas variaciones en animaciones estáticas que incluyen Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow.
En este artículo, comprenderemos y aprenderemos sobre la animación de pulso estático de interfaz de usuario semántica junto con la implementación y el código de ejemplo.
Animación de pulso estático de interfaz de usuario semántica: la animación de pulso estático de interfaz de usuario semántica se utiliza para llamar la atención del usuario sobre la visibilidad pulsando el elemento que se va a animar.
Sintaxis:
$('.image').transition('pulse');
Ejemplo 1: podemos observar pulsaciones en el elemento tan pronto como hacemos clic en el botón cuando se llama a la función.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI pulse 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 pulse 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 pulse Animation
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('pulse');
})
</script>
</body>
</html>
Producción:
Animación de pulso 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 pulso estático de la interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Pulse 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 Pulse 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('pulse');
})
</script>
</body>
</html>
Producción:
Animación de pulso estático de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#pulse
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA