Novedades
Música
 
Imagen, foto o portada de Que Te Perdone de Nanpa Básico, Nejo (Letra, Música)
Que Te Perdone de Nanpa Básico, Nejo (Letra, Música)
Imagen, foto o portada de Mi Complejo de Andry Kiddos (Letra, Música)
Mi Complejo de Andry Kiddos (Letra, Música)
Imagen, foto o portada de Contigo (feat. Kenzy) de Ren Kai (Letra, Música)
Contigo (feat. Kenzy) de Ren Kai (Letra, Música)
Imagen, foto o portada de Fundota de Bryant Myers (Letra, Música)
Fundota de Bryant Myers (Letra, Música)
Imagen, foto o portada de Hookiao de Lil Silvio & El Vega (Letra, Música)
Hookiao de Lil Silvio & El Vega (Letra, Música)
Imagen, foto o portada de Fenomenal de L-Gante, Noriel, Negro Dub (Letra, Música)
Fenomenal de L-Gante, Noriel, Negro Dub (Letra, Música)
Imagen, foto o portada de El Case de Hozwal (Letra, Música)
El Case de Hozwal (Letra, Música)
Imagen, foto o portada de Pecado Original de María José (Letra, Música)
Pecado Original de María José (Letra, Música)
Imagen, foto o portada de Agradecido de Don Omar (Letra, Música)
Agradecido de Don Omar (Letra, Música)
Imagen, foto o portada de Siempre Le Meto Bellako de Yozuel, Rvsell (Letra, Música)
Siempre Le Meto Bellako de Yozuel, Rvsell (Letra, Música)
Imagen, foto o portada de Gafas de Sol de Lérica (Letra, Música)
Gafas de Sol de Lérica (Letra, Música)
Imagen, foto o portada de Envidia de Neutro Shorty, Ovi (Letra, Música)
Envidia de Neutro Shorty, Ovi (Letra, Música)
Imagen, foto o portada de Ulala de Myke Towers, Daddy Yankee (Letra, Música)
Ulala de Myke Towers, Daddy Yankee (Letra, Música)
Imagen, foto o portada de VICTORIA de Izaak, Lenny Tavarez (Letra, Música)
VICTORIA de Izaak, Lenny Tavarez (Letra, Música)
Imagen, foto o portada de Frío de NICKI NICOLE (Letra, Música)
Frío de NICKI NICOLE (Letra, Música)
Imagen, foto o portada de Si Yo Me Muero de Anuel AA, Mvsis (Letra, Música)
Si Yo Me Muero de Anuel AA, Mvsis (Letra, Música)
Imagen, foto o portada de Eres de Manuel Carrasco (Letra, Música)
Eres de Manuel Carrasco (Letra, Música)
Imagen, foto o portada de Necio de Paulo Londra, Lit Killah (Letra, Música)
Necio de Paulo Londra, Lit Killah (Letra, Música)
Imagen, foto o portada de Freestyle de Darkiel, Nino Freestyle, Jon Z (Letra, Música)
Freestyle de Darkiel, Nino Freestyle, Jon Z (Letra, Música)
Imagen, foto o portada de Baila En La 42 de Nacho, Don Forty Five, Mercenario Musik (Letra, Música)
Baila En La 42 de Nacho, Don Forty Five, Mercenario Musik (Letra, Música)
Imagen, foto o portada de NOTEVI de Noreh, Jimmix (Letra, Música)
NOTEVI de Noreh, Jimmix (Letra, Música)
Imagen, foto o portada de Fiesta del Amor (feat. Fabianporti) de MarLo La Letra (Letra, Música)
Fiesta del Amor (feat. Fabianporti) de MarLo La Letra (Letra, Música)
Imagen, foto o portada de Desorden de Sharlene (Letra, Música)
Desorden de Sharlene (Letra, Música)
Imagen, foto o portada de Vaina Bacana de Martina La Peligrosa (Letra, Música)
Vaina Bacana de Martina La Peligrosa (Letra, Música)
Imagen, foto o portada de Mi Rival de Karen Méndez (Letra, Música)
Mi Rival de Karen Méndez (Letra, Música)
Imagen, foto o portada de Pa La Vuelta de ITZZA PRIMERA, Cauty (Letra, Música)
Pa La Vuelta de ITZZA PRIMERA, Cauty (Letra, Música)
Imagen, foto o portada de Bayamón de Elena Rose (Letra, Música)
Bayamón de Elena Rose (Letra, Música)
Imagen, foto o portada de Tu Cariñito de Olga Tañón (Letra, Música)
Tu Cariñito de Olga Tañón (Letra, Música)
Imagen, foto o portada de Judas de Pipe Calderón (Letra, Música)
Judas de Pipe Calderón (Letra, Música)
Imagen, foto o portada de Indestructible de Le Coco (Letra, Música)
Indestructible de Le Coco (Letra, Música)
Imagen, foto o portada de QUIÉN SABE de Joey Montana, El Zeta (Letra, Música)
QUIÉN SABE de Joey Montana, El Zeta (Letra, Música)
Imagen, foto o portada de Aroma de Brytiago, Lenny Tavárez, Beéle (Letra, Música)
Aroma de Brytiago, Lenny Tavárez, Beéle (Letra, Música)
Imagen, foto o portada de Sueños (feat. La Tinta) de AnnyBell, Sixto Rein, La Tinta (Letra, Música)
Sueños (feat. La Tinta) de AnnyBell, Sixto Rein, La Tinta (Letra, Música)
Imagen, foto o portada de Peru - Spanish Version (Remix) de Jay Maly (Letra, Música)
Peru - Spanish Version (Remix) de Jay Maly (Letra, Música)
Imagen, foto o portada de Quemando Money de Freitas (Letra, Música)
Quemando Money de Freitas (Letra, Música)
Imagen, foto o portada de Underground de Emilia (Letra, Música)
Underground de Emilia (Letra, Música)
Imagen, foto o portada de Sin Ti de Agus Padilla, Lauta, Migrantes (Letra, Música)
Sin Ti de Agus Padilla, Lauta, Migrantes (Letra, Música)
Imagen, foto o portada de Presidentes Muertos (feat. YOVNGCHIMI) de Casper Mágico, Anuel AA, Bryant Myers (Letra, Música)
Presidentes Muertos (feat. YOVNGCHIMI) de Casper Mágico, Anuel AA, Bryant Myers (Letra, Música)
Imagen, foto o portada de Intensa de Danny Romero (Letra, Música)
Intensa de Danny Romero (Letra, Música)
Imagen, foto o portada de La Clave de Luis Figueroa (Letra, Música)
La Clave de Luis Figueroa (Letra, Música)
Imagen, foto o portada de Delirio Y Tortura (feat. Luar La L) de Brray, Luar La L (Letra, Música)
Delirio Y Tortura (feat. Luar La L) de Brray, Luar La L (Letra, Música)
Imagen, foto o portada de Dubai de IAmChino, Rafa Pabön (Letra, Música)
Dubai de IAmChino, Rafa Pabön (Letra, Música)
Imagen, foto o portada de Mi Felicidad de j mena (Letra, Música)
Mi Felicidad de j mena (Letra, Música)
Imagen, foto o portada de Benzo de Messiah (Letra, Música)
Benzo de Messiah (Letra, Música)
Imagen, foto o portada de SOMOS NOSOTROS de REI (Letra, Música)
SOMOS NOSOTROS de REI (Letra, Música)
Imagen, foto o portada de Lágrimas de Champan de Gente De Zona, Dale Pututi, El Carli (Letra, Música)
Lágrimas de Champan de Gente De Zona, Dale Pututi, El Carli (Letra, Música)
Imagen, foto o portada de CAIRO de Karol G, Ovy On The Drums (Letra, Música)
CAIRO de Karol G, Ovy On The Drums (Letra, Música)
Imagen, foto o portada de Puntos Débiles de Omy de Oro, Brytiago (Letra, Música)
Puntos Débiles de Omy de Oro, Brytiago (Letra, Música)
Biografías
 
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...