Skip navigation
mansoorian
mansoorian Calculating status...
Currently Being Moderated

Popular Science Scrolling Technique

Jul 2, 2012 9:23 AM

hello everyone.

I noticed a scrolling technique used by Popular Science Magazine.

 

They use it in almost all of their stories, where a text box simply scrolls in front of all of 1 or

2 main photos. Photos fade according to text and text almost appears to be seperated

from the rest of the layout as if it's a PNG overlay.

 

I don't see any tutuorial that describes how to isolate scrolling element on a page.

I see scrolling text boxes but this is different. This isolates page scrolling to certain elements.

 

Can someone take a quick look at Popular Science and offer an suggestions as to how

they did this.

 

Super curious.

366 Views   3 Replies   Latest reply: AlexAckerman, Jul 2, 2012 3:38 PM
 
Replies
  • tim.hughes
    Currently Being Moderated
    1. tim.hughes,
    Jul 2, 2012 9:27 AM   in reply to mansoorian
    Report

    maybe HTML5?

     
    |
    Mark as:
  • IndoorsDave
    Currently Being Moderated
    2. IndoorsDave,
    Jul 2, 2012 9:37 AM   in reply to mansoorian
    Report

    The use the Mag+ platform to publish their content, not DPS.

     
    |
    Mark as:
  • AlexAckerman
    Currently Being Moderated
    3. AlexAckerman,
    Jul 2, 2012 3:38 PM   in reply to mansoorian
    Report

    Hello there,

     

    Yes, Pop Sci uses Mag+. I was able to somewhat duplicate this functionality by placing both the text and the desired scrolling background in a container frame. Then, I set the container frame Folio Overlay to "Scrollable Frame" with the "Use Document Position" option. This way the image behind the text scrolls with the text. The container object was set to be the full size of the document which allowed the background image to appear to replace the original background image. Finally, I added a second page to the layout; when the user scrolls all of the way through the content on the first page, they'll flip to the second page. Not sure if this is a perfect solution for you but it worked well enough for our use case.

     

    Thanks,

     

    Alex

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points