How to fix moving text in the Dawn theme announcement bar?

How to fix moving text in the Dawn theme announcement bar?

FOP
Explorer
114 0 17

Hello, 
I have custom code that makes my announcement bar text move, is there any way to make the text fixed and not move?  I have copied the code below in the annoucement bar liquid.  I am using the DAWN THEME


{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div
class="announcement-bar scroll-box color-{{ block.settings.color_scheme }} gradient"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if block.settings.text != blank -%}
<div class="scroll-container">
{%- if block.settings.link != blank -%}
<a
href="{{ block.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5" id="scroll-element">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-webkit-keyframes scroll{
0% {
margin-right: 0%;
}
100% {
margin-right: 100%;
}
}
.scroll-box {
display: inline-flex;
justify-content: center;
white-space: nowrap;
font-size: 1.1em;
overflow: hidden;
width: 100%;
background: rgb(var(--color-background));
background: var(--gradient-background);
}
@media screen and (min-width: 768px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 120px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.scroll-container {
width:100%;
direction: rtl;
margin-left: 24px;
overflow: hidden;
}
}
#scroll-element {
padding: 10px;
}
{% endstyle %}
<script>
var elem = document.getElementById('scroll-element');
if (elem) {
var elemWidth = elem.offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"
};
</script>
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "t:sections.all.colors.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}

Replies 3 (3)

PageFly-Oliver
Shopify Partner
878 190 185

Hi @FOP ,

You can try:

 

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div
class="announcement-bar scroll-box color-{{ block.settings.color_scheme }} gradient"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if block.settings.text != blank -%}
<div class="scroll-container">
{%- if block.settings.link != blank -%}
<a
href="{{ block.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-webkit-keyframes scroll{
0% {
margin-right: 0%;
}
100% {
margin-right: 100%;
}
}
.scroll-box {
display: inline-flex;
justify-content: center;
white-space: nowrap;
font-size: 1.1em;
overflow: hidden;
width: 100%;
background: rgb(var(--color-background));
background: var(--gradient-background);
}
@media screen and (min-width: 768px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 120px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.scroll-container {
width:100%;
direction: rtl;
margin-left: 24px;
overflow: hidden;
}
}
#scroll-element {
padding: 10px;
}
{% endstyle %}
<script>
var elem = document.getElementById('scroll-element');
if (elem) {
var elemWidth = elem.offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"
};
</script>
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "t:sections.all.colors.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

FOP
Explorer
114 0 17

Hello, 
Where would I place this?  In the announcement bar liquid.  If that's the case, it didn't work

FOP
Explorer
114 0 17

Sadly, this didn't work