Oooooooo Pretty Scrolls.

Ben-pretty-client-side-scrolls

Today I’m going to share my technique in having a smooth effect which triggers when scrolling through a webpage using SCSS, you will need to following plugin...

jQuery Waypoints (see: http://imakewebthings.com/waypoints/)

That’s about it… OH! And some creatigation (Creative and imagination mashed together). I demonstrate both of these here with me making a new word. Can you make a new word? If not then this isn’t for you…

If so congratulations!

Let’s make a start…

ben-pretty-cs-dev-scrolls

If you place the above code snippet into your document ready function this is a good starting point, basically what this will do, will give every class off scroll-effect an additional in-view when the class is at the halfway point on screen, it’s good to have a fairly low offset to being with so you can see animation clearly, Ideally the finished product should have an offset of somewhere between 75% - 85%. So the effect is very subtle.

The HTML.

ben-pretty-cs-dev-scrolls2

I’ve highlighted in a very clear black square as what we we’ll be looking at specifically, You can see the scroll effect class, this is given to all the elements you would like to have the scrolling animation, the additional ‘UI001’ class is the identifier which will become clear in the SCSS as to what this does.

So the SCSS.

Firstly, I like to make my own scss file so there is more structure and the scroll effect styling

ben-pretty-cs-dev-scrolls3

doesn’t bloat out other scss files you will have.. So let’s have a look at the SCSS.

You can see that the purpose of the UI00X class is to give each component specificity.

Especially if you have more elements to animate, like so….

ben-pretty-cs-dev-scrolls4

The div when not scrolled past 50% of the screen

ben-pretty-cs-dev-scrolls6

And then when scrolled..

ben-pretty-cs-dev-scrolls8

So to go over once more…

Using the jQuery waypoints plugin we can pick up any class and toggle a class, which will animate the entrance of any element on the page.

And remember…..

creatigation

Whatever your business, be it a regional or global brand, the content you produce plays a vital role in your success. You know that… hence you’re reading this.

A well formulated and executed content strategy not only drives more traffic, at the core, it defines what your business is and helps build a strong connection between you and your audiences.

So let's quickly look at why developing a coherent content strategy is important and how setting clear goals and understanding your audience will elevate your online performance. 

What is a Content Strategy?

It's basic right? Content is at the core of how you define the way your business presents itself and an effective strategy should look to ensure that tone of voice, messaging and the core values are surfaced across all channels, from service or product pages on your website, to blog posts, through social media updates blah blah blah.

But let's keep it simple - your content strategy should be a clear roadmap that connects your marketing activities to your business goals. Align to your customer’s wants and needs and engage them at every interaction point and boom, you're in business. 

Who are my Audience?

You likely start all your projects with this chalked on the wall because your business knows “exactly” who its customers are right? Sounds obvious but we often find its not been done forensically enough (not based on data), is too old (more than 12 months ago - forget it) or its a spin off from some brand work that was legitimately aspirational but doesn’t face the reality of who you your business is actually engaging today.

So start (or circle back) with audience research, building out those personas to understand their ambitions, their lifestyle, their pain points or concerns, and crucially their wants and needs - in your context. 

Do I need to tailor content?

As part of your research find out where your audiences spend their time online and how they interact with content: Some may spend time thoroughly researching a product or service, whereas other audiences may want their content to be quick, snappy or easily digestible in the form of a video, infographic or short blog posts.

 

Ultimately, the key is to produce a strategy that creates the type of content your customers want to see:

  • What are the problems that your product or service will help them solve?

  • Who are they most influenced by?

  • What voices influence their behaviour?

  • What type of content do they consume?

  • Where do they consume content and engage with brands?

Different Content, Different Objectives

 All content is not born equal: When producing your strategy, it is important that the objectives for each individual piece are defined, that these fulfil your marketing objectives and tie to the overarching goals for your business.

There are various content frameworks that exist to aid content development in this way, but one that is popular and effective is Google’s hero, hub and hygiene method: It provides a framework on developing content to achieve different goals and gives guidance on the effort needed to create each type of content.

Hero Content

Hero content is essentially campaign content, it is big splash ideas designed to appeal to a large audience with the aim of telling your brand’s story at scale. 

Ways of measuring hero include the amount of PR mentions or links from authoritative domains plus social interactions and mentions of your brand across all channels. 

Considering the scale of hero campaigns, this content is not regularly produced and is reserved for peak promotional times where it’s important for a business to stand out from their competitors.

Hub Content

Hub content is the stuff that keeps your audience engaged, it expands on the themes of product or service level content, educates users and helps create a connection between themselves and your brand.

Hygiene Content

Hygiene content is the bread and butter of any website, it is the BAU content for products and services, it is SEO focused and targets important keywords at a product, service or guide level.

How do I manage all this?

Content development is only one part of the ongoing work needed when working with an effective content strategy. We call it “feeding the beast” because it really is the fuel in your brand vehicle and once you start you really can’t stop (if it’s delivering results) but that’s where performance measurement comes in.

Your greatest gift in managing the outputs from your hero/hub/hygiene style efforts is to understand If your content is working. To truly deliver results your business must first understand the objectives and goals of each piece of content to effectively measure its success. That as a guiding light from day 1 will let you slow down, speed up, stop or start new content briefs and projects.

Remember - content strategies are not set in stone. They are living breathing things and should adapt and pivot as insights become available and your brand naturally evolves.

If ever you want to chat content and explore new initiatives we’re always here to help.

want to speak to one of our experts?

 
Ben Davies Thumbnail
Ben Davies
Client-Side Developer
Ben started his career in 2013 as a full stack developer but has since specialised in client-side development.
Ben Davies Thumbnail

Ben Davies

05 Jun 2017 - 10 minute read
share this

stay in the know, stay ahead.

Get the latest from the agency, including news, events and expert content.
explore services in the article
find out what we can do for you
read some of our case studies