Solved

Adding scrolling area of text (Marquee-like element)

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.

Accepted Solution (1)

Tejas_Nadpara
Shopify Partner
1118 222 552

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 tejas.nadpara@gmail.com regarding any help

View solution in original post

Replies 24 (24)

Tejas_Nadpara
Shopify Partner
1118 222 552

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 tejas.nadpara@gmail.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?

Tejas_Nadpara
Shopify Partner
1118 222 552

@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 tejas.nadpara@gmail.com regarding any help
JakobHL
Tourist
11 0 0

@Tejas_Nadpara I'm using the Brooklyn theme.

Talon
Visitor
3 0 0

Hi, where would you plug this in?

Angela_Loi1
Visitor
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!

ensenterprises
Shopify Expert
84 5 6

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

banned
Angela_Loi1
Visitor
2 0 0
Thanks a mil for your quick answer. I tried already, but it didn’t work 😞
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!

JakobHL
Tourist
11 0 0

Hi @ashtyn ,

It's hard to say without viewing the page in question, but you likely have to add some mobile-specific CSS. Would it be possible to have a look at your site?

ashtyn
Tourist
7 0 1

Hi @JakobHL

Sure if you don't mind taking a look, that would be amazing!

Let me send you a pm for access. 

Thanks!

JakobHL
Tourist
11 0 0

Hi @ashtyn ,

I've had a look at your site, and I don't know how comfortable you are with CSS/HTML, but I think you just need to do the following:

Add the css:

 

@media screen and (max-width: 640px) {
	.example1 {
    	span {
       		width: auto;
       		white-space: nowrap;
      	}
  	}
}

 

Alternatively set the width to some percentage larger than 100%, such as 140%. You can play around with that and see what works best.

ashtyn
Tourist
7 0 1

Hi @JakobHL , 

Thank you for the codes! 

I'm using a custom content html block for this marquee text though, is there an alternate code in HTML that i could use instead?

JakobHL
Tourist
11 0 0

It's not a problem. The CSS I posted styles the HTML you have, so it displays correctly on mobile.

ashtyn
Tourist
7 0 1

It doesn't seem to be working for me.. I've already insert the code but there are no changes unfortunately. I used the code mentioned awhile back in this thread, and inserted the code you gave me above at the bottom, should that be correct?

I actually found a code that seems to display the full text on mobile, but the problem I have with this is that the animation is extremely choppy on mobile. 

<p style="font-size:30px"><marquee behavior="scroll" direction="left" scrollamount="5">TEXT GOES HERE</marquee></p>

 

ashtyn
Tourist
7 0 1

I've tried again and simply inserted the white-space code and it worked! This fixed the issue where the sentence spilled into the next line. However, the marquee doesn't flow naturally from right to left of the screen. Is there a code I can add in to make the scrolling infinite?

JakobHL
Tourist
11 0 0
  1. You'll need to change the width too, however beware that if you don't include the code the way I wrote it, then you're probably also affecting how it looks on desktop, not just mobile. Can you post the section of code where you added the line-wrap part? The I can probably see what you need to write.
ashtyn
Tourist
7 0 1

I have the entire code here!

<div class="example1">
    <span>
      ✧ Text here. ✧
      
    </span>
  </div>

  <style>
    .example1 {
      height: 50px;	
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      width: auto;

    }
    .example1 span{
      font-size: 1.5em;
      color: black;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 60px;
      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>
JakobHL
Tourist
11 0 0

Try replacing the style-section with this:

  <style>
    .example1 {
      height: 50px;	
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      width: auto;

    }
    .example1 span{
      font-size: 1.5em;
      color: black;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 60px;
      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;
    }

@media screen and (max-width: 840px) {
	.example1 span {
       		width: auto;
       		white-space: nowrap;
  	}
    }

    .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>

 

ashtyn
Tourist
7 0 1

Hi @JakobHL,

This worked perfectly!

Thank you so much for your help! 

KMArm
Tourist
6 0 1

Hi!

I know I'm hopping on a super old thread.

 

I'm looking to have a continuous marquee with no white space, but cannot seem to figure it out! I'm using the Brooklyn Theme. Would it just be removing the "nowrap" piece?

AntonioBorto
Visitor
1 0 0

Hi i was wondering how do you repeat the text like in a infinite loop one behind another. can you help me?

jparsia
Visitor
3 0 0

Hi @Tejas_Nadpara where would I put this code?

utent
Visitor
1 0 0

How do I change the text colour?