未加星标

Immersive Garden wins #SOTM with Rainforest Food Experience

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

We are very proud to announce thatImmersive Garden (France) have won the first SOTM of 2017 with their dreamy and interactive Rainforest Foods Experience . Immersive Garden shares with us the processes behind making their highly creative site .

The Project

We started this project with the ambition to create an experience that would be different to what we are used to seeing and wanted to craft an immersive universe, very visual and emotional.

The theme of nature was to be at the heart of the experience, we have used the superfoods products and their remote location to imagine a storytelling that would match the different natural benefits, to create a narration around man’s connection with nature.


Immersive Garden wins #SOTM with Rainforest Food Experience

We wanted the users to spend a bit more time than they traditionally do on websites, we wanted them to be surprised and to convey a positive mood to craftily associate the storytelling with the Rainforestfoods products.

We have chosen to create a photorealistic universe added to scan techniques, as well as parallax and rotations to give an illusion of depth, 3D and immersion in the scenes without ever really using 3D technologies.

Regarding the process, we spent a lot of time crafting the various universes in order to make them work with the product they deal with and have a holistic coherence and variety, so that the user stays surprised all the way through. This involved a lot of mounting and mate painting, that was then prototyped on after effect before reintegrating image by image on the website and making it all interactive. (Yes, it was as complicated as it sounds)


Immersive Garden wins #SOTM with Rainforest Food Experience

We didn't want to leave anything to chance, so even though the interface is minimal, to really give sufficient space to the visual, we spent some time making this interface smart and innovative.

Development required a lot of R&D to allow us to explore the extent of possibilities we had, while keeping the experience as fluid as possible."

Technologies andServer Architecture

For hosting we used Ukfast at the client’s request, but we wouldn’t suggest it. We prefer amazon or OVH , the server architecture used was an Apache server anphp.

Regarding the technologies used, the website is full static so no back-end was needed. For the front-end we mainly usedWebGL viaPixiJS and CSS transform animations. We tried an alternative version usingThree.js but the performances weren’t very good. The final version doesn’t include any 3D, the depth effects are emulated via synchronized parallax with a scale.

For the Stack we used Gulp + Browerify + Babel, with Stylus for the CSS.

The Homemade Framework (LightJS) is based on WebComponents . Components have been created around PixiJS classes in order to use the framework data-binding for the animations.The JSONs files are generated from Texture Packer as well as others manually created, allowing to construct the different slides.


Immersive Garden wins #SOTM with Rainforest Food Experience

We used the following tools; Texture Packer to generate the atlas textures. A script in NodeJs to separate the alpha layer from the color (premultiply alpha channel) to compress the color in JPEG and alpha in PNG (black + alpha). This way the PNG can be compressed even more with less noticeable artifacts (only few bandings on gradients). Color and alpha are then recomposed during the website loading thanks to globalCompositeOperation of a canvas tag.

Thanks to everyone who voted and tweeted, the winners of WLOKS bundles are:

@mchiama, @chrisweinhapl, @gabrielkarasek, @JeremieDevoos

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSWebGLGulpPHP
分页:12
转载请注明
本文标题:Immersive Garden wins #SOTM with Rainforest Food Experience
本站链接:http://www.codesec.net/view/532222.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(36)