The CSS Source Code Behind Our Manifesto

A month ago, we finished our initial efforts of redesigning ZURB.com. It took a lot of work and we had to overcome many challenges, but the outcome is totally worth it! We now have a site that we're proud of and that does a great job of telling our story, sharing our beliefs and showcasing our work.

Our beliefs are told through the ZURBmanifesto, which outlines the core values of our company in a clear and concise way. it's used to shape how we do business from every angle.

One goal we set for our new site was to showcase our Manifesto in a way that would get people excited when they stumbled upon it. We made sure the page looked like it had the same visual language as the main site, while also standing alone.

By looking at a single slide, you can tell that this is a ZURB page. We used color, typography, sketches and iconography to add dimension to the slides (both visually and metaphorically). To accomplish all of this visual candy, we used and abused CSS and jQuery a bit. We're going to focus mainly on the CSS side of things for today. Follow along as we take a miraculous journey into the source code of our Manifesto.

Capture Attention Quickly

We really wanted the transition between each slide to be memorable and eye-catching. We used multiple backgrounds that changed position as the user scrolls down the page, creating an effect of depth and movement. We also used sketches that were specific to each section to help add to the story in a visually fun way. These were animated, but aren't affected by scrolling, just triggered by the position of the scroll bar. This way, they act as little surprises that reveal themselves in a unique way for each slide, even if the user stops scrolling.

To create the animations, we used CSS transitions that were triggered at different times by injecting new values via jQuery at specific increments on the page. The challenge was that we needed to constantly know the size of the screen, even if people resized it in the middle of their visit. This required lots of JavaScript to get right, but the CSS was relatively simple.

We made a container for each animation that had a fixed height and width based on the window size. The sketches were positioned within these containers and moved around by changing values with jQuery. The trick to making the sketches actually move was using only a few lines of CSS:

// A basic transition effect written in CSS
.animation-container img {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

To handle a lot of the animation states, timings and positions, we had to rely on jQuery so that we'd be able to know the window size and calculate our positions and timings accordingly.

Blur the Boundaries of What You Thought Was Possible

Another key factor in making the transition between each slide look and feel really awesome was how we handled the main text. As you scroll down the page, each slide overlaps the previous one, adding to the illusion of depth. At first, the text just stayed still, but it needed something more. We fiddled around with a couple ideas and decided that making the text fade into the background as if it was moving on the z-axis of 3D space would be best.

Resizing the text to make it look like it was fading into the background was pretty easy, but we really wanted to sell the illusion by making the text blur as well.

Sizing the Text

To handle the effect of resizing the text as the user scrolls down the page, we strapped on our good ol' CSS transform tool belt and its friend jQuery. Styling a static piece of text is simple with a transform, but we needed some logic to handle the change in size based on scrolling.

// A basic transform effect written in CSS
.scale {
  -moz-transform: scale(.5);
  -webkit-transform: scale(.5);
  transform: scale(.5);
}

// Written in jQuery, using a variable to change the scale
$blur.css({
  '-moz-transform': 'scale(' + blurScale + ')',
  '-webkit-transform': 'scale(' + blurScale + ')',
  'transform': 'scale(' + blurScale + ')'
});

We created an equation that outputted a percentage (blurScale). This percentage would change as the user got closer to the next slide. Now we had our text scaling and partially looking as if it was moving in a 3D space.

Blurring the Text

The blur effect in the manifesto isn't really a blur at all, it's text that has the color attribute set to transparent and the text-shadow attribute set to different amounts. The higher the spread of the text-shadow, the more blurred the text would look. We employed a similar jQuery technique to handle the logic we needed to change the blur effect as the user scrolled.

// CSS Needed to create the blurry text effect
.blurry-text {
  color: transparent;
  text-shadow: 0 0 30px rgb(255,255,255);
}

Our JavaScript simply changed the '30px' value depending on how close the text got to the next slide to create the awesome blur effect that is shown.

Design For Any Device

With the number of devices being used to surf the web these days, we just couldn't pass up the opportunity to make this puppy responsive. We utilized parts of the Foundation grid, jQuery conditional statements and media queries to render different effects and layouts at different screen sizes. One of the concerns we had was performance. Mobile devices aren't known for handling lots of animating objects happening at the same time. This has to do with how they handle the code and the size of the load.

To ensure that people viewing on mobile devices had a good experience, we removed most of the fancy JavaScript effects and made the slides stack down the page in their normal flow. The animated images were made static and the backgrounds simplified. We wanted it to be easy to flick down the page without performance slowing people down. The changes were handled using media queries.

// Media query example
@media only screen and (max-width: 768px) {
  .row { 
    overflow: hidden;
    padding: 0 20px;
  }
  '
}

Venturing Into New Territories

We had our heads down in the code on this one for awhile, but we're really happy with how it turned out. It was a new type of responsive challenge for us, handling such complex animations and logic while mixing so much CSS and jQuery. The parallax effect of the page helps to add excitement to our beliefs and conveys them in a unique and creative way. Sometimes the best way to teach yourself a new technique is to just jump into an idea full-force and not think about how hard it might be to complete. There are always solutions, you just have to find them.

You can take these techniques and come up with something awesome too. Be sure to post it in the comments for everyone to see. The best way to push boundaries is to venture into new territory and let others challenge your assumptions. Take risks and run with your ideas.

Check out the ZURBManifesto »