Marquee Direction?

[lucyh]

Hey friends! So I found some custom liquid code for a scrolling marquee, but I am hoping to reverse the direction. Can't figure out what edits I need to make to this code (or find other code that allows for the background image, and the additional font edits. 

<div class="marquee">
<h1>· PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY ·
PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY </h1>
</div>
<style>
.marquee {
overflow: hidden;
border-top: 0px solid #000;
border-bottom: 0px solid #000;
display: flex;
flex-direction: row-reverse;
background-image: url(https://cdn.shopify.com/s/files/1/0936/6067/6413/files/DEBE_LYNNE_SHOPIFY_BACKGROUND.png?v=174776440...);
}

.marquee h1{
font-size: 30px;
FONT-WEIGHT: BOLDER;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
white-space: nowrap;
text-transform: uppercase
}
</style>
<script>
function Marquee(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;

parentSelector.insertAdjacentHTML('beforeend', clone);
parentSelector.insertAdjacentHTML('beforeend', clone);
const firstElement = parentSelector.children[0];
let i = 0;
setInterval(function () {
firstElement.style.marginRight = `-${i}px`;
if (i > firstElement.clientWidth) {
i = 0;
}
i = i + speed;
}, 0);
}
window.addEventListener('load', Marquee('.marquee', 0.2))
</script>

[lucyh]

[Dan-From-Ryviu]

Hi @lucyh 

You update your code to this and check again

<div class="marquee">
  <h1>· PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY ·
    PURE ROMANCE · EUFORIA · HAPPY · PURE ROMANCE · EUFORIA · HAPPY </h1>
</div>
<style>
  .marquee {
    overflow: hidden;
    border-top: 0px solid #000;
    border-bottom: 0px solid #000;
    display: flex;
    flex-direction: row;
    background-image: url(https://cdn.shopify.com/s/files/1/0936/6067/6413/files/DEBE_LYNNE_SHOPIFY_BACKGROUND.png?v=174776440...);
  }

  .marquee h1 {
    font-size: 30px;
    font-weight: bolder;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    white-space: nowrap;
    text-transform: uppercase;
  }
</style>
<script>
  function Marquee(selector, speed) {
    const parentSelector = document.querySelector(selector);
    const clone = parentSelector.innerHTML;

    parentSelector.insertAdjacentHTML('beforeend', clone);
    parentSelector.insertAdjacentHTML('beforeend', clone);
    const firstElement = parentSelector.children[0];
    let i = 0;
    setInterval(function () {
      firstElement.style.marginLeft = `-${i}px`;
      if (i > firstElement.clientWidth) {
        i = 0;
      }
      i = i + speed;
    }, 0);
  }
  window.addEventListener('load', Marquee('.marquee', 0.2));
</script>

[lucyh]

That's going the same direction, and overlaps some text! But super appreciate the response! 

[SEOAnt-Jeffery]

Hello @lucyh

If you find out the custom code from liquid file from the Shopify admin, you can also use the below way to reverse the changes made before:

1. Access the liquid file page from the Shopify admin page by clicking the three dots near the Customize button and choosing the Edit code option.

2. Find out related liquid file, such as theme.liquid.

3. Find out one option called Current under Recent changes, and here you can click to check previous versions or changes made before. By selecting related versions in this option, you can revert the liquid file to the last version and see what the code looked like last time.

You can have a try at using the method I provide here and see if it works. Thank you!

[lucyh]

Thank you! I don't have a previous version, the code above is the code I used in a custom liquid section from the theme editor. So the version prior just doesn't contain the code. Unless I'm totally misunderstanding 😆

[SEOAnt-Jeffery]

I see Luckh, thanks for your explanation here. You may also try to further check with colleagues if they know this code as well, and you can work together to revert the code content. Hope you can find it back earlier!