Adding scrolling area of text (Marquee-like element)

Solved
JakobHL
Tourist
11 0 0

I would like to add a scrolling text area  to the Brooklyn theme, similar to the obsolete html marquee element. The text area would contain links. I suspect this needs to be done in css, but I'm not sure how to go about it with Shopify, since I'm new to the platform, and usually only work in backend. An example can be seen on https://hankjobenhavn.com/?v=dd65ef9a5579 under "New Arrivals".

Any help or tips would be greatly appreciated.

0 Likes
Tejas_Nadpara
Shopify Partner
1027 215 479

This is an accepted solution.

@JakobHL 

 

You can use following code for scrolling text:

<div class="example1">
    <span>
      <a href="#">Title 1</a>
      <a href="#">Title 2</a>
      <a href="#">Title 3</a>
      <a href="#">Title 4</a>
      <a href="#">Title 5</a>
    </span>
  </div>

  <style>
    .example1 {
      height: 50px;	
      overflow: hidden;
      position: relative;
    }
    .example1 span{
      font-size: 2em;
      color: limegreen;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 50px;
      text-align: center;
      /* Starting position */
      -moz-transform:translateX(100%);
      -webkit-transform:translateX(100%);	
      transform:translateX(100%);
      /* Apply animation to this element */	
      -moz-animation: example1 15s linear infinite;
      -webkit-animation: example1 15s linear infinite;
      animation: example1 15s linear infinite;
    }
    .example1 span a{
      margin-right:50px; 
    }
    /* Move it (define the animation) */
    @-moz-keyframes example1 {
      0%   { -moz-transform: translateX(100%); }
      100% { -moz-transform: translateX(-100%); }
    }
    @-webkit-keyframes example1 {
      0%   { -webkit-transform: translateX(100%); }
      100% { -webkit-transform: translateX(-100%); }
    }
    @keyframes example1 {
      0%   { 
        -moz-transform: translateX(100%); /* Firefox bug fix */
        -webkit-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%); 		
      }
      100% { 
        -moz-transform: translateX(-100%); /* Firefox bug fix */
        -webkit-transform: translateX(-100%); /* Firefox bug fix */
        transform: translateX(-100%); 
      }
    }
  </style>

Let me know if you need more help!

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
JakobHL
Tourist
11 0 0

@Tejas_Nadpara  Thanks a lot, it works like a charm! If I want the scrolling text to be in front of the slideshow, below the the navbar, how would I go about this?

0 Likes
Tejas_Nadpara
Shopify Partner
1027 215 479

@JakobHL 

 

Which theme you are using?

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
JakobHL
Tourist
11 0 0

@Tejas_Nadpara I'm using the Brooklyn theme.

0 Likes
Talon
New Member
3 0 0

Hi, where would you plug this in?

0 Likes
Angela_Loi1
New Member
2 0 0

Hi @Tejas_Nadpara, I wonder if you can help me with a similar query. What would I need to code in order to make it this way of scrolling text? https://thecopycure.com/thanks/?firstname=Angela

I would like to have it on the first section of the home page. I'm not sure though which theme I'm going to go for, thus far I favour Narrative, but would consider using the purchased Show Time one. Thanks!

0 Likes

Hi, You can use above code. It should work. The code may be required to modify according to theme. 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: einsteinnephew@gmail.com
Skype: einsteinnephew.ens1
0 Likes
Angela_Loi1
New Member
2 0 0
Thanks a mil for your quick answer. I tried already, but it didn’t work :(
0 Likes
ashtyn
Tourist
7 0 1

Hi! Sorry I'm jumping in on an old thread, hoping someone might see this and could offer some help.

I want to include the marquee text like in the code above, which works well on desktop but cuts the message in half on mobile. Is there any way I can fix this?

I'm using the Impulse theme on my store. 

TIA!

0 Likes