跳到主要内容

交互式巫术地图确实是一种美丽的事物。

Witcher website
+$(Image credit: witchernetflix.com)

+$If you're loving Netflix fantasy drama the series The Witcher, but can't quite get your head around what seems like a constantly jumping timeline, we have a solution. You need to check out the beautifully crafted 'Map of the Continent', the official companion website to the series.

+$The site is packed with snippets of extra information that enhance the characters' back stories and draw you further into the world of the Witcher. However, what makes the site so enticing is the visual presentation. The site is a treasure trove of beautiful design elements, smart and engaging interactivity andCSS动画+$, all of which come together to provide a storytelling experience of the highest order.

Witcher website

+$Drag the timeline to reveal key plotline points and event information+$(Image credit: witchernetflix.com)

+$The timeline is split into four tracks dedicated to different story elements: users can follow leading characters, Geralt, Yennefer or Ciri, or explore the general history of the magical world. All four tracks converge when the timeline is dragged to 1250, the birth of Ciri. Key points along the timeline animate to inform the user there is something to read: a pop-up window slides up to reveal an event, and more usefully for Witcher-lovers, what episode and what year a key plotline occurs in.

+$Enhancing the timeline and embellishing the whole storytelling experience is a dynamic map that uses animation to add atmosphere by reflecting the weather. The map might boast a familiar feel as its underlying code is very much part of the Google Maps experience. Zoom in, zoom out and drag to wherever you want to go on the map.

Witcher website

+$Search for information about your favourite characters+$(Image credit: witchernetflix.com)

+$Google's influence doesn't stop here. A well-timed, animated slide-out side panel reveals a search omnibox giving fans quick access to Witcher information when they want it. Completing the picture is the classic hamburger menu icon to reveal the essential company information.

+$The Witcher's 'Map of the Continent' website is a perfect example of how to bring different media together to create a complete and compelling storytelling experience. The site uses subtle and smart UI animations to engage users, and give users the information they want. It borrows from well-known everyday elements (like Google Maps) to ensure an intuitive and vastly enjoyable experience. Visit the+$Witcher Interactive Map+$to explore for yourself.

GenerateJS banner

+$Learn how to build better JavaScript at GenerateJS(图像信用:未来/Toa Heftiba,Unspash)

加入2020年4月我们在GenerateJS的JavaScript超级明星阵容--帮助您构建更好的JavaScript的会议。现在预订Generateconf.com 

阅读更多:



翻译字数超限