1. Enorable
  2. Lenguajes De Programación
  3. Jquery
1
0
 
vistas: 032
Joswald Oropeza
| 04/08/2020

Animación de borde superior del Documento HTML con jQuery

Animando el borde superior de un documento HTML con jQuery Core y jQuery Color, para dar mayor dinamismo y atractivo a una página web.

Existen múltiples recursos en la actualidad para dar atractivo y dinamismo a una página web mediante el uso de códigos de JavaScript y jQuery, pero en esta oportunidad vamos a mostrar una manera «sencilla» de hacerlo sin necesidad de implementar @keyframes de CSS.

Puede ver el resultado de esta explicación a través de una demo.

Ads by Bluehost


Para comenzar a explicar nuestro código jQuery es necesario tomar en cuenta los siguientes puntos:

  • Se requieren conocimientos básicos de JavaScript y jQuery
  • Se requiere el uso de jQuery Color para dar color al borde de la animación
  • El código implementado fue probado con el uso de las versiones más recientes de jQuery (jQuery Core - All 3.x Versions) y la versión más reciente de jQuery Color
  • Se establece "use strict"
  • La configuración requiere la definición de: "iteration", "speed", "left", "width" y "color"
  • "__bordertop_animation__" es el nombre de la función anónima o expresión de función
  • La función anónima recibe un parámetro de tipo "string" que se refiere al nombre de la clase "_animation_border_" ubicada en el Documento como un elemento
  • La animación se ejecuta en cada llamada realizada al contenido de la página

Implementando el código para crear la animación

Llamando jQuery Core y jQuery Color

Copie y pegue las siguientes líneas entre las etiquetas del «HEAD».

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.2.0.min.js"></script>

Definir el estilo CSS (style)

Copie y pegue el código entre las etiquetas del «STYLE».

body{
width: 100%;
height: 100%;
margin: 0 auto;
overflow-x: hidden;
line-height: 23px;
}
h1{
text-align:center;
line-height: 35px;
}
li{
margin-top:10px;
}

Definición de código jQuery (script).

Aprenda más con Libros de Programación Orientada a Objetos (OOP por sus siglas en inglés).
icon
Copie y pegue el código entre las etiquetas del «HEAD» o del «BODY».

<script type="application/javascript">
$(function(){
var __bordertop_animation__ = function(a){
"use strict";
var _cfg_ = {
iteration: 6,
speed: 5000,
left: ["100%","0","-100%","0","0","35%"],
width: ["100%","100%","100%","100%","100%","30%"],
color: ["#FEC14F","#FF0000","#A0A6C4","#008000","#FFFF00","#FEC14F"]
}
var _animation_b_s_ = function(){
var cfg = typeof _cfg_ !== "undefined" ? _cfg_ : {};
var iteration = typeof cfg.iteration !== "undefined" ? cfg.iteration : 1;
var left = typeof cfg.left !== "undefined" ? cfg.left : Array();
var width = typeof cfg.width !== "undefined" ? cfg.width: Array();
var color = typeof cfg.color !== "undefined" ? cfg.color : "";
var speed =typeof cfg.speed !== "undefined" ? cfg.speed: 1000;
var time = Math.round(speed/iteration);
$(a).css({"border-top":"3px solid #FEC14F","top":"0"});
for(var i = 0; i < iteration; i++ ){
$(a).animate({
top: 0,
left: left[i],
width: width[i],
borderTopColor: jQuery.Color(color[i])
},time);
}
}();
}("._animation_border_");
});</script>

Definición del documento HTML (body).

Copie y pegue el código entre las etiquetas del «BODY».

<div class="_animation_border_" style="position:absolute;top:0;"> </div>
<h1>Animación de borde superior del Documento con jQuery</h1>
<ul>
<li>Se requieren conocimientos básicos de JavaScript y jQuery.</li>
<li>Se requiere el uso de jQuery Color para dar color al borde de la animación</li>
<li>El código implementado fue probado con el uso de las versiones más recientes de jQuery (jQuery Core - All 3.x Versions) y la versión más reciente de jQuery Color</li>
<li>Se establece "use strict"</li>
<li>La configuración requiere la definición de: "iteration", "speed", "left", "width" y "color"</li>
<li>"__bordertop_animation__" es el nombre de la función anónima o expresión de función</li>
<li>La función anónima recibe un parámetro de tipo "string" que se refiere al nombre de la clase "_animation_border_" ubicada en el Documento como un elemento</li>
<li>La animación se ejecuta en cada llamada realizada al contenido de la página</li>
</ul>

Nota: es importante establecer "overflow-x: hidden;" en el estilo del elemento contenedor de la clase "_animation_border_", que en nuestro caso se refiere a "body".

Consulta Lo+ Top de Lenguajes De Programación
Todos los titulares en un solo lugar...