Novedades
Música
 
María Becerra se presentó con orgullo en el festival de Suena En TikTok 2022
Las Cometas Siempre Vuelan En Agosto de Morat (Letra, Música)
El Dolor De Mi Vida (Versión Salsa) de Ezio Oliva, Daniela Darcourt (Letra, Música)
Medio Crazy Remix (feat. Rusherking, FMK & Juhn) de NoBeat, Khea, Ingratax (Letra, Música)
Jalo de Banda MS de Sergio Lizarraga (Letra, Música)
Migajas de Lana Oropeza (Letra, Música)
Amor Ordinario de Lana Oropeza (Letra, Música)
Cristo Rey de Sixto Rein (Letra, Música)
Mi Peor Error de Darell (Letra, Música)
Eme de Big Soto, Ryan Castro (Letra, Música)
XT4S1S de Danna Paola (Letra, Música)
Luna De Miel de HIT$ MUSIC, Kevin Roldan (Letra, Música)
Noche de Novela de Paulo Londra, Ed Sheeran (Letra, Música)
El Que Espera de Anitta, Maluma (Letra, Música)
Piensas En Mí de Chesca, Alejo (Letra, Música)
Ay Hombre! de Valentina Olguin, Jay Maly (Letra, Música)
Pa Que de Silvestre Dangond (Letra, Música)
CAUTY presenta «Ponle Dembow» junto al dúo internacional Zion y Lennox
Yo Toy Rulay Desacatao de JC La Nevula (Letra, Música)
Ponle Dembow de Cauty, Zion & Lennox, 574 (Letra, Música)
Somos Iguales (feat. Louchie Lou & Michie One) de Ozuna, Tokischa (Letra, Música)
Kapla y Miky presentan el sencillo musical de «Flete»
La Famosita de JC La Nevula (Letra, Música)
Flete de Kapla y Miky (Letra, Música)
Si Te La Encuentras Por Ahí de Feid (Letra, Música)
La Loto de TINI, Becky G, Anitta (Letra, Música)
TROPA de Anitta, Luck MUZIK (Letra, Música)
MUSA de Juan Avila (Letra, Música)
Personal (feat. Thyago) de Symon Dice, Latenightjiggy, Gigolo Y La Exce (Letra, Música)
Laguna de Neutro Shorty (Letra, Música)
FOLLOWS de Ankhal (Letra, Música)
Ojos Marrones de Lasso (Letra, Música)
Si Si de Tempo (Letra, Música)
Sin Novia de Nicky Jam (Letra, Música)
Conexiones de Miky Woodz (Letra, Música)
Todo My Love de Kenia Os (Letra, Música)
cómo dormiste? de Rels B (Letra, Música)
Contigo de Daniel Huen (Letra, Música)
Julieta de Paulo Londra (Letra, Música)
LOS APARATOS de El Alfa, Noriel, Trueno (Letra, Música)
Llorando En La Disco de st. Pedro, La Pantera, BDP Music (Letra, Música)
María Oliva y su canción «Eres» elegidas para «La canción del verano 2022»
La Tormenta de Lit Killah (Letra, Música)
Perro Fiel de Reykon (Letra, Música)
Brindaré de Las Villa (Letra, Música)
Jay Wheeler se une a Conep para presentar «Ese K»
Ese K de Jay Wheeler, Conep (Letra, Música)
Bésame Bonito (Micro TDH Remix) de Carmen DeLeon, Micro TDH (Letra, Música)
Biografías
 
Marcas Y Productos
 
Leng. De Program.
 
Listas De Páginas
 
Lo+ Visto
Lenguajes De Programación
  1. Enorable
  2. Lenguajes De Programación
  3. Jquery
10
 
04/08/2020 |  vistas:

Animación de borde superior del Documento HTML con jQuery

Animación de borde superior del Documento HTML con jQueryAnimando 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.

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).


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...