A Digital Innovation One Inc. convidou o @Diogo Mainardes e a @Michele Ambrosio para uma LiveCoding 🔝 superdescontraída, que além uma temática incrível (Spider-Man ❤️) e excelente dicas/macetes para construção de um site em #html5 #css e #javascript, também ensinou:
✅ Criar o efeito de carrossel com #CSS, utilização do #flexbox , mudança de background com #JavaScript, criação de uma barra de navegação lateral à esquerda, “pill buttons”, utilização do #FancyBox para criar uma galeria de fotos em uma “lightbox” (janela flutuante), além das propriedades #Transform e #Transition;
• Básico de perspectiva: Uso da propriedade #transform para mover e girar objetos em um espaço 3D (com os eixos X, Y e Z), e uso da #perspective para controlar a profundidade;
• Propriedade #Scale: usado para alterar o tamanho dos elementos, aumentando ou reduzindo proporcionalmente em relação ao tamanho original, que faz parecer que o homem aranha está saltando na tela.
❎ Usei um “fa-stack” para juntar dois ícones do FontAwesome, o que funcionou perfeitamente, porém não estava conseguindo alinhar ele com o texto “Watch Trailer” nem deixar uma margem entre essa div com o link do trailer e a galeria (em algumas telas, a galeria se opõe ao texto 🤔).
❎ Usei o FancyBox para fazer a galeria, o que também funcionou brilhantemente para as imagens, mas o não consegui fazer com que o vídeo abra em fullsize... da para resolver com o control, mas não ficou do jeito que eu esperava #xatiada.