Looking to implement a CSS scroll for the text | XM Community
Skip to main content

Hello friends
Trying to run a vignette questionnaire replication study, the original authors had their text scroll across the screen. I'm seeing if I add CSS code like this (https://blog.hubspot.com/website/scrolling-text-css) to the custom CSS but no luck, any ideas or suggestions?
L

Hi there, cool post! I was able to get the right-to-left example in that post to work. First, in the survey builder create a Text/Graphic question. Then, using the Rich Content Editor's HTML/Source view "<>", paste the following HTML:


This is scrolling text.
 



Then over in the survey's Look & Feel, paste the below:
#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
ScrollingText.png


Oh interesting! Okay I gave it a go and crashed with this:

CleanShot 2022-11-30 at 15.06.11@2x.png


Hmm, I'm not sure what you are running into. Working for me in the attached QSF. Try importing it into a blank survey.
ScrollingText.qsf


Oh grief. Okay so one needs a professional account to run the custom css. I had been trying to run this through my free account rather than through my institutional plan.
Thank you Tom!


Leave a Reply