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 |
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
Desenvolver site de logística com front end e back end - Construir um site de logística com front end para ser modelado e finalizado, conectando a API ao sistema back end. Experiência com: 1- Designer 2- PHP, Javascript, HTML e custom CSS 3...
Criação de 5 sites para editora - Preciso de 5 sites para uma editora, onde ele deseja que haja de 3 a 4 abas. O design será fornecido por ele, pois é um escritor que faz suas próprias obras e irá usar i...
Desenvolvedor Python para aplicação de formatação de textos em Word - Estamos buscando um desenvolvedor com experiência em Python e habilidades específicas para criar uma aplicação que: 1. Leia arquivos de texto em formato .txt. 2. Formate...
Desenvolvimento de 5 sites - Estou procurando um profissional experiente para desenvolver 5 sites modernos e responsivos. Por favor, envie seu portfólio e prazo estimado. Trabalho com urgência!
Desenvolvimento de site para cartão fidelidade - Sistema muito simples. O sistema terá um admin geral, que será a interface para controlar todas as lojas e usuários. Haverá um admin da loja, que será respons&a...
