TEDxPortland Pure CSS Coke Can (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image). With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink. Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope. Castellano
Home « Unfold Unfold is a small independent digital agency,established in Oslo, Norway. In the intersection of technology and design we develop useful, compelling and engaging interactive experiences across all digital platforms. We work on a large variety of projects including applications, sites, games, digital installations and campaigns. Aware of the overwhelming amount of information surrounding us, we aim to speak a clean, clear and meaningful message. While we are working on our new site, you can view our portfolio on Behance. Title Managing Director/Account Director Email egil@unfold.no Phone Egil has nearly 10 years of experience in digital communications, working on large-scale conceptual projects for some of Norway’s major brands. Account Director joachim@unfold.no Joachim has 7 years experience at Omnicom Media Group and Apt, with digital responsibility for several of the biggest brands in Norway. Senior Developer daniel@unfold.no Daniel has been passionate about technology since he was 12 years old.