20º Desafio: Criar uma Split Landing Page - Peso 2

[iurygdeoliveira]

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! O desafio que tenho para vocês hoje é criar uma Split Landing Page com divisão usando HTML, CSS e JavaScript. Vocês provavelmente já viram essas páginas, onde a tela é dividida em duas partes e cada parte tem seu próprio conteúdo. O objetivo é criar uma animação suave que divida a tela em duas partes e revele o conteúdo de cada seção à medida que o usuário navega pela página.

Exemplo:

https://user-images.githubusercontent.com/30157522/223721538-0ec2a588-65c0-485b-89e7-dfef1b1900c6.mp4

E lembrem-se, não é permitido o uso de frameworks existentes para elaborar a animação. O desafio é criar tudo do zero, utilizando suas habilidades em programação. Divirtam-se criando!

Additional tips

Aqui vão algumas dicas para ajudá-los:

1. Comecem com a estrutura básica da página em HTML e definam o estilo com CSS.
2. Dividam a página em duas partes e usem CSS para estilizá-las da maneira que desejarem.
3. Usem JavaScript para criar a animação de transição entre as duas partes. Vocês podem criar uma função "scroll" para detectar quando o usuário rola a página e, em seguida, animar as seções para se dividirem e revelarem o conteúdo.
4. Não tenham medo de experimentar e serem criativos com a animação! Vocês podem adicionar efeitos adicionais, como desfoque ou movimento, para tornar a experiência ainda mais interessante.

[SamuelMRM]

Desafio.zip Equipe Flasco

[Chiangnatan]

AULA_6.zip

Equipe:The_Makers

[iurygdeoliveira]

Desafio.zip Equipe Flasco

resposta aceita