E aí, pessoal!
Resolvemos criar a série ‘Diário de Bordo’ para mostrar um pouco dos bastidores aqui do Programatório e compartilhar com vocês, alguns desafios que enfrentamos em nosso dia-a-dia e como conseguimos resolvê-los. Talvez nossas aventuras possam ajudá-los de alguma forma, quem sabe até mesmo a ter aquele "insight", rs.
Pegue seu melhor equipamento (no nosso caso uma boa xícara de café) e bora lá se aventurar nesse primeiro desafio!
Situação-Problema:
Tínhamos que gerar uma forma de fazer com que o scroll vertical da página rolasse a seção de imagens na horizontal, ou seja, era necessário recriar o funcionamento da barra de rolagem… quando rolasse para baixo ou para cima, o site rolaria para a esquerda ou direita.
Porém tinha ainda outro desafio, isso deveria acontecer apenas na seção das imagens, no restante da página a barra de rolagem ainda deveria funcionar da forma convencional. Esse foi um momento de bastante preocupação, ainda estávamos no processo de definição do problema, e tínhamos menos de 20% de café na garrafa.
Jornada para a solução:
Caminho 01 - Um estalar de dedos para o navegador explodir
Primeira alternativa era tentar fazer uma solução em CSS puro, onde iríamos fazer uma combinação de rotações simulando que o container de imagens fosse horizontal, conforme a simulação a seguir (vídeo de exemplificação das rotações dos containers).
Deu certo? Sim…e não...ele rola o scroll da forma que gostaríamos, porém ele necessita de uma barra de scroll apenas para aquele container, e queríamos que tivesse apenas um scroll para mandar em tudo, então tivemos que descartar esse caminho.
Caminho 02 - Já faz quatro minutos, 10 segundos e contando... que o café acabou, mas ainda estamos bem
Já que em CSS puro não ia “rolar” (sorry pelo trocadilho), partimos para nosso querido Javascript!
A nossa ideia era mais ou menos assim:
Criar um container com as imagens que fosse maior que a largura da tela, e crescesse na horizontal baseado na quantidade de imagens dentro dela, e depois pegar essa largura total do container e colocar este mesmo valor como altura na tela, assim teríamos uma barra de rolagem tão alta quanto a largura do container de imagens.
Em meio a todo esse processo de resolução, nosso suporte (healer) trouxe a garrafa cheia de café, nossos olhos até brilharam: “Coffee never dies”. Enfim, continuando...
Em seguida iríamos criar scripts de detectar o scroll vertical para rolar proporcionalmente o container de imagens na horizontal, simulando como se o usuário tivesse feito um scroll horizontal.
Ficou difícil entender a ideia? O Vini (programador) fez um desenho para ajudar:
Deu pra entender agora? rs… não se preocupe, depois passamos por nossos tradutores e tentamos deixar mais didático:
Conseguimos criar a seguinte lógica:
1 - Criar um container com as imagens já no formato final (na horizontal e crescendo para o infinito e além... do tamanho da tela…)
2 - Criar um outro container que funcionará como Pai deste container de imagens, e chamamos ele de placeholder, onde sua função basicamente seria de “guardar lugar” na tela.
3 - Criar um script para detectar a largura total deste container de imagens e jogar este mesmo valor como altura do placeholder.
4 - Criar um script para quando rolar a tela para baixo,ele rolar o container de imagens para o lado (cada vez que rolar pra baixo, rolar para a direita, e quando rolar pra cima, rolar para a esquerda)
5 - Criar um script para detectar a posição do container de imagens e placeholder em relação ao topo da página para sabermos exatamente quando deveríamos começar a rolar e quando parar e liberar o scroll para o “modo vertical” novamente e avançar para as próximas seções da página
5 - A grande sacada… Colocar o modo “sticky” no container de imagens para que ele ficasse “fixado” na tela até o fim da rolagem de seu container pai (placeholder).
Vem conferir o resultado desse projeto: https://lestebr.com/
Bom, esse foi um dos desafios que enfrentamos em nosso dia-a-da, em breve postaremos novos episódios. Curtiu a ideia? Comenta aí! ;)
