Mike Essex

Content Marketing: Now Powered By Technology

26th Jul 2013 Content Marketing Blog 8 minutes to read

Yay lovely codeIt’s been a long time since Content Marketing was just about the words. Images, audio and video have been transforming static content into beautiful works for years, but over the last 12 months that has been taken to another level with interactive content pieces that could change how we use the web forever. But, just how are these works made?

Content pieces like Snowfall beautifully combine video, imagery and a strong narrative to bring together the best web technologies and deliver a strong story. It also took months to create with a team of people, which presents a problem.


If Snowfall is the new defacto standard for content marketing that we are all striving towards, how on earth can the same results be achieved without a massive budget?

Well thankfully the technology behind Snowfall isn’t some big secret, you can view all of the source code by going to the page and clicking around (In Chrome, right clicking and choosing inspect element on the bit you want to check, is your friend for this). Through a combination of text, images, MP4 videos, CSS styling and some clever code they achieved amazing results.

It’s no magic trick how it was made. Usvsth3m were able to quickly create a great parody and ScrollKit created a complete replica in an hour. The fantastic thing is that the technology to do this exists now and is readily available.

Whilst I’m no expert coder, I think it’s important that anyone working in Content Marketing at the very least understand the technology behind these projects so they can manage the creation of similar things for their own clients. So let’s take a look at some recent clever examples of Content Marketing and the technology behind them, in a way that anyone can understand.

Scrolling Images

Let’s look at a simple example. Concert Hotels created a piece to visualise the iPod capacity in vinyl. You click a downward arrow and it loads a stack of records that imitates the capacity. It’s pretty cool and gets the point across well, plus with over 26,000 social shares it hasn’t done too badly.

Concert Hotels

From a tech point of view it actually couldn’t be simpler. Hannah Smith, one of the creators has even noted that she agonised over whether it was too simple. Essentially the stack of records is comprised of a single image that repeats itself over and over until the capacity is reached.

In essence, the value is set for the number of images that should be shown (the number of vinyl records an iPod classic could store) and then a loop is triggered that keeps repeating the image until that value is reached.

The script can be found in the source code and it’s simple enough that it makes a great lesson if you want to dissect the code and see how it works.

Want to Build Your Own? You’ll need to learn JavaScript and jQuery specifically.


A recent trend in Content Marketing is to make a piece that is unique to every visitor. This can be done with mathematical calculations happening behind the scenes, and with a bit of coding wizardry you can do the same.

Let’s take a look at See Your Folks.

See your folks

The creators made it in 24 hours and it’s a really effective reminder of the importance of family. It’s also a fairly clever use of maths to create content. You enter where you live, how old your parents are and how many times you see them in a year. The site then figures out how many more times you’ll see them.

It does this by:

  • When you enter your country they have allocated a value to each one that is based on the average life expectancy
  • Taking the age of your Mum and Dad and dividing it by 2 to find an average
  • Taking that average away from the average life expectancy
  • Multiplying that number by the number of times you see them a year
  • Rounding up the number

There’s also some other code to run if you only enter one parent’s age, as well as a trigger that fires if their age is above the national expected age. You can view the entire code here and it’s really nicely marked up so you can learn what it all means.

Want to Build Your Own? Read up on how to do calculations with JavaScript.

Interactive Infographics

If ‘Infographics are dead’ then no one told some of the great interactive infographics that are now being produced. This site rounds up some of the best and for this example we will look at this one. What’s different about this, compared to our earlier examples, is that the JavaScript queries the page on the website itself to generate the results and then dynamically changes the page content.

Car parks

So depending on the options you select, the content of the page changes reflecting your choice. Give it a go, change the drink type and then watch the results change. Then check out the source code and you’ll see that has changed as well. The important lesson here is that your content doesn’t have to be static and can vary to reflect the choices your audience make. Why write a 2,000 page article covering all the different outcomes, when you could make something like this which only displays the bit that is relevant to the reader?

Want to Build Your Own? Look at using JavaScript to query the page (or DOM as it’s commonly referred to in this context).

Scrolling Pages

Now we’re starting to get into Snowfall territory, where events on the page are triggered by the position you have reached. The best way to explore how this works is by breaking apart the elements used in The Future of Car Sharing.

Although there is JavaScript on play here, a lot of the clever elements of design are actually just CSS. For example, look at this image below:

Loads of hills

Would you believe that all of those hills are just CSS elements positioned on top of each other? Yep, you can see them all in the main CSS file. It’s also worth reading the file to appreciate how everything on the page is actually fixed in place. Whilst it may seem like everything is moving. In actual fact most of the background is fixed in place and it is only the car and a few interactive bits that move.

So how do they move the plane at the start? Open the infographic in Chrome and right click on the plane, choosing inspect element, and you’ll see that the position on the plane changes like crazy. That’s JavaScript again, check out the code and search for the word ‘plane’. You’ll see that code exists that changes the bottom location of the plane which creates the illusion it is moving.

To see an even more impressive example check this out. Thanks to Kieran Flanagan for the tip.

So whilst there’s no denying these are complex content pieces they are not beyond the realms of being something that you could draw inspiration from by using a coder.

Want to Build Your Own? Learn CSS and JavaScript animation. Also check out HTML 5 to ensure your code is nicely formatted.

Snowfall Content

The industry has yet to come up with a term to describe pieces like Snowfall, although there are no shortage of examples starting to appear, so I’ll just call it ‘Snowfall content’ for now until we get a nice buzzword. When I first saw Snowfall I looked at it gobsmacked, knowing that I wanted us to create something of the same quality but not knowing how. Thankfully the more time I spent with the code the happier I felt that is was something that could be replicated without breaking the budget. At its heart Snowfall is just:

  • Well written content (hey you have that already)
  • MP4 videos – all of the moving images? They’re just videos really.
  • Great imagery
  • A great layout

So here’s the thing, Snowfall was a breath of fresh air because it combined those elements together in a way that really resonated with people but from a technical point of view it’s easy to break up the elements and see how they work. The imagery for example is triggered when you get to a certain point on the page which in this case was done using inview.

Another way of doing this is to use JavaScript to trigger images when you reach a certain point. For example in this article the images change as you scroll down.

Glitter in the dark

A look in the code reveals this is done by having a collection of images named (XXXX-1.jpg) and a script which tells the page to display XXXX-1( + 1).jpg every time you scroll down until they run out. So the script shows images XXXX-1.jpg then XXXX-2.jpg and so on until it runs out. Simple.

Going back to Snowfall the last piece of the puzzle is the layout, which is a another clever use of CSS to position the elements in a visual way. What’s nice is that they haven’t overdone it, you can still easily read the article and the extra bits add to the story. Although if you do want to see a more visual example check out Jess and Russ.

Want to Build Your Own? The New York Times even break down how it was made here.


The future of Content Marketing is going to be driven by technology, both old and new, being used in clever ways that complement the core story. Until a week ago I didn’t even know what jQuery was and had never written JavaScript but the more I read and the more I see the easier it is for me to grasp the tech behind these content pieces. Most important of all, it lets me understand how we can use the technology in what we do.

So whilst you don’t have to be a coder to understand what is happening, the important thing is that everyone in Content Marketing appreciates that this tech isn’t scary. It requires great developers and designers, that is certainly true, but anyone in a CM role should be able to grasp why these pages work the way they do, so it can inspire them in the future.  If I can do it, you can too.

So I hope the above has helped introduce you to some of these technologies, and if you can shed more light on how these projects work, or have other cool ones you have seen please leave them below.

Share this post


What do you think?

Gary Hainsworth

SEO and AI Generated Content

Gary Hainsworth
2nd Feb 2023
SEO Blog
Kelly-Anne Crean

Ecommerce SEO and Beyond – The Complete Guide

Kelly-Anne Crean

SEO Blog

Digital Ideas Monthly

Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?

Download Your Free Whitepaper

The Complete Guide To Content Marketing


Call us on 0330 353 0300, email info@koozai.com or fill out our Contact Form.

Map of Hampshire Digital Marketing Agency
Hampshire Digital Marketing Agency
Merlin House 4 Meteor Way Lee-on-the-Solent, PO13 9FU, UK
Map of Lancashire Digital Marketing Agency
Lancashire Digital Marketing Agency
Cotton Court Business Centre Church Street, Preston Lancashire, PR1 3BY, UK
Map of London Digital Marketing Agency
London Digital Marketing Agency
Albert House 256 - 260 Old Street London, EC1V 9DD, UK

Unlike 08 numbers, 03 numbers cost the same to call as geographic landline numbers (starting 01 and 02), even from a mobile phone. They are also normally included in your inclusive call minutes. Please note we may record some calls.

Circle Cross