Wow visitors to your site with 3D text that comes with a real sense of depth.
Love Lost by Canada's Jam3 is a beautifully dark, mobile-ready interactive poem with real heart about the enduring feelings around lost love. The website layout was built using HTML5 with the GSAP library powering its animation, one of its most visually striking features is its animated 3D text that really brings Love Lost's poetry to life.
It looks impressive as hell, and it's not hard to incorporate into your own work to create an engaging user experience; here's how it's done.
Want to make your own engaging site? Try a website builder tool, and keep things running smoothly by picking the right web hosting service.
Love Lost's 3D text comes right out of the screen at the viewer
01. Initiate the HTML document
The first step is to define the structure of the HTML document. This includes the HTML container that initiates the document, which contains the head and body sections. While the head section is primarily used to load the external CSS file, the body section will store the visible page content created in step 2.
<!DOCTYPE html>
<html>
<head>
<title>3D Text Movement</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
*** STEP 2 HERE
</body>
</html>
02. Visible HTML content
The visible HTML content consists of an article container that contains the visible text. The important part of the article container is the 'data-animate' attribute, which will be referenced by the CSS to apply the visual effects. The text inside the article is made from a h1 tag to indicate that the content is the page's main title.
Create a new file called 'styles.css'. The first set of instructions set the page's HTML container and body to have a black background, as well as no visible border spacing. White is also set as the default text colour for all child elements on the page to inherit; avoiding the default black colour of text making content appear to be invisible.
The content container referenced with the 'data-animate' attribute has specific styles applied. Its size is set to match the full size of the screen using vw and vh measurement units, as well as being slightly rotated. An animation called 'moveIn' is applied, which will last for a duration of 20 seconds and will repeat infinitely.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The 'moveIn' animation referenced in the previous step requires a definition using @keyframes. The first frame starting at 0% of the animation sets the default font size, text positioning and visible shadow. Additionally, the item is set with zero opacity so that it is initially invisible – ie. displayed out of view.
By using multiple shadows you can enhance the 3D effect
The next frame is placed at 10% through the animation. This frame sets the opacity to fully visible, resulting in the text gradually being animated into view. Additionally, multiple shadows are added with blue and decreasing colour values to give the illusions of 3D depth to the text.
The final frames occur at 80% and at the very end of the animation. These are responsible for increasing the font size and moving the element towards the left. New settings are also applied for the text shadow to animate towards, while also fading the text out of view from frames 80% to 100%.
Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.
