As the old cliché goes, “A picture is worth a thousand” words. That makes this week’s template worth at least 4,000 words. Well, I suppose they’re technically illustrations, but you get the idea. This week’s template shows how you can use Tumult Hype to arrange elements like photographs. But in particular, this template focuses on the “z-index”. This allows you to stack pictures three-dimensionally.
When a picture element is clicked, that element is brought to the top of the stack. Using JavaScript, the “z-index” value is increased. That changes the arrangements of the elements. The picture elements can be dragged around the scene. The uppermost image can cover the other pictures.
This template is a nice start in building a portfolio website for a photographer. Perhaps Photics.com would look way different if I had this technology two decades ago. Alas, JavaScript and HTML wasn’t as robust as it is today. And even way back then, I wasn’t making much use of my degree in photojournalism.
Programmatically, it’s a trivial effect to recreate. However, this is one of those situations where custom JavaScript can give Hype that extra boost it needs. See the “Picturing” chapter in A Book About Hype for more details.
You can also download the Picturing Template to see how it works.