Parallax Discrete Page Scrolling

• US 20160231894A1
• Filed: 02/05/2016
• Published: 08/11/2016
• Est. Priority Date: 02/09/2015
• Status: Active Grant

• Current Assignee: Flipboard Incorporated
• Original Assignee: Flipboard Incorporated
• Inventors: Ying, Charles Hugo, Johnston, Michael
• Granted Patent: US 10,222,966 B2
• Time in Patent Office: Days
• US Class Current: 1/1
• CPC Class Codes: G06F 3/0485 Scrolling or panning

Abstract

An online content system, such as a digital magazine, provides scrollable content that can be advanced in discrete, full-page scrolling increments. Each page of the content may include text and one or more images. The online content system thus provides a page scrolling animation that minimizes the negative affect of fast-scrolling text on a user'"'"'s experience. In the animation of a single page scroll, the text moves less than a full height of the page and the image(s) move the full height of the page (i.e., the current image moves completely off the page and the new image moves into position from a location completely off the page). During this animation, the image may pass over the text, covering the old text and revealing the new text as it moves into its final position. The old text may also fade out while the new text fades in.

Claims

1. A method for displaying content to a user on a display screen of a device, the method comprising:

displaying a first page of content, the first page of content including text and at least one image;

receiving a user input to scroll from the first page of content to a second page of content, the second page of content including text and at least one image;

responsive to the received user input,

simultaneously moving the images of the first page of content off of the display screen while moving the text of the first page of content a portion of the display screen, wherein the images of the first page of content move faster than the text of the first page of content,

removing the text of the first page of content from the display screen,

adding the text of the second page of content on the display screen, and

simultaneously moving the images of the second page of content onto the display screen from off of the display screen while moving the text of the second page of content page of content a portion of the display screen, wherein the images of the second page of content move faster than the text of the second page of content.

2. The method of claim 1, further comprising:

responsive to the received user input, reducing the opacity of the text of the first page of content while moving the text of the first page of content.

3. The method of claim 1, further comprising:

responsive to the received user input, increasing the opacity of the text of the second page of content while moving the text of the first page of content.

4. The method of claim 1, wherein the images and the text of the first and second pages of content move along a vertical axis of the display screen.

5. The method of claim 1, wherein removing the text of the first page of content from the display screen comprises covering the text of the first page of content with the moving image of the second page of content.

6. The method of claim 1, wherein removing the text of the first page of content from the display screen comprises fading out the text of the first page of content.

7. The method of claim 1, wherein adding the text of the second page of content on the display screen comprises revealing the text of the second page of content with the moving image of the second page of content.

8. The method of claim 1, wherein adding the text of the second page of content on the display screen comprises fading in the text of the first page of content.

9. The method of claim 1, wherein the first and second pages of content are displayed on a web page.

10. The method of claim 1, wherein the first and second pages of content are obtained from a remote digital magazine service.

11. A non-transitory computer readable medium comprising instructions that when executed by a processor cause the processor to:

display a first page of content, the first page of content including text and at least one image;

receive a user input to scroll from the first page of content to a second page of content, the second page of content including text and at least one image;

responsive to the received user input,

simultaneously move the images of the first page of content off of the display screen while moving the text of the first page of content a portion of the display screen, wherein the images of the first page of content move faster than the text of the first page of content,

remove the text of the first page of content from the display screen,

add the text of the second page of content on the display screen, and

simultaneously move the images of the second page of content onto the display screen from off of the display screen while moving the text of the second page of content page of content a portion of the display screen, wherein the images of the second page of content move faster than the text of the second page of content.

12. The non-transitory computer readable medium of claim 11, further comprising instructions that cause the processor to:

responsive to the received user input, reduce the opacity of the text of the first page of content while moving the text of the first page of content.

13. The non-transitory computer readable medium of claim 11, further comprising instructions that cause the processor to:

responsive to the received user input, increase the opacity of the text of the second page of content while moving the text of the first page of content.

14. The non-transitory computer readable medium of claim 11, wherein the images and the text of the first and second pages of content move along a vertical axis of the display screen.

15. The non-transitory computer readable medium of claim 11, wherein instructions that cause the processor to remove the text of the first page of content from the display screen further comprise instructions that cause the processor to cover the text of the first page of content with the moving image of the second page of content.

16. The non-transitory computer readable medium of claim 11, wherein instructions that cause the processor to remove the text of the first page of content from the display screen further comprise instructions that cause the processor to fade out the text of the first page of content.

17. The non-transitory computer readable medium of claim 11, wherein instructions that cause the processor to add the text of the second page of content on the display screen further comprise instructions that cause the processor to reveal the text of the second page of content with the moving image of the second page of content.

18. The non-transitory computer readable medium of claim 11, wherein instructions that cause the processor to add the text of the second page of content on the display screen further comprise instructions that cause the processor to fade in the text of the first page of content.

19. The non-transitory computer readable medium of claim 11, wherein the first and second pages of content are displayed on a web page.

20. The non-transitory computer readable medium of claim 11, wherein the first and second pages of content are obtained from a remote digital magazine service