How can I clean up this marquee text code and fix logo color?

IMYOURGIRL
Shopify Partner
48 1 10

Hi guys,

I can't find the thread where I copied some code for scrolling marquee text and altered it a bit 🌶. I have changed some code to make the logo bigger and it works great, but I would like to clean up this code but can't figure it out..

 

I used a new logo, but the color is very dull in stead of the fluroriscend pink color I used. Maybe I'm missing something? I first used 3 different colors of logo, that's why the code has every logo x3. If someone can help me clean this code and look at why the color is dull, that would be amazing 🙂

 

I'm also trying to make this same scrolling text, but moving from left to right 😊.

 

Website (pass=moxiebam) you'll see this at the footer where I used a custom liquid section.

 

 

<style>
logo-carousel{
    display:block;
    overflow:hidden;
}
logo-carousel.logo-carousel{
    margin:25px 0;
}
@media (min-width: 992px){
    logo-carousel.logo-carousel{
        margin:40px 0;
    }
}
  
logo-carousel .logo-carousel__container{
    display:flex;
  height: 150px;
}
logo-carousel .logo-carousel__images{
    -webkit-animation-name:animate;
    animation-name:animate;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-duration:var(--imgSpeed);
    animation-duration:var(--imgSpeed);
    display:flex;
  align-items: center;
}
logo-carousel .logo-carousel__image{
    flex:0 0 250px;
    width:250px;
    height:275px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    position:relative;
  margin: 0 20px;
}

    logo-carousel .logo-carousel__image{
        flex:0 0 auto;
        height:auto
    }




logo-carousel .logo-carousel__image.empty{
    background-color:#f7f7f9;
    border-right:1px solid #E2E2EA
display: none!important;
}
logo-carousel .logo-carousel__image.empty:before{
    display: none!important;
content:"6:7";
    left:16px;
    bottom:16px;
    position:absolute;
    font-family:FuturaPT-Heavy,sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#e2e2ea;
    font-size:30px;
    line-height:30px
}
logo-carousel .logo-carousel__image-column{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:block
}
logo-carousel .logo-carousel__image img{
    display:block;
    pointer-events:none;
    transition:opacity .32s ease
}
logo-carousel .logo-carousel__image-column img.lazyloaded{
    opacity:1;
  height: 100%;
}
.logo-carousel__image-column:hover{
    opacity:0.8;

}

img[alt="GQ"]{
width: 290px;
    height: auto;
    opacity: .6;
}
img[alt="BuzFeed"],img[alt="Topanga"],img[alt="Esquire"],img[alt="Maxim"]{
width: 290px;
    height: auto;
    opacity: .6;
}
img[alt="Topanga"]{
width: 290px;
    height: auto;
    opacity: .6;
}
@-webkit-keyframes animate{
    to{
        -webkit-transform:translateX(-100%);
        transform:translate(-100%)
    }
}
@keyframes animate{
    to{
        -webkit-transform:translateX(-100%);
        transform:translate(-100%)
    }
}
</style>


<logo-carousel class="logo-carousel"><div class="logo-carousel__container">
 <div class="logo-carousel__images" style="--imgSpeed: 30s;">
 
 
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Topanga" class="logo-carousel__image-column Topanga"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div><div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Topanga" class="logo-carousel__image-column Topanga"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>

</div> 

 <div class="logo-carousel__images" style="--imgSpeed: 30s;">
 
 
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Topanga" class="logo-carousel__image-column Topanga"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div><div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Topanga" class="logo-carousel__image-column Topanga"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="Maxim" class="logo-carousel__image-column maxim"></div>
<div class="logo-carousel__image"><img src="https://cdn.shopify.com/s/files/1/0714/3106/1809/files/Topanga_logo-outline-PINK.png?v=1680362309" alt="BuzFeed" class="logo-carousel__image-column buzzfeed"></div>


</div> 

  </div>
</logo-carousel>

 

 

 

 

Replies 3 (3)

EcomGraduates
Shopify Partner
588 48 78

To make the logo scrolling text move from left to right, you can modify the existing CSS animation. Here's the updated CSS code:

 

logo-carousel .logo-carousel__images{
    -webkit-animation-name:animate;
    animation-name:animate;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-duration:var(--imgSpeed);
    animation-duration:var(--imgSpeed);
    display:flex;
    align-items: center;
    flex-direction: row-reverse; /* Added */
}

@-webkit-keyframes animate{
    from { /* Added */
        -webkit-transform:translateX(-100%);
        transform:translate(-100%);
    }
    to{
        -webkit-transform:translateX(100%); /* Modified */
        transform:translate(100%);
    }
}

@keyframes animate{
    from { /* Added */
        -webkit-transform:translateX(-100%);
        transform:translate(-100%);
    }
    to{
        -webkit-transform:translateX(100%); /* Modified */
        transform:translate(100%);
    }
}

 

This code adds flex-direction: row-reverse to the .logo-carousel__images container to flip the logo images horizontally, and modifies the translateX values in the animation keyframes to move the images from right to left.

Regarding the logo color, it's hard to tell without more information. It's possible that the dull color is due to the image file itself, or how it's being displayed on the webpage.

IMYOURGIRL
Shopify Partner
48 1 10

Thank you for explaining and your clarified code with /*added*/, very helpful. Unfortunately, nothing changes..

 

The dull color was because of the opacity, which I solved by setting it to 1 🙂 still I think this code is way too messy for what I used it for. It was a code for Marquee scrolling for multiple logo's, and I only use 1 logo.

MRamzan
Shopify Partner
165 1 21

You can these steps:

Create a new section marquee and paste below code.

You can add marquee section to any page.

 

 

<style>
  .section-{{ section.id }}.custom-marquee {
    display: flex;
    align-items: center;
    height: {{section.settings.marquee_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .section-{{ section.id }}.custom-marquee a {
    color:{{section.settings.colorText}}; 
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-marquee .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 12s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee .content {
    margin-left: 40px;
    font-size: {{section.settings.font_size}}px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112