💻 Como hacer efecto SMOOTH SCROLL con HTML CSS

Подписаться 124 тыс.

Просмотров 56 тыс.

50% 1

📘CURSO CSS3 COMPLETO 👉 alexcgdesign.com/cursocss
Aprende a crear el efecto Smooth Scroll, el cual es muy utilizado con Javacript, o alguna libreria de Javacript, pero el día de hoy haremos el efecto Smooth Scroll con HTML y CSS, sin Javascript.
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger.com/alexcg
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesign.com/blog
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/AlexCGDesign

Наука

Опубликовано:

5 янв 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@AlexCGDesign 4 года назад

👨‍💻 Curso diseño animaciones CSS, Flexbox y más: bit.ly/cursoAlexCG 🎁 Apoyame en Patreon para videos exclusivos y cursos premium: www.patreon.com/alexcgdesign

@gilbertmatosortiz1522 4 года назад

Ok gracias!!! Nuevo sub!👍

@bastiancevallos8978 4 года назад

Nuevo sub, no me perderé ni un solo vídeo, gracias y por favor no dejes de compartirnos tu conocimiento, saludos

@miguelramirezcastillo5815 3 года назад

Eres todo un crack, empecé a ver tus videos y he aprendido un buen!!!

@christiangustavobernalgarz2134 4 года назад

Apenas estoy viendo tu canal, me parece espectacular, que buen contenido manejas

@alexiaelizabethnaredobetan6958 3 года назад

¡Increíble! Mil gracias

@JhordanR4 2 года назад

Buenísimoo!! lo estaba buscando

@flaviobendl2611 4 года назад

Sensacional, aprendiendo mucho. Excelente video Muchas gracias. Flávio desde Brasil.

@cepidelvalle 2 года назад

Mil tutoriales, me estaba rindiendo. Lo logre! gracias!!!

@Pablo-bg1xm 3 года назад

Excelente tutorial, como siempre!!

@henrylopez1661 3 года назад

Excelente vídeo, bro. Muchas gracias por compartir. Saludos.

@juancarloslesmesducuara1239 3 года назад

me tragué 15 mins para el smooth, aún así no fué tiempo perdido

@javierarmandovargasvega606 2 года назад

Qué buena clase. Le cambié el height a 100vh, porque la pantalla de mi computadora es muy grande y no cuadraba bien.

@edgarmoransalto9422 Год назад

muy buen tutorial, me ahorraste muchas paginas extra sin sentido y todo lo pude meter en una sola

@YEICAM41 4 года назад

Gracias estuvo muy bueno y aprendí algo mas

@nottheia4833 3 года назад

Muchas gracias, Alex!!!!

@AlexdobleU 4 года назад

tenga su like ... excelente... y más allá de eso gracias por compartir lo que sabes 👍👍👍

@seventyfor1 Год назад

Esos cursos son geniales. 👍👍👍👍

@GeeKBio 3 года назад

Excelente, fácil y rápido. Exacto lo que andaba buscando...100 puntos amigo!!!

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@josechambi7483 3 года назад

Buenisimo crack !

@daniel-24gra79 Год назад

que buen video man, ya lo aplique en una pagina te lo agradezco muchisimo

@jotasensei7251 Год назад

Gracias alex, sabia del comportamiento pero no sabía que especificamente se aplicaba en el selector html.

@rodrigoluna5727 3 года назад

Alex muy bueno, gracias por ese contenido parce me ayudo bastante

@juliofernandez2636 4 года назад

gracias amigo necesitaba este tutorial

@pimboto 4 года назад

un crack. un capo, excelente explicación y calidad 😎

@edchadev 4 года назад

Definitivamente este video merece el like y el comentario, gracias por cosas practicas y utiles

@AlexCGDesign 4 года назад

Muchas gracias!! Saludos

@valentinapabondiaz2669 3 года назад

Estuvo super bueno el video

@brandonmontes9288 3 года назад

genial! muchas gracias..

@omaranaidgarciavalenzuela1398 4 года назад

Excelente amigo!!!!!

@alessandromorales4958 3 года назад

Este increíble trucaso me acaba de ahorrar un poquito de tiempo, muchas gracias crack !!!

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@acorde.producciones Год назад

Muchas gracias!!

@francoav4711 4 года назад

sos un verdadero crack men gracias por compartir tu conocimiento me ayudaste bastante :3

@AlexCGDesign 4 года назад

Gracias amigo, saludos

@angeldm.4905 3 года назад

Graciaaaaaaas! Eres un crack :)

@anamr7816 2 года назад

Muchas gracias ❤

@fideloper4765 2 года назад

Que genial!

@Rosy0829 3 года назад

¡Eres realmente increíble!

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@dagmerdiazjalca2931 Год назад

Excelente ejemplo 👌

@diegopacheco8162 3 года назад

Estupenda información

@ornellasablic1129 4 года назад

muy buen tutorial!

@juanda6993 4 года назад

Alex me gustan tus videos. y quiero que hagas uno donde crees un sitio con base de datos (registro e inicio de sesión ) :)

@danieldeavila557 3 года назад

Mil gracias

@-Roronoa--Zoro 3 года назад

Siempre tan crack!

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@sergiofilothvaliente9366 4 года назад

Me encanto tu video Alex, pero por favor podrias hacer uno con javascript(del efecto Smooth) para agregar compatibilidad con los navegadores. Agradeceria que me respondieras si lo piensas hacer, de verdad muchas gracias

@diegoarteagaquevedo1395 3 года назад

que bueno tu video bro!

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@Chris_7477 9 месяцев назад

Una genialidad

@johanantonyas 4 года назад

Interesante la propiedad scroll-behavior, buen contenido, podrias haber aplicado transiciones mas suaves en las svg para cada cambio de tamaño y valores relativos vh(en los section), rem y em en los textos para que no se vean tan rígidos. Saludos

@luisespejo2893 3 года назад

gracias por tu contenido, tengo una duda, no sabrás de alguna propiedad para cambiar el color de mi sección al empezar el scroll de dicha sección, con css

@AndyHHH7 4 года назад

Tengo que admitir que este video está de putisima madre, excelente Saludos

@AlexCGDesign 4 года назад

Genial Amigo

@robertogarcia5639 3 года назад

jaja me gusto el video, original forma de exolicar, bien facil como si le estuvieras explicando a un amigo sentado en una silla al lado tuyo en tu casa... Lo unico que yo hubiera hecho es poner los botones se "section" arriba de todo como estan en los menus de las paginas profesionales... pero no importa. esta buena toda la info y el resultado final que es que se entienda bien y facil esta logrado. saludos !!

@marcosblo1293 Год назад

god amigo, buenisimo

@yommo8680 3 года назад

GRANDE MAQUINA

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@eliunovoacornejo3447 4 года назад

Hola. Una duda y si quiero que la transición del efecto smooth scroll se mas lenta se puede hacer en css?. Gracias

@alvaromulato4070 3 года назад

Woo... Sos la mera meca

@tecno_art_designe Год назад

Excelente

@ang00198 3 года назад

Gracias, sirvio muchisimo /*_*/

@xlMauroxPlayOfficial 4 года назад

por alguna razón a mi no me funciona, uso dreamviewer y html 5 con css 3, cuando pongo en el css la regla scroll-behavior: smooth; me deja escribirla, pero no se activa, no se coloca en naranja sino que se queda blanco el texto "smooth" es decir, que no se activa, y lo guardo y lo pruebo y no me funciona

@bastiancevallos8978 4 года назад

Hola Alex, que tal si en las propiedades generales del SECTION en lugar de añadir height: 650px; mejor agregamos height: 100vh;

@AlexCGDesign 4 года назад

También es válido amigo:)) saludos y gracias por el aporte!

@cardenasdiego 4 года назад

Min 13:00 empieza a hacer el smooth

@isaacmaldonado1010 4 года назад

Hola AlexCG Desing sube un video haciendo el efecto Stepper por favor

@henrysaulguerreroleon6927 2 года назад

El punto clave del video está en el 14:50

@rafavillegas5427 4 года назад

Tengo una error y no se que este pasando cuando pongo por ejemplo:" box-sizing: border-box; " border-box no se pone de color y no hace efecto y asi con varios

@Benedictgbriel44 4 года назад

Muy buenos tus tutoriales .... me gustaria ver uno de como crear una galeria de imagenes para dar like y comentar seria algo grandioso

@AlexCGDesign 4 года назад

Aquí tienes uno amigo: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4gLZYgmRN6E.html

@Benedictgbriel44 4 года назад

@@AlexCGDesign gracias

@edgarvieyra1133 2 года назад

como puedo hacer para que al momento de darle al boton y pasar a cualquier seccion no aparesca el nombre de la seccion en la barra despues del index ejemplo local/mipag/indexhtml#"miseccion" saludos

@aleoff1531 2 года назад

No entiendo porque no me funciona el scroll behavior, pense que era algun conflicto con mis scripts pero no :/

@german_abril7254 3 года назад

tengo entendido que el smooth behavior no está soportado en safari ni explorer...

@robertoceratti5523 3 года назад

no me aplica el cambio mediante nth-child porque sera? gracias master

@mauriciovillalba1065 4 года назад

Excelente!. Una pregunta ese desplazamiento se puede hacer hacia los lados, para utilizar en dispositivos con orientación horizontal ?, gracias

@AlexCGDesign 4 года назад

No creo que funcione de manera horizontal, la verdad no lo he probado, lo más óptimo sería hacerlo con Javascript

@mauriciovillalba1065 4 года назад

@@AlexCGDesign muchas gracias

@Franco-ip6tq 4 года назад

Cuando uso esa propiedad en mi código no hace nada y tengo el chrome actualizado. Por qué?

@faviomagallanes 4 года назад

no me funciona :(

@jeissoncastillo8953 3 года назад

Alguien sabe porque me funciona solo en firefox y no en los otros navegadores?

@gilbertmatosortiz1522 4 года назад

Para hacer esos degradados en las secciones, es necesario hacer ese código Section:nth-cliId(2) { }

@madafakinacho 3 года назад

No me agarra para cambiar dandole al Boton de Section ni el Smooth :(((

@breynerordonez9931 3 года назад

bro ! puedes dejar el link del proyecto, me harias un gran favor.

@carlosdanygarcia4874 2 года назад

Ayudaaa!!! no me funciona el scroll-behavior: smooth; lo estoy colocando en html{} y también intente con el selector universal, pero en el navegador no me hace la animación y ya intenté en distintos navegadores, alguien me puede dar solución porfa?? Muchas gracias de antemano.

@jeissonrico3449 4 года назад

Que configuración tienes en visual s code ? Por que usas Id y no class ?

@AlexCGDesign 4 года назад

Uso ID en este caso porque así es el desplazamiento por anclas:) nunca lo he probado con clases

@everluisbatista906 6 месяцев назад

holaaaa, quisiera saber como se hace para shopify

@PanicGameplaay 3 года назад

se puede colocar en vex de la id en class como se hace ???

@AlexCGDesign 3 года назад

Holaaa, no. No se puede porque nos estamos referenciado a un ID, se llama navegación por anclas:)) Un saludo!

@cardenasdiego 4 года назад

Al punto viejo, no quiero hacer un sitio web, quiero el efecto smooth. De eso va el título de tu video.

@agustingranes6546 3 года назад

Me podes pasar el codigo en github porque no esta en tus repositorios

@ezeart_4343 3 года назад

Hola buenas. No me funciona el 'scroll-behavior: smooth;' las transiciones si las hace pero el efecto no. ¿que podrá ser?

@sergiomenara9583 3 года назад

Si usas chrome no te va funcionar por default, tenes que activar smooth scrolling en los flags de chrome.

@corinavenegas7730 4 года назад

Muy buen video, pero tengo una duda Cuando reinicio mi archivo para ver las modificaciones, automáticamente me envía a la sección que tenga en medio ¿como puedo corregir ese error o por qué me ocasiona ese error?

@AlexCGDesign 4 года назад

Lo que pasa es que tienes una almohadilla en la URL. Ejemplo: alexcgdesign.com/#section2

@AlexCGDesign 4 года назад

Quita la almohadilla:)

@gilbertmatosortiz1522 4 года назад

Me pueden mandar link de los video de este Man que explique cosas sobre de cajas y posicionamiento, dividir la página y cosas así?? Plis

@AlexCGDesign 4 года назад

Tengo un curso en Udemy

@patriciatovarquintano2417 3 года назад

Hola!! a mi el Section tres no se me centra, y he seguido los pasos Alguien me puede ayudar??

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@Mordidaporlasviboras 3 года назад

Funcionar funciona pero las secciones las manda "cortadas" no exactas, yo estoy haciendo otra página.

@javizame 3 года назад

Te puede interesar este video también: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KG3d79jrr5s.html

@iruarostegui 3 года назад

Al 13:40 lo que todos venimos a buscar..

@aaronlazarte2207 4 года назад

Será que podrías hacer una página web con html css javascript de comidas paso a paso por favor

@AlexCGDesign 4 года назад

Gracias por el consejo amigo! Saludos

@aaronlazarte2207 4 года назад

Igual a vos pro :-) No te olvides hacer una pagina web de restaurante :-)

@marcos_rivasplata 4 года назад

como puedo hacer para que respete el menú pegado

@AlexCGDesign 4 года назад

Podrías agregar un padding al section, del tamaño del menú

@marcos_rivasplata 4 года назад

@@AlexCGDesign le agregué una caja col-md-12 y le puse BR xd

4 года назад

como coloco los svg?

@AlexCGDesign 4 года назад

Cómo imágenes Miguel:)

@suanniyisethcordobaromaa2880 2 года назад

no me dio en la pagina y lo hice tal cual

@AlexCGDesign 2 года назад

Hola, es undraw.co

@rbenx_c 11 месяцев назад

15:06 pfff wtf 😂😂

@national951 4 года назад

minuto 14 :58 estara la respuesta

@ctlchek4264 4 года назад

Alguien que tenga el archivo y me pase por favor??

@ctlchek4264 4 года назад

me pasas el archivo??

@ctlchek4264 4 года назад

Por favor me urge

@joanramirezm.6874 4 года назад

@escuelatecnologica

@nacho-elmago7438 3 года назад

buenas, te puedo dar una critica constructiva? no soy hater, por las dudas. El video dura 22 min y se llama como hacer el efecto SMOOTH el cual te toma de 1 a 2 min explicarlo!!! todo el resto del video es mucho relleno!!! Te recomiendo que tengas ya prearmado el html y los css para que no se alarguen o le pongas un titutlo acorde al contenido del video. Saludos.

@AlexCGDesign 3 года назад

Gracias Nacho:)) Lo tendré mucho en cuenta, y muchísimas gracias por tu ayuda;) Un saludo

@nacho-elmago7438 3 года назад

@@AlexCGDesign de nada, te lo digo desde mi experiencia como usuario, y como profesor - no recordaba la propiedad y la busqué y me crucé con tu video y me llamó la atención el tiempo y entre a ver y sí, explicas mucho más de lo que dice el titulo. El tutorial en sí esta muy bueno, pero te tiro otra idea: podes un enlace directo a la parte del video donde explicas lo de Smooth - no sé como se hace dado que no subo videos en youtube pero sé que se puede poner en la descripcion un link que te posiciona el video en la parte que desees