68 lines
51 KiB
HTML
68 lines
51 KiB
HTML
|
<style>
|
||
|
|
/*
|
||
|
|
Parallax Experiment
|
||
|
|
Date: 2nd April 2009
|
||
|
|
Author: Paul Hayes
|
||
|
|
*/
|
||
|
|
* {
|
||
|
|
margin: 0; padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample {
|
||
|
|
position: relative;
|
||
|
|
border: 2px solid #111;
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 0; padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample #background {
|
||
|
|
padding: 30px;
|
||
|
|
background: url(data:image/png;base64,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
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
-webkit-transition: left 300s linear;
|
||
|
|
-moz-transition: left 300s linear;
|
||
|
|
-o-transition: left 300s linear;
|
||
|
|
-ms-transition: left 300s linear;
|
||
|
|
transition: left 300s linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample #experiment:target #background {
|
||
|
|
left: -5000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample #experiment:hover #background {
|
||
|
|
left: -9999px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample #content {
|
||
|
|
margin: 80px 50px;
|
||
|
|
background-color: #aaa;
|
||
|
|
opacity: 0.95;
|
||
|
|
color: #555;
|
||
|
|
padding: 3em;
|
||
|
|
border: 2px solid #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
#infoSample #content h2 {
|
||
|
|
margin: 1em 0;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 26px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="infoSample">
|
||
|
|
<div class="wrapper">
|
||
|
|
<div id="experiment">
|
||
|
|
<div id="background"></div>
|
||
|
|
|
||
|
|
<div id="content">
|
||
|
|
<h2>Raw Field</h2>
|
||
|
|
<p>You can embed any type of content in a raw field. Then you can have all kinds of fun with Redux!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|