pixel-fable

Parallax Scrolling technology has been used by agencies and designers around the world to produce stunning one page websites that promote brand or product, e.g., Nike Jumpman and Beetle, and to present company or persona, e.g. Kinetic and Anna Safroncik. But nobody does it quite like Senongo Akpem, an interactive designer from Nigeria who is currently living in NYC, who uses Parallax Scrolling for marvelous story-telling interactivity of Nigerian folklore in Pixel-Fable.com.

We are honored for the chance to get up close and personal with this talented Interactive Designer who have spoken at Future of Web Design NYC 2012 and learn about his roots, the creative inspirations and technology behind Pixel Fable and his future aspirations for it.

How did you become an Interactive Designer/Art Director?

After getting a degree in printmaking at the University of Michigan, I moved to Japan for 7 years. While there, I taught myself HTML and CSS, and started designing sites here and there. After some time, it became a bigger part of who I was as a designer, and I was able start freelance.

After moving to New York two years ago, I have been working on larger corporate sites, as well as personal projects like Pixel Fable. I also spend a lot of time designing typographic sets, something that has really strengthened my ability to think holistically about design.

How your roots/heritage came to play with your designs in Pixel Fable?

Nigerians have traditionally had a very strong oral culture. In the old days, it was a time where few people could read or write. Telling stories was a way to entertain, teach, and pass on cultural knowledge. I remember as a child, staying up late every year on New Years Eve. Groups of young musicians would walk around the neighborhood, playing drums and singing. If you didn’t give them a donation, they would continue playing, loudly, in front of your home. In the middle of the night. They always got a donation.

My father spent a lot of time telling me stories about turtles, birds, monkeys, and all sorts of other Nigerian characters, and it made the nature around me come alive. It didn’t hurt that most of them were morality tales, but most Western children’s tales are morality tales too, I guess.

With Pixel Fable, I am taking what was once kept in our cultural memory and transferring it to the collective memory of the Internet. Our society is living more and more of our lives online, and putting these fables onto pixel-fable.com was to me the best way to bring them to a wide audience in Nigeria and the West.

pixel-fable pixel-fable

So why the name Pixel Fable?

The name is simply a reflection of that digital and analog dichotomy. Stories told online, or fables with pixels. There is a quiet movement among many Africans and African Americans called Afrofuturism. it explores ideas of science fiction, magic, fantasy, and African history. Pixel Fable sits squarely within the philosophies of Afrofuturism, with its emphasis on technology to tell ancient Nigerian stories.

pixel-fable pixel-fable

Tell us about the technology and development process behind Pixel-Fable.com. Why did you choose to work with one page Parallax Scrolling technology?

Each one of these stories is a self-contained unit. I wanted to keep them on one page, to make reading easier, and to allow the reader to fall into one world, rather than a series of linked pages. Below is some of  the code I used, cross-posted from an article I wrote.

The HTML

I used HTML5 markup for this site. By that, I mean the header, nav, article, and footer elements. The rest of the HTML uses boring old ids and classes. For the sake of simplicity, I have shortened the header and main navigation here, as they have no effect on the parallax effect. Each article holds content: text, images, anything that needs to move at regular scrolling speed.

<div id="parallax-triangle">
  <div class="triangle1-1"> </div>
  <div class="triangle1-2"> </div>
</div>
<div id="thatswhy-bg"> </div>

The CSS

The #parallax-triangle1 and #parallax-wisp3 divs contain all the background images. Each of their inner divs move at a different speed. This is done via the CSS, by reading the top: property (see below)

#title {
  position: absolute;
  display:block;
  clear:both;
  top: 0px;
  height:800px;
  padding: 200px 0 0 40%;
}
/* triangle styles 1 */
#parallax-triangle1 {
  position: fixed;
  left: 50%;
  top:0;
  width: 1200px;
  margin-left: -600px;
}
.triangle1-1 {
  width:500px;
  height:270px;
  background: url(../images/hi/pf-images-sprite.png) no-repeat -227px 0;
  top: 1090px;
  left: 40%;
  position: absolute;
}
.triangle1-2 {
  width:500px;
  height:146px;
  background: url(../images/hi/pf-images-sprite.png) no-repeat 0 -659px;
  top: 2100px;
  left: 5%;
  position: absolute;
}

Multiple Backgrounds Where Necessary

Each div has a background image, and the size of the div is cropped exactly, so no other bits of the image sprite show. Top aligns it vertically from the top of the page, while left aligns it horizontally. I use % for left, to allow for responsive resizing.

#thatswhy-bg{
  background-image: url(../images/hi/triangle-repeat-white.png),
  url(../images/hi/white-blue-fade.png);
  background-position: 0 bottom, 0 0 ;
  background-repeat: repeat-x;
  width:2400px;
  height:1000px;
  top: 8800px;
  left: -2%;
  position: absolute;
}

I added CSS3 multiple background images to #thatswhy-bg. This meant a more layered effect inside a div, while not having to control the movement of the pieces with javascript.

Media Queries

I needed to use media queries to control the background images and the alignment in smaller windows. While I will not list any examples here, you can look at the source of Pixel-Fable.com to see how I handled them.

We love the interactivity of “Augmented Reality” which complements the story-telling in Pixel-Fable.com. Tell us about the idea and development process behind this technology.

Cool demos of augmented reality started showing up on the internet around 2008-9, but much of it was just proof of concept- dancing dinosaurs, animated text, that sort of thing. Some people were using it to design business cards and web apps, though. What really crystallized the idea was a tutorial in Computer Arts magazine. It explained in detail how to use the Flash libraries and how to create the AR markers for the camera to pinpoint.

pixel-fable

Setting it up took months of development work, mostly because I needed to teach myself a completely new codebase and way of thinking. I used FlashBuilder, Flash, After Effects for the animations, and a number of other free Flash libraries, like the FLARtoolkit and http://www.mikkoh.com/blog/2008/12/flartoolkitflash-augmented-realitygetting-started/.

Going back to the original point of Pixel Fable, I really liked the idea that content and a story could essentially be stored in thin air. The user can access that part of the story, but it exists as an extra, augmented layer on the core content. Once HTML5 has more robust camera access, I really think this technology will take off, but for now, I’m happy with my straightforward setup on Pixel Fable.

Thank you for sharing! We are looking forward to enjoy more stories. So what other fables/stories you are planning on doing?

Pixel Fable will have a few more stories coming up soon, as well as some edits to Pixel-Fable.com to make it easier to browse. The story I am working on right now is “Why The Crab Walks One Way, Then Another” and it should be available online by the end of July 2012.

pixel-fable

About Senongo Akpem

Senongo Akpem is an interactive designer, art director, and tinkerer in New York. He currently works for an international educational publisher, and his free time is spent on sci-fi, art, and typography. He started Pixel Fable as a way to bring traditional African stories to a modern digital audience. You can find him on twitter (@senongo) most days, or on his website at senongo.net.

Interviewed and written by: Siska Flaurensia
A Digital Designer and Front End Developer who has a chronic obsession with one page web design and development. Calls herself “Citizen of the World”, loves to travel, sing in the car, and eat red velvet cupcakes. Visit her website and follow her on Twitter.