1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-16 01:55:18 +01:00
blog/content/posts/2008-03-31-love-the-parallax.md

22 lines
1.1 KiB
Markdown
Raw Normal View History

2013-11-18 23:54:59 +01:00
---
2018-07-19 02:22:01 +02:00
type: post
2013-12-09 23:29:19 +01:00
2013-11-18 23:54:59 +01:00
title: Love the parallax
2013-12-09 23:29:19 +01:00
author: Matthias Kretschmann
date: 2008-03-31 20:54:45+00:00
2018-07-19 02:22:01 +02:00
2018-08-30 22:50:09 +02:00
tags:
2019-05-12 16:37:44 +02:00
- design
2013-11-18 23:54:59 +01:00
---
2018-07-17 23:26:36 +02:00
![parallax](../media/parallax.png)If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
2013-11-18 23:54:59 +01:00
2018-08-08 22:26:42 +02:00
<!-- more -->
2013-11-18 23:54:59 +01:00
I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/)
2013-12-09 23:29:19 +01:00
This effect drew much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. [Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/)
2013-11-18 23:54:59 +01:00
A more common explanation [gives Chris Coyier over at css-tricks.com.](http://css-tricks.com/3d-parralax-background-effect/trackback) He uses three star layers to make a cool space-effect.