How to Make an "Opening Crawl" Panel for Scrolling Text

  • 2
  • Idea
  • Updated 3 years ago
  • Not Planned
Here is a fun way to dress up some lengthy scrolling text in a Rise Vision presentation:  Make a 3D "opening crawl" panel that enables the scrolling text to recede into the distance just like in the science fiction movies.  This works great with the Text widget, and for RSS feeds with the (classic) RSS gadget. I think it will also work with the Spreadsheet widget.  It just takes a few lines of CSS, added to the HTML view of your presentation.

First, make a placeholder in your presentation to contain scrolling text - you could use the Text widget or the RSS gadget.  It can be any size, but I made mine about 90% of full-screen size.  Depending on your application, you might want to attach a background image to the placeholder, or make a separate placeholder for a background image, as in the "hamburger" illustration, or use no background, as in the "space" illustration.

If using the Text widget, paste your text into the editor window and choose an appropriate text color.  Text should have a transparent background.  Set the scroll speed to slow or medium.  Save the Text widget settings and return to the Presentation view.



Now click the "HTML" tab near the top.  (This works in both the new and classic editors.)  We just need to paste a little CSS in near the top of the file.  After the <title></title> line, paste this style tag:

<style>
body { perspective: 500px; }

      .persp {
           overflow:hidden;
          transform: rotateX(30deg);
          transform-style: preserve-3d;
        }
    </style>

...Now find the <div> element representing the placeholder with the scrolling text and add class="persp":
       
<div  id="TextScrolling" class="persp" placeholder="true" style="width:1001px;height:980px;left:459px;top:100px;z-index:3;position:absolute;background:rgba(0,0,0,0);"></div>

If you used a separate placeholder to make a background panel for the scrolling text, add class="persp" to its <div> element too.



Here the panel is leaning back at a 30 degree angle, but you can select a different angle with the "transform" element in the CSS, or change the vanishing point by inserting a "perspective-origin" property.  This article on CSS 3d Transforms was very helpful:
  http://www.w3schools.com/css/css3_3dtransforms.asp
  

This is some scrolling text displayed using the Text Widget.



This is a scrolling RSS feed displayed by the RSS Gadget, with a separate placeholder for the "red panel" background.
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb

Posted 3 years ago

  • 2
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Great post! We have something similar in mind for creating this to the community also. I even created something very similar to the space crawl text you have there although I used an MP4 to create a moving 'movie' based background - see http://preview.risevision.com/?type=p...
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Hey - you used David Bowie!  I like it.  With the CSS method, I think it would also be possible to use a CSS animation to make the "stars" background move slowly downward like in your movie.  
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
This reminds me of the opening of a movie...I can't quite put my finger on it.