Blog Six: Firestorm

Firestorm: The story of the bushfire at Dunalley by The Guardian

This is an amazing work!

Screen Shot 2014-11-06 at 11.22.46 PM

The only thing you need to do is scroll down, and it even provides a small prompt at the bottom to remind you of that. The sticky navigation bar on the right side is convenient and consistent. And the position won’t distract much attention.

Screen Shot 2014-11-06 at 11.20.25 PM

Its design is very user-friendly and it is rich of content. It uses photos, text, graphics, videos background sound and interviews to tell a dramatic and complete story.

Screen Shot 2014-11-06 at 11.22.22 PM

Screen Shot 2014-11-06 at 11.25.29 PM

As readers scroll down, the whole story unfolds as a long slide show. The previous picture fades out and the new picture fades in. Some other effects are used as well. Besides, the text goes up, continuing to tell the story.

When I look for jQuery code, I found it set different Javascript and CSS for IE6 to IE9. It also used jQuery from Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>Screen Shot 2014-11-06 at 11.20.25 PM Screen Shot 2014-11-06 at 11.22.22 PM Screen Shot 2014-11-06 at 11.22.46 PM Screen Shot 2014-11-06 at 11.25.29 PM

2 thoughts on “Blog Six: Firestorm

  1. I really like stories that do this and I’m excited that it’s all done through JavaScript and jQuery. I’m hoping to make a website like this soon and I was wondering if this was how it was done, thanks for answering that question!

    Like

  2. I really enjoy stories/one subject sites like this. My favorite part of the site is how each section background (even the beginning) changes from picture to video. This website has a lot of transitions and moving item all working at the same time, so it’s nice that all of these plugins aren’t slowing down the site. Also the automatic start to the videos and audio interviews really makes it feel like you’re watching a visual book. Creating a site like this would be one of my major goals in designing.

    Like

Leave a comment