iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 40 forks source link

19º Desafio: Scroll Animado - Peso 2 #24

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Oi oi oi, crianças inocentes! O desafio de hoje é criar um scroll animado com HTML, CSS e JavaScript. Isso significa que vocês terão que implementar uma animação suave que ocorre quando a página é rolada para cima ou para baixo. O objetivo é tornar a experiência de navegação mais divertida e envolvente para o usuário.

Mas atenção, nada de preguiça! Não é permitido o uso de frameworks prontos para criar a animação. Vocês precisarão criar um código personalizado, utilizando as vossas habilidades.

Para começar, é necessário criar um layout elegante usando HTML e CSS. Depois, utilizando JavaScript, vocês devem criar a lógica que vai controlar a animação do scroll. Isso envolve detectar quando o usuário rola a página e então animar a transição para a nova posição.

Mas cuidado para não deixar a animação muito lenta ou muito rápida, hein?! O objetivo é criar uma experiência de navegação suave e agradável, sem atrapalhar a usabilidade do site.

Então, galera, bora colocar a criatividade para funcionar e criar um scroll animado incrível? Estou ansioso para ver o resultado!

Exemplo:

CPT2303080953-300x500

Additional tips

Uma dica para deixar o scroll animado mais legal é usar um efeito de parallax. Vocês podem fazer isso criando camadas de elementos com diferentes velocidades de rolagem. Assim, quando o usuário rolar a página, os elementos vão se mover em diferentes velocidades.

apauloenzo commented 1 year ago

desafio.zip Equipe: Flasco

iurygdeoliveira commented 1 year ago

Resposta aceita