Barra de anúncios animados Shopify

 < div class = "announcement-container" style = "background: {{ section.settings.bar_background }} ;" > 
< anúncio - dados da seção - animação - atraso = " {{ section.settings.delay | times: 1000 }} " dados - animação - tipo = " {{ section.settings.animation_type }} " >
 { %- para bloco na seção. blocos -% } 
{ %- bloco de casos . tipo -% }
 { %- quando 'texto de anúncio' -% } 
< div class = "announcement-bar" role = "region" aria - label = " {{ 'sections.header.announcement' | t }} " { { block. shopify_attributes } } > 
{ % -se bloco. configurações . texto ! = em branco -% }
 < div class = "largura da página" >
 < div class = "announcement-bar__message" 
estilo = "cor: {{ block.settings.text_color }} ;" >
 { { bloquear. configurações . texto } }
 { { bloquear. configurações . líquido_personalizado } }
 { % -se bloco. configurações . arrow_icon -% } 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon icon-caret" viewBox = "0 0 10 6" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" >
 </svg> _
 { %- fim se -% }
 </div> _ _ 
</div> _ _
 { %- fim se -% }
 </div> _ _
 { % quando 'imagem de anúncio' % }
 < div class = "barra de anúncio" > 
{ % se bloco. configurações . image_link != blank % } < a href = " {{ block.settings.image_link }} " { % else % } < div { % endif % } class = "announcement-banner__wrapper" > 
< img src = " {{ block.settings.announcement_image | img_url: " master " }} " alt = " {{ block.settings.announcement_image.alt }} " > 
{ % se bloco. configurações . image_link != blank % } </ a > { % else % } </ div > { % endif % } 
</div> _ _
 { %- fim -% }
 { %- fim para -% }
 </ anúncio - seção >
 </div> _ _
 <estilo> _
 . anúncio - contêiner {
 altura : 40px ; 
estouro : oculto ;
 }
 . anúncio - contêiner. anúncio - bar__message {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 preenchimento : não definido ;
 altura : 100 %;
 } 
. anúncio - bar__message svg {
 largura : 10px ;
 gire : - 90 graus ;
 }
 . anúncio - bar__message p ,
 . anúncio - bar__message p > * {
 tamanho da fonte : 2rem ;
 cor : não definido ;
 } 
. anúncio - bar__message p {
 margem : 0 5px ;
 }
 . anúncio - bar__message a {
 decoração de texto : nenhuma ;
 margem - esquerda : 5px ;
 tamanho da fonte : 2rem ;
 } 
. anúncio - bar__message > * {
 cor : não definido ;
 }
 . anúncio - bar__message : passe o mouse sobre {
 decoração de texto : sublinhado ;
 texto - sublinhado - deslocamento : 0,3rem ;
 cor : não definido ;
 } 
. anúncio - banner__wrapper {
 exibição : flexível ;
 alinhar - conteúdo : centro ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 altura : 100 %;
 preenchimento : 0 10px ;
 } 
. anúncio - banner__wrapper img {
 exibição : bloco ;
 altura : 40px ;
 margem : automática ;
 }
 . anúncio - barra {
 - webkit - animação - duração : 1s ;
 animação - duração : 1s ; 
-webkit - animation - fill - mode : ambos ;
 modo de preenchimento de animação : ambos ;
 border - bottom : nenhum ;
 altura : 100 %;
 }
 . anúncio - bar__message. Centro { 
alinhar - itens : centro ;
 }
 . barra de anúncio . largura da página ,
 . barra de anúncio . anúncio - bar__message {
 altura : 100 %;
 }
 . fadeInUp {
 exibição : bloquear ! importante ; 
-webkit - animação - nome : fadeInUp ;
 nome da animação : fadeInUp ;
 }
 . deslize {
 -webkit -animação -nome : slideIn ;
 nome da animação : slideIn ;
 }
 . virar para dentro { 
-webkit -animação -nome : flipIn ;
 nome da animação : flipIn ;
 }
 . quicar {
 -webkit - animation - name : bounce - top 0,9s ambos ;
 nome - da-animação : bounce - top 0,9s ambos ;
 } 
Tela @media somente e ( largura máxima : 750px ) {
 . anúncio - banner__wrapper img {
 altura : automático ;
 largura : 100 %;
 }
 }
 @keyframes fadeInUp {
 0 % {
 opacidade : 0 ; 
-webkit -transform : translate3d ( 0,100 % , 0 ) ;
 transformar : traduzir3d ( 0 , 100 %, 0 ) ;
 }
 100 % { 
opacidade : 1 ;
 -webkit - transform : translateZ ( 0 ) ;
 transformar : traduzirZ ( 0 ) ;
 }
 }
 @keyframes slideIn {
 0 % {
 opacidade : 0 ; 
-webkit -transformação : translate3d ( 100 %, 0 , 0 ) ;
 transformar : traduzir3d ( 100 %, 0 , 0 ) ;
 }
 100 % { 
opacidade : 1 ;
 -webkit -transformação : translate3d ( 0 %, 0 , 0 ) ;
 transformar : traduzir3d ( 0 %, 0 , 0 ) ;
 } 
}
 @keyframes flipIn {
 0 % {
 -webkit - transform : rotateX ( 0 ) ;
 transformar : girarX ( 0 ) ;
 }
 100 % { 
-webkit - transform : rotateX ( 360deg ) ;
 transformar : girarX ( 360deg ) ;
 }
 }
 . ocultar - barra {
 Mostrar nenhum ! importante ;
 }
 </ estilo > 
{ % esquema % }
 {
 "name" : "Anúncio animado" ,
 "max_blocks" : 12 ,
 "configurações" : [
 {
 "tipo" : "cor" , 
"id" : "bar_background" ,
 "padrão" : "#F3F3F3" ,
 "label" : "Fundo da barra"
 } ,
 {
 "tipo" : "número" ,
 "id" : "atraso" , 
"padrão" : 5 ,
 "label" : "Atraso de animação em segundos"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "tipo_animação" ,
 "label" : "Tipo de animação" , 
"opções" : [
 {
 "valor" : "slideIn" ,
 "label" : "Deslizar para dentro"
 } ,
 {
 "valor" : "fadeInUp" ,
 "label" : "Aparece e aumenta gradualmente" 
} ,
 {
 "valor" : "flipIn" ,
 "label" : "Vira"
 }
 ] ,
 "default" : "fadeInUp"
 }
 ] ,
 "blocos" : [
 { 
"type" : "texto de anúncio" ,
 "name" : "Texto do anúncio" ,
 "configurações" : [
 {
 "type" : "richtext" ,
 "id" : "texto" , 
"default" : "<p>Bem-vindo à nossa loja</p>" ,
 "label" : "Texto do anúncio"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "seta_icon" , 
"label" : "Mostrar ícone de seta no final" ,
 "padrão" : falso
 } ,
 {
 "tipo" : "cor" ,
 "id" : "text_color" ,
 "padrão" : "#000" , 
"label" : "Cor do texto da barra"
 } ,
 {
 "tipo" : "líquido" ,
 "id" : "custom_liquid" ,
 "label" : "Líquido personalizado adicionado no final do texto" , 
"default" : " {% render 'icon-arrow' %} " ,
 "info" : "A disponibilidade dos ícones depende do tema que você está usando"
 }
 ]
 } ,
 {
 "type" : "imagem de anúncio" ,
 "name" : "Banner de anúncio" , 
"configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "announcement_image" ,
 "label" : "Imagem do banner do anúncio" ,
 "info" : "Certifique-se de que o tamanho da imagem seja 1100 x 50 para obter melhores resultados"
 } , 
{
 "tipo" : "url" ,
 "id" : "image_link" ,
 "label" : "Link da imagem"
 }
 ]
 }
 ] ,
 "predefinições" : [
 { 
"name" : "Barra de anúncios animada"
 }
 ]
 }
 { % termina o esquema % }

 classe NoticeSection estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . animar ( ) ;
 }
 animar ( ) {
 const e = isto . querySelectorAll ( ".announcement-bar" ) ; 
const t = isto . conjunto de dados . animaçãoDelay ;
 const n = isto . conjunto de dados . tipo de animação ;
 seja s = 0 ;
 setInterval ( função ( ) {
 s ++; 
s = s > e. comprimento - 1 ? 0 : s ;
 e. forEach ( ( e , t ) => {
 se ( t === s ) { 
e. lista de classes . adicione ( n ) ;
 e. lista de classes . remover ( "ocultar barra" ) ;
 } outro {
 e. lista de classes . remover ( n ) ; 
e. lista de classes . add ( "ocultar barra" ) ;
 }
 } ) ;
 } , t ) ;
 }
 }
 elementos personalizados. define ( "annoucement-section" , NoticeSection ) ;