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.
La transición de IU semántica es una animación que se usa para mover el contenido de la página web dentro o fuera de la vista mediante el método de transición de IU semántica.
La transición de zoom de la interfaz de usuario semántica puede acercar el elemento de la página web a la vista desde un punto de vista lejano. Para agregar una transición de zoom a cualquier elemento div o HTML en la interfaz de usuario semántica, usamos la función .transition() con el parámetro «zoom». Esto hace que el elemento se acerque si está fuera de la pantalla y se aleje si está en la pantalla.
Sintaxis:
$('.selector').transition('zoom');
Ejemplo 1: el siguiente ejemplo demuestra la transición de zoom de la interfaz de usuario semántica en el elemento h1 .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI zoom transition</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<style>
.demo{
height: 500px;
width: 500px;
margin-top: 50px;
background-color: green;
color: white;
}
</style>
<body>
<center>
<h1 class="ui green demo">GeeksforGeeks</h1>
<strong>Semantic UI zoom transition</strong><br/>
<br/>
<button class="button"> transition </button>
</center>
<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>
<script>
$('button').click(function () {
$('.demo').transition('zoom');
})
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra la transición de zoom de la interfaz de usuario semántica en el elemento de imagen .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI zoom transition</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<style>
.main{
margin-top: 50px;
}
</style>
<body>
<center>
<h1 class="ui green">GeeksforGeeks</h1>
<strong>Semantic UI zoom transition</strong><br/>
<img src=
"https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png"
class="main"/>
<img src=
"https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png"
class="main"
id="demo"/>
<img src=
"https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png"
class="main"/>
<br/>
<button class="button">
transition
</button>
</center>
<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>
<script>
$( document ).ready(function() {
$('#demo').transition('zoom');
});
$('button').click(function () {
$('.main').transition('zoom');
})
</script>
</body>
</html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/transition.html#zoom
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA