Foundation CSS es uno de los mejores marcos receptivos. El framework CSS se adapta a cualquier dispositivo, pantalla y es ampliamente accesible. Podemos crear hermosos sitios web receptivos con la ayuda de Foundation CSS. Es un marco altamente personalizable. Es un marco de código abierto creado por la fundación ZURB.
Foundation CSS Motion UI es una biblioteca para crear animaciones y transiciones de interfaz de usuario flexibles en sitios web. Podemos usar las animaciones integradas o crear nuestras propias animaciones usando esta biblioteca. La referencia de Javascript permite reproducir animaciones en elementos usando javascript. Podemos ejecutar cualquier animación solicitada sin especificarlo en los elementos y se puede modificar usando Javascript.
Foundation CSS Motion UI Javascript Clases de referencia:
- Motion.animateIn: se utiliza para reproducir la animación.
- Motion.animateOut: se utiliza para reproducir la animación.
Sintaxis : seleccione el elemento en el que se reproducirá la animación y luego use la siguiente sintaxis para reproducir la animación:
var elem = $('#img')
var anim = 'spin-in-ccw'
Motion.animateIn(elem, anim)
Ejemplo : en el siguiente ejemplo, tenemos una imagen en la que reproducimos la animación y la animación usando las opciones que usan Motion UI en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Enables the User Interface-->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<!--Enables the funcationality-->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<center>
<div class="ui header green">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>
Foundation CSS Motion UI Javascript Reference
</strong>
<br />
<button class="button" onclick="animateInImage()">
Play In Animation using Javascript
</button>
<br />
<button class="button" onclick="animateOutImage()">
Play Out Animation using Javascript
</button>
</center>
<center>
<img id="img"
class="slow ease"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" />
</center>
<script>
$(document).ready(function() {
$(document).foundation()
})
const animateInImage = () => {
var elem = $('#img') // Element
var anim = 'spin-in-ccw' // Animation name
Motion.animateIn(elem, anim) // Play Animation
}
const animateOutImage = () => {
var elem = $('#img') // Element
var anim = 'spin-out-ccw' // Animation name
Motion.animateOut(elem, anim) // Play Animation
}
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/motion-ui.html#javascript-reference
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA