Criando uma Animação de Scroll Horizontal Infinito com HTML, CSS e JavaScript

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma: https://dlp.hashtagtreinamentos.com/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_o-T1Wf9-hc0 PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_o-T1Wf9-hc0 PARA BAIXAR O MINICURSO GRATUITO DE JAVASCRIPT: https://pages.hashtagtreinamentos.com/inscricao-curso-basico-javascript?origemurl=hashtag_yt_org_minijs_o-T1Wf9-hc0 ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1-oKso1PqPcUAA9-Nl8teDk-Ta9jJwIPD?origemurl=hashtag_yt_org_planilhahc_o-T1Wf9-hc0 ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/scroll-horizontal-infinito-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Na aula de hoje eu vou te ensinar como criar uma animação de scroll horizontal infinito usando HTML, CSS e JavaScript! Essa é uma animação muito visual, pois vai passando as informações e fica se repetindo para sempre, então pode deixar informações importantes passando nesse scroll! Eu vou te mostrar o passo a passo como fazer essa animação no CSS, só que antes de fazer uma animação, você precisa criar os elementos e os itens que serão utilizados. Depois fazer toda a formatação e ajuste e entender como a animação precisa funcionar, qual é o movimento que ela vai fazer. Aí é que vamos dar início a animação, depois de tudo pronto, pois a animação é a última coisa que vamos fazer! Você vai perceber que não dá pra notar que temos apenas 2 blocos de itens ao invés de infinitos, pois a transição fica muito suave. No final, eu vou te mostrar como duplicar os itens utilizando o JavaScript ao invés de fazer isso de forma manual! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 01:08 Explicação do scroll horizontal 03:57 VS Code com os códigos 04:10 Arquivo em branco 04:48 Div de scroll (div.scroll) 05:28 Container do scroll (nomenclatura da metodologia BEM) 06:08 Itens do scroll 07:16 Visualizando os dados na página (ferramentas do desenvolvedor) 07:48 CSS – Arquivo inicial (reset) 08:59 Configurações do scroll (estilo do scroll) 10:45 FlexBox (ajuste do layout dos itens do scroll) 12:00 Formatação dos itens do scroll 14:45 Ocultar itens fora do intervalo (overflow) 15:25 Como arrastar os itens (ideia de movimento) 18:18 Duplicando os elementos (ajustes espaçamento) 21:22 Animação no CSS 24:55 Propriedade mask no CSS (fading, linear-gradient) 29:05 JavaScript para duplicar conteúdo automaticamente 33:57 For each no JavaScript 36:35 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao