EPISODE HTML IN-APP MESSAGES
A NEW TOOL FOR APPBOY
It is a period of engagement war.
This is a demonstration of Star Wars-style scrolling 3D titles in CSS3 and HTML using Braze In-App Messages
You can do virtually anything with HTML IN-APP Messages. Multi-Screen messages, logging custom events from messages. Anything you want.
Also, "Star wars" is amazing, and so is the flexibility of HTML!
So how does it work? Well, it's fairly simple. We have an outer absolute DIV (#titles) which is rotated along the X-axis using perspective to give the impression of depth. The same DIV also has an :after psuedo-element which applies a linear gradient so the text appears to fade out.
Inside, we have another absolutely-positioned DIV which contains the text (#titlecontent). The top is set to 100% to ensure it starts off-screen then uses CSS3 animation to move it upward over time. No JavaScript is required.
You will probably need to adjust the movement amount and timing depending on the quantity of text you want to show. The 3D depth can also be tweaked in the #titles declaration.
All the code is contained in this single HTML file…
View the source, Luke!
Sorry. Couldn't resist it.
You're welcome to use this demonstration code in your own sites. Source code modified from:
sitepoint.com/
css3-starwars-scrolling-text/
Finally, Han shot first and the original, unadulterated movies remain the best. Stop fiddling with them, George!
Close