The new Apple Pencil site has an above the fold introductory element where it says "Its only a ... pencil/scalpel/note-taker..." and this scrolls like a slot machine. What is this effect called? I've seen different implementations of this on different websites but could never really figure out what its called.

  • Software/plugin/etc recommendations are off-topic on this site. Element identifications are more suited here, so you should edit your question. – locationunknown Apr 10 '18 at 5:22
  • Edited my question to remove the ask for a plugin. – electrophile Apr 10 '18 at 5:50

By going to your browsers "Developer Tools" you are able to view the HTML/CSS for elements on the page.

After inspecting this element on their site suggests that they call it Word Reel.

enter image description here

| improve this answer | |
  • 1
    Edited because although you provided the correct answer, it's good form to give a little extra explanation. – RobbyReindeer Apr 10 '18 at 8:27
  • @julian Oh, no, this is definitively wrong! "Word Real" it is just the name of the class. There is just an animation, using a translate3d() CSS function... – Madalina Taina May 5 '18 at 11:59
  • I disagree with this answer. The question is, "What is the effect called?" but the answer is what the developer named it, not what every UX developer would necessarily know it as, though I think "word reel" is a good one. – Rob May 5 '18 at 12:58

Like I said in a comment to the answer that was chosen as the right one, I think it is a confusion. "Word real" it is just a random name for the class. It is just an animation there, using a translate3d() CSS function.

I think a suggestive name could be "3D Scrolling Text in CSS3". A similar effect is used in this example that simulates the Star Wars opening crawl.


| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.