Compatibilidade: todos os temas do Shopify.
Crie uma seção de texto de imagem animada sobreposta em seu site.
Foi possível criar uma animação sem aplicá-la em todas as seções do seu site? Sim, a maioria dos desenvolvedores web adicionará uma biblioteca externa aos para fazer o trabalho. Vamos fazer isso sem uma biblioteca. Deixe nosso código simples fazer o trabalho.
Confira a loja DEMO aqui 💻 . Senha: made4uo
O que você está comprando:
- Imagem animada cativante com texto
- Funciona bem com dispositivos móveis
- A animação é reiniciada quando o cliente volta ao topo e rola para baixo novamente
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar.
1. Temos que adicionar uma seção, então vamos ao nosso editor de código. Na loja de administração do Shopify, abra os temas, clique em "Ações" e depois em "Editar código".
2. Abra a pasta Seções e adicione um novo arquivo. Vamos chamá-lo de "texto de imagem animada". Em seguida, cole o código abaixo.
| <imagens animadas> <div class="animatedContainer" id="animado-- {{section.id}} " style="background: {{section.settings.section_bg}} ; direção flexível: {{section.settings.placement}} " > <div class="imagesContainer"> {% assign firstImage = section.settings.img_1 %} {% assign secondImage = section.settings.img_2 %} {% if section.settings.slide_image %} <a {% if section.settings.img_1_link != blank %} href=" {{section.settings.img_1_link }} " {% endif %} class="slideLink {% if section.settings.placement == 'row-reverse' %} slide--left {% else %} slide--right {% endif %} " estilo="largura: 100%"> <img class="slideImagem" style="largura: 100%" alt=" {{section.settings.img_1.alt }} " srcset=" {% if firstImage.width >= 493 %} {{ firstImage| img_url: '493x' }} 493w, {% endif %} {% if firstImage.width >= 600 %} {{ firstImage | img_url: '600x' }} 600w, {% endif %} {% if firstImage.width >= 713 %} {{ firstImage| img_url: '713x' }} 713w, {% endif %} {% if firstImage.width >= 823 %} {{ firstImage| img_url: '823x' }} 823w, {% endif %} {% if firstImage.width >= 990 %} {{ firstImage| img_url: '990x' }} 990w, {% endif %} {% if firstImage.width >= 1100 %} {{ firstImage | img_url: '1100x' }} 1100w, {% endif %} {% if firstImage.width >= 1206 %} {{ firstImage | img_url: '1206x' }} 1206w, {% endif %} {% if firstImage.width >= 1346 %} {{ firstImage| img_url: '1346x' }} 1346w, {% endif %} {% if firstImage.width >= 1426 %} {{ firstImage| img_url: '1426x' }} 1426w, {% endif %} {% if firstImage.width >= 1646 %} {{ firstImage | img_url: '1646x' }} 1646w, {% endif %} {% if firstImage.width >= 1946 %} {{ firstImage| img_url: '1946x' }} 1946w, {% endif %} {{ firstImage | img_url: 'master' }} {{ firstImage }} w" src=" {{ firstImage | img_url: '1946x' }} " carregando = "preguiçoso" largura="973"> </a> {% else %} {% if section.settings.img_1 != blank %} {% if section.settings.img_1_link != blank %} <img class="firstImage" alt=" {{section.settings.img_1.alt }} " srcset=" {% if firstImage.width >= 493 %} {{ firstImage| img_url: '493x' }} 493w, {% endif %} {% if firstImage.width >= 600 %} {{ firstImage | img_url: '600x' }} 600w, {% endif %} {% if firstImage.width >= 713 %} {{ firstImage| img_url: '713x' }} 713w, {% endif %} {% if firstImage.width >= 823 %} {{ firstImage| img_url: '823x' }} 823w, {% endif %} {% if firstImage.width >= 990 %} {{ firstImage| img_url: '990x' }} 990w, {% endif %} {% if firstImage.width >= 1100 %} {{ firstImage | img_url: '1100x' }} 1100w, {% endif %} {% if firstImage.width >= 1206 %} {{ firstImage | img_url: '1206x' }} 1206w, {% endif %} {% if firstImage.width >= 1346 %} {{ firstImage| img_url: '1346x' }} 1346w, {% endif %} {% if firstImage.width >= 1426 %} {{ firstImage| img_url: '1426x' }} 1426w, {% endif %} {% if firstImage.width >= 1646 %} {{ firstImage | img_url: '1646x' }} 1646w, {% endif %} {% if firstImage.width >= 1946 %} {{ firstImage| img_url: '1946x' }} 1946w, {% endif %} {{ firstImage | img_url: 'master' }} {{ firstImage }} w" src=" {{ firstImage | img_url: '1946x' }} " carregando = "preguiçoso" largura="973"> </a> {% endif %} {% if section.settings.img_2 != blank %} {% if section.settings.img_2_link != blank %} <img class="secondImage" alt=" {{section.settings.img_2.alt }} " srcset=" {% if firstImage.width >= 493 %} {{ firstImage| img_url: '493x' }} 493w, {% endif %} {% if secondImage.width >= 600 %} {{ secondImage | img_url: '600x' }} 600w, {% endif %} {% if secondImage.width >= 713 %} {{ secondImage| img_url: '713x' }} 713w, {% endif %} {% if secondImage.width >= 823 %} {{ secondImage | img_url: '823x' }} 823w, {% endif %} {% if secondImage.width >= 990 %} {{ secondImage| img_url: '990x' }} 990w, {% endif %} {% if secondImage.width >= 1100 %} {{ secondImage | img_url: '1100x' }} 1100w, {% endif %} {% if secondImage.width >= 1206 %} {{ secondImage | img_url: '1206x' }} 1206w, {% endif %} {% if secondImage.width >= 1346 %} {{ secondImage| img_url: '1346x' }} 1346w, {% endif %} {% if secondImage.width >= 1426 %} {{ secondImage| img_url: '1426x' }} 1426w, {% endif %} {% if secondImage.width >= 1646 %} {{ secondImage | img_url: '1646x' }} 1646w, {% endif %} {% if secondImage.width >= 1946 %} {{ secondImage| img_url: '1946x' }} 1946w, {% endif %} {{ secondImage | img_url: 'master' }} {{ secondImage }} w" src=" {{ secondImage | img_url: '1946x' }} " carregando = "preguiçoso" largura="973"> </a> {% endif %} {% endif %} </div> <div class="textContainer" style="color: {{section.settings.section_text}} ;"> {% if section.settings.title != blank %} <h1 style="color: {{section.settings.section_text}} ;"> {{ section.settings.title }} </h1> {% endif %} {{ section.settings.description }} {% if section.settings.button_link and section.settings.button != blank %} {{ section.settings.button_link }} {{ section.settings.button}} </a> {% endif %} </div> </div> </imagens-animadas> <estilo> .animatedContainer { largura: 100%; preenchimento: 5% 10%; exibição: flexível; lacuna: 40px; posição: relativa; justificar-conteúdo: espaço entre; alinhar itens: centro; plano de fundo: {{section.settings.section_bg}} ; } .imagesContainer { exibição: flexível; alinhar itens: centro; flexível: 0 1 50%; margem esquerda: -15px; margem inferior: 5rem } .imagesContainer > a > img { largura: 100%; } .imagesContainer .slideLink { índice z: 1; } .imagesContainer .firstLink { índice z: 1; flexível: 0 1 50%; transformar: traduzir(50px, 50px); } .imagesContainer .secondLink { flexível: 0 1 50%; índice z: 1; } .textContainer { largura: 50%; exibição: flexível; justificar-conteúdo: centro; direção flexível: coluna; largura mínima: 43%; flexível: 0 1 43%; alinhar itens: centro; } .textContainer h1 { estilo da fonte: normal; peso da fonte: 700; margem: 0; } .textContainer p { alinhamento de texto: centro; } .textContainer a { decoração de texto: nenhuma; preenchimento: 10px 20px; borda: 2px sólido {{section.settings.section_text}} ; display: bloco embutido; largura: conteúdo máximo; raio da borda: 0rem; } .botão--primário { cor branca; plano de fundo: {{section.settings.section_text}} ; } .button--secundário { cor: {{section.settings.section_text}} ; } .slide--esquerda { direção flexível: linha reversa; } .slide--direita { direção flexível: linha; } .seção-animação .slide--esquerda { transição: margem esquerda 1s cúbico-bezier (0,215, 0,61, 0,355,1); animação: slideFromLeft 1s cúbico-bezier(.215,.61,.355,1); } .seção-animação .slide--direita { transição: margem esquerda 1s cúbico-bezier (0,215, 0,61, 0,355,1); animação: slideFromRight 1s bezier cúbico (0,215, 0,61, 0,355,1); } .seção-animação .firstLink{ transição: opacidade 0,5s facilidade, largura 1s facilidade, transformação 0,5s cúbico-bezier (0,2, 0,06, 0,05, 0,95); animação: fade-in com facilidade de 0,6s, primeira imagem 0,6s cúbico-bezier (0,2, 0,06, 0,05, 0,95); } .seção-animação .secondLink { transição: opacidade 0,5s facilidade, largura 1s facilidade, transformação 0,5s cúbico-bezier (0,2, 0,06, 0,05, 0,95); animação: fade-in 0,6s facilidade, segunda imagem 0,6s cúbico-bezier(0,2, 0,06, 0,05, 0,95); } .seção-animação .textContainer { transição: opacidade 0,9s bezier cúbico (0,04, 0, 0,2, 1), transformação 0,9s bezier cúbico (0,04, 0, 0,2, 1); animação: facilidade de movimento de 0,8s; } @keyframes slideFromLeft { 0% { opacidade: 0; margem esquerda: 5%; } 100%{ opacidade: 1; margem esquerda: 0; } } @keyframes slideFromRight{ 0% { opacidade: 0; margem esquerda: -5%; } 100%{ opacidade: 1; margem esquerda: 0; } } @keyframes primeira imagem { 0% { transformar: traduzir(-50px, 50px); } 100%{ transformar: traduzir(50px, 50px); } } @keyframes segunda imagem { 0% { transformar: traduzirX(50px); } 100%{ transformar: traduzir(0); } } @keyframes fade-in { 0% { opacidade: 0; largura: 110%; } 100%{ opacidade: 1; largura: 100%; } } @keyframes movimento para cima { 0% { opacidade: 0; transformar: traduzirY(100px); } 100%{ opacidade: 1; transformar: traduzirY(0px); } } Tela somente @media e (largura máxima: 900px) { .animatedContainer { direção flexível: coluna! Importante; preenchimento: 5% 8%; } .imagesContainer { largura: 100%; } .textContainer { largura: 100%; preenchimento: 0 5%; } } </estilo> {% schema %} { "name": "Seção animada", "configurações": [ { "tipo": "selecionar", "id": "posicionamento", "padrão": "linha", "label": "Colocação dos itens", "opções": [ { "valor": "linha reversa", "label": "Imagem à direita" }, { "valor": "linha", "label": "Imagem à esquerda" } ] }, { "type": "image_picker", "id": "img_1", "label": "Primeira imagem" }, { "tipo": "url", "id": "img_1_link", "label": "Link da primeira imagem" }, { "type": "image_picker", "id": "img_2", "label": "Segunda imagem" }, { "tipo": "url", "id": "img_2_link", "label": "Link da segunda imagem" }, { "tipo": "texto", "id": "título", "rótulo": "Título" }, { "tipo": "texto rico", "id": "descrição", "rótulo": "Descrição" }, { "tipo": "cor", "id": "seção_bg", "padrão": "#FFFFFF", "label": "Fundo da seção" }, { "tipo": "cor", "id": "seção_texto", "padrão": "#000", "label": "Cor do texto da seção" }, { "tipo": "url", "id": "botão_link", "label": "Link do botão" }, { "tipo": "texto", "id": "botão", "label": "Etiqueta do botão" }, { "tipo": "selecionar", "id": "estilo_botão", "default": "botão--primário", "label": "Estilo do botão", "opções": [ { "valor": "botão--primário", "label": "Botão principal" }, { "valor": "botão--secundário", "label": "Botão secundário" } ] } ], "predefinições": [ { "name": "Seção Animada" } ] } {% endschema %} |
3. Como estamos ouvindo as rolagens do usuário, vamos adicionar um código javascript. Existe uma maneira de fazer isso com CSS, mas nem todos os navegadores oferecem suporte. Enfim, na pasta Asset, abra o global.js.
| classe AnimatedBox estende HTMLElement { construtor() { super(); this.animated = this.querySelector('.animatedContainer'); this.animatedItems = this.querySelectorAll('.animatedContainer'); this.createObserver(); } criarObservador() { const revelarSection = function(entradas, observador) { const [entrada] = entradas; if(!entry.isIntersecting ||entry.boundingClientRect.top < 0) { entry.target.classList.remove('animação de seção'); } outro { entry.target.classList.add('animação de seção'); } }; deixe seçãoObserver = new IntersectionObserver( revelarSeção); this.animatedItems.forEach(função(seção) { seçãoObserver.observe(seção); seção.classList.remove('animação de seção'); }) } } customElements.define('imagens animadas', AnimatedBox); |
É isso.
Nota: eu sugeriria colocá-la como uma terceira seção ou superior, para que o javascript tenha tempo de rolar e chamar a animação
0 comentários