El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
La animación estática de interfaz de usuario semántica es un conjunto de animaciones de transición que podemos realizar en un elemento como una imagen o texto.
Tipos de animación estática de interfaz de usuario semántica:
- Jiggle : el elemento se mueve para llamar la atención sobre su forma.
- Flash : El elemento parpadea para llamar la atención sobre sí mismo.
- Sacudir : El elemento se sacude para llamar la atención hacia su posición.
- Pulso : El elemento pulsa para llamar la atención hacia su visibilidad.
- Tada : La animación cuenta que ha tenido lugar una acción positiva.
- Rebote : el elemento rebota como recordatorio.
- Resplandor : el elemento se ilumina para mostrar su posición.
Nota: Reemplace el tipo de animación según sea necesario en la siguiente sintaxis.
Sintaxis:
$('.gfg.icon').transition('jiggle')
Ejemplo : en el siguiente ejemplo, tenemos el ícono y un conjunto de siete botones que realizan cada una de las animaciones anteriores cuando se hace clic.
HTML
<!DOCTYPE html>
<html>
<head>
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
padding: 10px;
margin: 10px;
}
#container1 {
height: 1000px;
}
#container2 {
height: 1000px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>GeeksforGeeks</h1>
</div>
<strong>Semantic UI Static animation</strong>
</center>
</div>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<img src=
"https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg"
alt="GeeksforGeeks"
class="gfg icon"
/>
<br/>
<br/>
<button class="ui button"
onclick="runAnimation('jiggle')">
Jiggle
</button>
<button class="ui button"
onclick="runAnimation('flash')">
Flash
</button>
<button class="ui button"
onclick="runAnimation('shake')">
Shake
</button>
<button class="ui button"
onclick="runAnimation('pulse')">
Pulse
</button>
<button class="ui button"
onclick="runAnimation('tada')">
Tada
</button>
<button class="ui button"
onclick="runAnimation('bounce')">
Bounce
</button>
<button class="ui button"
onclick="runAnimation('glow')">
Glow
</button>
</center>
</div>
<script>
function runAnimation(animation) {
$('.gfg.icon').transition(animation)
}
</script>
</body>
</html>
Producción:
Animaciones estáticas de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/transition.html
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA