Otimização de JavaScript e Liquid na Shopify para Popup Interativo com Vídeo
12/12/2024 às 18:25Descrição do Projeto:
O que o código faz:
1. Exibe um botão flutuante que abre um popup com vídeos.
2. Permite navegação entre vídeos com controles de play/pause e volume.
3. Gerencia dinamicamente o progresso dos vídeos exibidos.
Objetivo:
Otimizar o código para reduzir o impacto no tempo de carregamento da página, mantendo as funcionalidades e garantindo uma melhor experiência para o usuário.
1. Carregamento sob demanda de funções do script e dos vídeos:
• O JavaScript deve ser carregado apenas quando o usuário clicar no botão para abrir o popup.
• Vídeos devem ser carregados apenas sob demanda, também apenas quando o cliente clicar para avançar o vídeo.
2. Remoção de código redundante:
• Eliminar qualquer funcionalidade desnecessária ou duplicada no JavaScript.
3. Reduzir solicitações de rede:
• Consolidar arquivos e minimizar o número de requisições HTTP.
4. Minimização de código:
• Compactar os arquivos HTML, JavaScript e CSS relacionados à funcionalidade para reduzir o tamanho.
5. Adicionar 2 funcionalidades:
• Quando o vídeo está carregando, exibir um ícone de loading ao centro.
• Adicionar a função de rolar para o lado para passar o vídeo no mobile; no momento, está apenas com clique.
CÓDIGO ATUAL
Minha loja é na Shopify e o código atual se encontra da seguinte maneira:
HTML (floating-ball.liquid):
• Estrutura principal dos elementos estáticos, incluindo:
• Botão flutuante com um GIF como ícone.
• Popup de vídeo contendo controles de navegação, botões de volume, play/pause e barra de progresso.
• Lista de fontes de vídeo para diferentes arquivos.
CSS (floating-ball.css):
• Estilos para:
• Aparência do botão flutuante (tamanho, posição e animações).
• Popup de vídeo (posicionamento, transições e design responsivo).
• Barras de progresso e controles do player.
• Ícones SVG (dimensões e cores).
JavaScript (floating-ball.js):
• Funções principais:
• Abertura e fechamento do popup.
• Controle de reprodução de vídeos (play/pause, anterior/próximo).
• Controle de volume (mudo/ativar som).
• Atualização dinâmica da barra de progresso e do título/subtítulo do vídeo.
• Manipulação de eventos de cliques e toques (responsivo).
• Implementação de navegação pelos vídeos com setas e cliques nas laterais do vídeo.
Habilidades desejadas:
Arquivos anexados:
Entre ou Cadastre-se para ver os arquivos anexados.
Atividades do cliente nesse projeto:
Última visualização: 13/12/2024 às 22:46
Última interação: 13/12/2024 às 01:27
Informações adicionais
| Categoria: | Web, Mobile & Software |
|---|---|
| Subcategoria: | Desenvolvimento Web |
| Orçamento: | Aberto |
| Nível de experiência: | Intermediário |
| Visibilidade: | Público |
| Propostas: | 4 |
| Propostas excluídas: | 1 |
| Interessados: | 4 |
| Valor Mínimo: | R$ 50,00 |
Sistema gerador de simulados - Estou buscando um desenvolvedor para criar uma aplicação web para simulados de concursos públicos. O sistema permitirá que os usuários criem e respondam simulados...
Programador PHP para projeto CRUD de geração de texto - Estou precisando de um programador experiente para fazer um sistema de geração de texto. Fazer em PHP e MySQL, usando Cursor AI. Projeto: Tabelas: - Textos - Usuários - Info...
Sistema de gerenciamento empresarial com contabilidade - Preciso de um sistema web completo para gerenciamento empresarial, com foco em controle contábil e financeiro. A ferramenta deve ser simples de usar, responsiva (acesso via celular e computa...
Desenvolvimento de site para estatísticas de futebol - Estou em busca de um profissional ou equipe para desenvolver um site focado em estatísticas de futebol, com visual moderno, rápido e fácil de navegar. O sistema deve permitir:...
Atualização de website no WIX e SEO - Olá! Meu nome é Ricardo e tenho um website pessoal no WIX que necessita de atualização de algumas informações pontuais. O site já se encontra no ar....
