Tips and Tricks: Scrolling text inside a box

Here’s a slick little use of HTML we just started playing with: making text scroll inside of a box. Default Mag+ behavior is of course that the A layer (top layer) scrolls freely over the B layer, but what if you want a B-layer-only design but still have scrolling text; or even have horizontally scrolling text without switching to a new vertical?

The trick is to simply turn your text box into an image and build a super-basic HTML page that’s just a viewport for that image. Then in InDesign, make your HTML Object Box (the box you’re going to put the HTML in) smaller than the actual image. Confused?

When you draw a box in InDesign and set its Object Type to HTML in the plug-in, you’re basically making a web browser window the size of that box, then you’re telling it what page to load—typically a .html file you’ve built. Well, what happens when you go to load a Web page and it’s longer than what you can see on screen? You scroll down (or right if it’s wider). Same principle here.

Simple trick and easy to do, but very powerful way to add a new dimension to your designs. Just remember: new dimensions can be damn confusing to users. Mag+ maintains a simple default navigation on purpose: so users always know what to do. If you start to break that default, just be sure you tell your users what to do with clear directionals or instructions.

If you want to give this a shot but the coding is beyond you, take a look at this post in our forum.

  • http://www.yahoo.com/ Mattie

    This website makes tnihgs hella easy.

  • http://desiboost.com Desiboost

    This is the best post I have ever seen, thanks for posting

  • Sara / Mag+ Support Team

    You can find an example for this in our forum http://gsfn.us/t/2koj7 /