Esta é uma Landing Page, tema do game de Battle Royale, Fortnite. Desafio foi proposto por Giovanna, CEO da Explow Studio, com o intuito de colocar em prática nossos conhecimentos e encarar desafios e claro, fortalecer a comunidade do Discord da Explow de desenvolvedores e designers.
Bom, o desafio foi feito em cima do próprio design da Giovanna, você pode visualizar os detalhes ou se quiser também fazer este desafio o link do projeto no Figma esta aqui. A idéia inicial foi, criar a pagina principal (no caso o hero) e fazer uma animação onde a cada porcentagem de uma barra de carregamento, fazer a troca de imagem do background da página.
Optei por utilizar as seguintes ferramentas
- CRA (Optei por utilizar o create-react-app)
- Vite.js | REACT (irei falar mais a frente sobre essa troca)
- react-scroll
- gh-pages
Optei por utilizar o react, inicialmente via create-react-app, pois atualmente eu estou estudando sobre... porém eu queria fazer o desafio e chegar no objetivo de forma mais simples possivel, que no caso foi animar utilizando somente CSS Transition/Animation, e até que deu super certo! Além de seguir a risca o projeto proposto, tentei dar algum toque especial com alguns efeitos nos cards e etc.
É claro, aqui surgiu diversos problemas durante o projeto, os principais foram:
- Piscadas durante a mudança da imagem do background
- Dimensões diferentes do projeto original no Figma
- entre outros problemas de código.
O problema maior foi sobre as piscadas do background, tentei de todas as formas, pedir ajuda na comunidade, diversas pesquisas, mas infelizmente não consegui achar uma solução, mas percebi que era algo sobre url estaticos e relativo, então não conseguia utilizar um preload para fazer um pré carregamento das imagens.
Então tive que fazer a migração dos componentes e demais paginas que compunham o site para um novo projeto, no caso utilizei o Vite.js, e então consegui resolver o tal problema das url's e preloads.
Fico muito feliz pelo resultado desse projeto, é claro não parei por aqui... sei que preciso melhorar no Front-End e estou 100% em busca de melhores resultados! Gostaria de agradecer a Giovanna Souza pelo desafio, por seu feedback sobre o projeto, e por iniciativar os devs e designers iniciantes a entrar no mundo do Desenvolvimento Web... E é claro,agradecer imensamente também a comunidade do Explow no Discord por me ajudar e dar dicas sobre esse projeto.
Partes dos materiais utilizados são marcas registradas e/ou obras protegidas por direitos autorais da Epic Games, Inc. Todos os direitos reservados pela Epic. Este material não é oficial e não é endossado pela Epic.
OBSERVAÇÃO, DISPONIVEL APENAS PARA DESKOTPS POIS VISUALIZAÇÃO DO PROJETO SERÁ SOMENTE ACIMA DE TELAS COM TAMANHO DE 900x650