Yo creo que si le das un delay al logo de 2000ms y le pones una duración de 1999ms a la navbar quedaria genial, podrías usar ambas animaciones y con el delay haces que el logo se anime solo cuando ya haya terminado la animación del navbar, estoy seguro que ya lo sabías, lo explico por si alguien más lo lee y no lo sepa.
Gracias x el aporte.. explicaste super sencillo y facil de comprender.. no hace ni falta saber js para usar esta libreria.. yq la apliqué a mi proyecto y qdó buenisima.. grax.. nuevo sub 😀
Tengo un menú desplegable y al momento de la transición el submenu se pone por debajo de l imagen que tengo en el header, y eso que tengo un z-index de 2000
Hola amigo, muy bueno tu comentario, trate de hacer lo que dices y así me quedo el código, ¿Te parece bien? window.sr = ScrollReveal(); const animar = (clase, duracion, origen, distancia) => { sr.reveal(clase, { duration: duracion, origin: origen, distance: distancia }); } animar('.Navegacion__menu',2000,'bottom','-100px'); animar('.principal',2000,'top','-100px'); Si me funcionar y creo que es una buena forma de ahorrar código. Saludos
buenas gente, alguien me pueda guiar, use el scroll reveal en un navbar con position : fixed y funciona, pero cuando uso scroll reveal en las otras clases, todo lo que use scroll reveal se posiciona por encima de mi navbar, y cuando voy haciendo scroll h1,p img y todo pasa tapando el navar, alguna ayuda se agradeceria
Hola amigo, me pareció interesante. Me gustaría una versión como para pre-escolar ya que estoy aprendiendo y necesito explicaciones con muy poco código en las páginas, por ejemplo colocar un titulo, un párrafo y una imagen y jugar con eso. Gracias. Ya me suscribí a tu canal. 👉🔔👍
Existen muchos cursos gratis o tutoriales en RUclips para crear páginas web, lo básico para crear una página a medida y a tu gusto necesitarías tener conocimientos en 2 lenguajes, HTML y CSS yo por el momento no hago ese tipo de contenido, porqué siento que ya hay mucho material en internet y bien explicado, saludos ✌
Hola amigo, una pregunta, al rotate le puedo poner algún tipo de delay? Para un logo que esta en un container que tiene el efecto de Scroll Reveal bottom por ejemplo
eso lo puedes hacer agregando el atributo: delay por ejemplo: sr.reveal(){ duration: 3000, origin: 'bottom', distance: '-100px', delay: 5000 } recuerda que los tiempos en JS de mil, son segundos y en centenas son milisegundos
Alguna persona me puedes explicar como se hace para que cuando se da el scroll los elementos tapen los otros asi como se ve en el video me explico el baner se sube en efecto contrario y tapa el elemento nav progresivamente si alguien me puede explicar como lo puedo aplicar les agradezco mucho
He visto ya 5 videos con esta libreria y nunca me funcionaba. Con tu video logré que funcione!
Yo creo que si le das un delay al logo de 2000ms y le pones una duración de 1999ms a la navbar quedaria genial, podrías usar ambas animaciones y con el delay haces que el logo se anime solo cuando ya haya terminado la animación del navbar, estoy seguro que ya lo sabías, lo explico por si alguien más lo lee y no lo sepa.
Gracias x el aporte.. explicaste super sencillo y facil de comprender.. no hace ni falta saber js para usar esta libreria.. yq la apliqué a mi proyecto y qdó buenisima.. grax.. nuevo sub 😀
Muchisimas gracias, estaba buscando esto hace tiempo, eres un crack! Saludos.
Hermano! Esta muy bueno y super sencillo, gracias! 😁 Estoy haciendo un proyecto propio y le faltaba algo de dinamismo
Buen aporte, ojalá puedas sacar más tutoriales
Tengo un menú desplegable y al momento de la transición el submenu se pone por debajo de l imagen que tengo en el header, y eso que tengo un z-index de 2000
JODER QUE BUEN VIDEO SOS UN CRACK
No maaaa... Muchísimas gracias por todo el dato! Me ha servido bastante
Buen video 🫡😊 vracias por el aporte 🫡
luego de poner la transiciones los hovers no funcionan en los elementos
gracias , me sirvio mucho , mi pagina se ve mas dinamica...esta genial, sub y like broo ...Saludos desde colombia
Disculpa, crees que me puedas pasar el codigo para revisarlo con calma y poder editarlo
la propiedad sr no existe, no me reconoce el .sr, me indicas si hay que instalar algo aparte ??
Hola estimado en caso de que quiera que se anima cuando suba el scroll?
al abrir al principio, no me salecomo tu documento index.html
Como haces para que el 2do recuadro suba, y cubra el recuadro donde está el título + texto e imagen de inicio?
crea una funcion, que reciba los atributos del objeto options asi reutilizas codigo buen video bro
Hola amigo, muy bueno tu comentario, trate de hacer lo que dices y así me quedo el código, ¿Te parece bien?
window.sr = ScrollReveal();
const animar = (clase, duracion, origen, distancia) => {
sr.reveal(clase, {
duration: duracion,
origin: origen,
distance: distancia
});
}
animar('.Navegacion__menu',2000,'bottom','-100px');
animar('.principal',2000,'top','-100px');
Si me funcionar y creo que es una buena forma de ahorrar código. Saludos
buenas gente, alguien me pueda guiar, use el scroll reveal en un navbar con position : fixed y funciona, pero cuando uso scroll reveal en las otras clases, todo lo que use scroll reveal se posiciona por encima de mi navbar, y cuando voy haciendo scroll h1,p img y todo pasa tapando el navar, alguna ayuda se agradeceria
Es amigable con la UX?
Buen video amigo, nuevo suscriptor
Muy util, estaba buscando esto 👍
Hola amigo, me pareció interesante. Me gustaría una versión como para pre-escolar ya que estoy aprendiendo y necesito explicaciones con muy poco código en las páginas, por ejemplo colocar un titulo, un párrafo y una imagen y jugar con eso. Gracias. Ya me suscribí a tu canal. 👉🔔👍
Existen muchos cursos gratis o tutoriales en RUclips para crear páginas web, lo básico para crear una página a medida y a tu gusto necesitarías tener conocimientos en 2 lenguajes, HTML y CSS yo por el momento no hago ese tipo de contenido, porqué siento que ya hay mucho material en internet y bien explicado, saludos ✌
ejemplo en una funcion:
function revealElement(selector, options) {
ScrollReveal().reveal(selector,
{
origin: options.origin,
distance: options.distance,
duration: options.duration ,
reset: false,
delay: options.delay
});
}
revealElement('.general_img_container', { origin: 'right', distance: '80px', duration:1500 , delay: 100 }); //valores editables
el codigo de esa pagina hermosa bro
grandioso video me ayudo gracias
Nuevo Sub
Hola amigo, una pregunta, al rotate le puedo poner algún tipo de delay? Para un logo que esta en un container que tiene el efecto de Scroll Reveal bottom por ejemplo
claro que si, lo puedes hacer de la siguiente forma:
window.sr = ScrollReveal();
sr.reveal('.logo', {
delay: 5000,
rotate: {
x: 1,
y: 180,
},
});
@@LaloFapMX22 Gracias hermano!!
alguien me ayudaria enserio no encuentro ningun fallo porque no me esta funcionando
La licencia influye a la hora de subir alguna web en su funcionamiento?
JQUERY OWL Carousel Responsive SLIDER and Carousel I did, I try not to use scrollreveal or not.
Funciona también en responsive?
Si
FUNCIONOOO!! QUE CAPOOO
muy buen aporte te ganaste un sub
Muy buen video gracias, sabes como hacer para elegir un orden en las animaciones, ósea que elemento se muestra antes que otro?
eso lo puedes hacer agregando el atributo: delay
por ejemplo:
sr.reveal(){
duration: 3000,
origin: 'bottom',
distance: '-100px',
delay: 5000
}
recuerda que los tiempos en JS de mil, son segundos y en centenas son milisegundos
Gracias! 🙌🏽🙌🏽
Muchas gracias!!
muchas gracias!!!
Gracias 🤩
Alguna persona me puedes explicar como se hace para que cuando se da el scroll los elementos tapen los otros asi como se ve en el video me explico el baner se sube en efecto contrario y tapa el elemento nav progresivamente si alguien me puede explicar como lo puedo aplicar les agradezco mucho
Al fondo dale un background-atachtmen:fixed
no funciona el origen en mi código, no se que hacer... aparece con transición pero en la misma posición. =(
muestrame tu codigo para ayudarte
muchas gracias
Ya le di like y aun no veo el vídeo :D
Muy buen video
Спасибо ,объяснил все понятно !
Arrasó, muchas gracias
buen aporte
muy bueno, gracias :)
no puedo hacer funcionar
Excelente!
Genial
bootstrap no