Text Scrolling with perspective effect - Graphic effect (Typescript)

Download Typescript (Visual Studio 2015 project) source code (228kb)

This page shows the graphic effect of a scrolling text from bottom to top which has a perspective effect to create the illusion that the text also moves 'into" the screen.


Implementation variant



Above the implementation of a text-scrolling effect is shown. It is implemented in Typescript using HTML5 canvas.
Feel free to download the source code at the top of the page to check out how it works.

Implementation notes:

Scrolling text lines is easy. However to create the effect that the text also moves "into the screen" turned out to be more difficult when just using plain HTML5 canvas element without any library like WebGL.
In the end, I had two ideas, both of which I implemented. While the final result is not as good as expected, still the implementation might be interesting.

Variant 1: "Line squeezing"

The idea for this implementation variant is to gradually draw the lines of text narrower from bottom to top and slowly fade out the text.
The main sequence is denoted in below figure:

Variant 1 sequence

Variant 2: "Pixel rotation"

The idea for this implementation variant is to use a simple 3D engine where the image plane is rotated around the x-axis and all pixels go through a "rendering pipeline" with perspective and screen coordinate transformation.

Variant 2 sequence

Variant 3: "Plane rotation and texture mapping"

The idea for this implementation variant is based on variant 2 and also uses a simple 3D engine where the image plane is rotated around the x-axis. However, not all pixels of the canvas are rotated, but only the corner (or "vertices") of the canvas plane. Afterwards the canvas containing the text is "texture-mapped" onto the rotated plane.

History

2021/05/25: Version 2 - added variant 3 using a texture on a rotated quadrilateral.
2021/05/18: Initial release.