Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #1343308

    Hi,

    i would like to add a scrolling text (“scrolltext scrolltext” yello). Please see screenshot.

    How can i do that?

    kind regards Jak

    #1343320

    Hey Jak73,
    Try this in a code block element
    <marquee>This text will scroll from right to left</marquee>
    you will want to add some style for the font size and color, etc

    Best regards,
    Mike

    #1343328
    This reply has been marked as private.
    #1343340

    Hi,
    Please see this Marquee Generator as it will help you choose all of these settings including the speed of the scroll, then just place the code it gives you in a code block element.

    Best regards,
    Mike

    #1343395

    Hi Mike,
    thanks a lot this is really cool!
    How can I make it so that there is an infinite loop without the text first disappearing completely from the image before it runs through again?
    I would like it so that there is always text in the image, without a break.

    How can i do that?

    BTW i changed from my test server to my main page (please see private content).

    kind regards Jak

    #1343396

    Hi,
    Try this example: Infinite Marquee in it’s css change the “body” class to .marquee > .track > .content and add your font and color there.
    If you need a hand just include admin login in the Private Content area.

    Best regards,
    Mike

    #1343397

    Hi Mike,
    seems i’m doing something wrong…
    I added the code, but does not work…

    Could you please have a look?

    kind regards Jak

    #1343401

    Hi,
    The code you are seeing needs to be inside a style tag, so try this in your code block element

    <style>
    .marquee > .track > .content {
      margin: 0;
      padding: 0;
      color: #fff;
      font-size: 25px; 
      font-family: 'press-start-2p';
    }
    
    .marquee {
      position: relative;
      width: 100vw;
      max-width: 100%;
      height: 200px;
      overflow-x: hidden;
    }
    
    .track {
      position: absolute;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 32s linear infinite;
    }
    
    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    </style>
    <div class="marquee">
      <div class="track">
        <div class="content"> All of Joakims NFTs are one of a kind (1/1) artworks. Each artwork will be available either on Opensea or Rarible only!</div>
      </div>
    </div>

    Best regards,
    Mike

    #1343403

    Hi Mike,

    this is really cool! Thank you so much!

    How can i set the width of it?

    How can i add the same, but with the text running from right to left too?

    Kind regards jak

    • This reply was modified 2 years, 7 months ago by Jak73.
    #1343405

    Hi,
    To make it full width try this in your Quick CSS:

    #top.page-id-600 .avia_codeblock_section.avia_code_block_0 {
      width: 100vw !important; 
      position: relative !important; 
      left: calc(-50vw + 50%) !important; 
    }
    

    to add another going the other direction add this to a new code block element

    <style>
    .marquee-two > .track-two > .content-two {
      margin: 0;
      padding: 0;
      color: #fff;
      font-size: 25px; 
      font-family: 'press-start-2p';
    }
    
    .marquee-two {
      position: relative;
      width: 100vw;
      max-width: 100%;
      height: 200px;
      overflow-x: hidden;
    }
    
    .track-two {
      position: absolute;
      white-space: nowrap;
      will-change: transform;
      animation: marquee-two 32s linear infinite;
    }
    
    @keyframes marquee-two {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }
    </style>
    <div class="marquee-two">
      <div class="track-two">
        <div class="content-two"> All of Joakims NFTs are one of a kind (1/1) artworks. Each artwork will be available either on Opensea or Rarible only!</div>
      </div>
    </div>

    and if you want the second code block full width add this Quick CSS for it

    #top.page-id-600 .avia_codeblock_section.avia_code_block_1 {
      width: 100vw !important; 
      position: relative !important; 
      left: calc(-50vw + 50%) !important; 
    }
    

    Best regards,
    Mike

    #1343406

    Hi Mike,
    thanks a lot!!!
    sorry, i did not ment full width, just to know, how i can reduce the width. and center the text?

    kind regards

    Jak

    • This reply was modified 2 years, 7 months ago by Jak73.
    #1343407

    Hi Mike,

    i’m facing a strange issue here:

    When i change something in the code (font-size for example) and i save the page and click on preview. i find some messed upo code like this
    .marquee > .track > .content { margin: 0; padding: 0; color: #fff; font-size: 25px; font-family: ‘press-start-2p’; } .marquee { position: relative; width: 100vw; max-width: 100%; height: 200px; overflow-x: hidden; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    Then i need to close the browser chrome and start new. Then it seems to be working. Is this normal?

    kind regards Jak

    • This reply was modified 2 years, 7 months ago by Jak73.
    #1343411

    Hi,
    Please ensure that you are copying the code from the forum and not an email, it will mess up the < & > which will make the <style> tags not work.
    If this is correct then try saving the page and view the real page not the preview.

    Best regards,
    Mike

    #1343412

    Hi Mike,
    thanks a lot for your kind help!

    I did copy the real code. Seems only the preview is making issues. Tried it in Safari. Seems to be a preview issue…

    How can i center the text and reduce the width please?

    kind regards Jak

    #1343418

    Hi,
    Sorry I’m not sure what you mean by center the text and reduce the width?
    above you asked to make it full width and it is a scrolling marquee so it’s not going to center it’s moving?
    perhaps a screenshot would help.

    Best regards,
    Mike

    #1343420

    Hi Mike,
    sorry for the misunderstanding. I positioned the text below me Big intro image. There the text seems to be perfect in desktop view. Also the width is very nice in this position. Really cool, thank you!!!

    But I have a new still an issue in mobile view (for horizontal and vertical view):
    1.) in vertical mobile view, the scrolling text is hidden and needs to be scrolled downto be seen(screenshot 1).
    2.) how the position the scrolling text like the position in desctop view (screenshot 2: mobile view, when text is scrolled up to be seen)
    3.) same issue in horizontal mobile view.

    Is it possible to fix it?

    kind regards Jak

    #1343481

    Hi,
    Thanks for the feedback, please try this css in your Quick CSS

    @media only screen and (max-width: 767px) {
    #top.page-id-600 #main > .avia-section .marquee > .track > .content {
        padding-top: 0px;
    }
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1343485

    Works really great, thank you very much Mike!!!

    kind regards Jak

    #1343487

    Hi,
    Glad to hear, shall we close this then?

    Best regards,
    Mike

    #1343489

    Please don’t close it now. Please give me some2 more days. Just for the case, if i have a question…

    #1343496

    Hi,
    Ok 🙂

    Best regards,
    Mike

    #1343497

    Hi Mike,

    this looks really great now in Desktop mode and also responsive mode is getting perfect too. That’s sooo cool!
    How can i adjust the space between the scrolling text and the image below in responsive mode (and also the space below from both)?

    Please see screenshot.

    Kind regards Jak

    #1343551

    Hi,
    Thanks for the screenshot, try this css

    @media only screen and (max-width: 767px) {
    #top.page-id-600 #main .marquee {
        height: 30px;
    }
    #top.page-id-600 .hr.hr-invisible.avia-builder-el-7 {
        height: 20px;
    }
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1343592

    Just perfect!!!
    Thank you very much Mike for helping me so much!!!

    kind regards Jak

    #1343608

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘How to add a scrolling text’ is closed to new replies.