Skip to content

Instantly share code, notes, and snippets.

@battlehorse

battlehorse/css_scroll_effect.html

Created March 6, 2011 15:29
Show Gist options
  • Save battlehorse/857357 to your computer and use it in GitHub Desktop.
Save battlehorse/857357 to your computer and use it in GitHub Desktop.
Download ZIP
CSS scroll effect and canvas arrows demoed at http://www.battlehorse.net/page/2011/02/19/css_scroll.html
Raw
css_scroll_effect.html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Rock+Salt' rel='stylesheet' type='text/css'>
<style>
BODY {
background-color: #777;
}
H1 {
color: #fff;
font-family: 'Rock Salt', sans-serif;
margin-top: 0.1em;
margin-left: 1.2em;
}
#all {
position: absolute;
top: 5em;
left: 5em;
}
#header {
width: 32em;
height: 1.5em;
left: -1em;
-webkit-box-shadow: 0 11px 12px -3px #555;
-moz-box-shadow: 0 11px 12px -3px #555;
box-shadow: 0 11px 12px -3px #555;
position: relative;
}
#footer {
width: 32em;
height: 1.5em;
left: -1em;
-webkit-box-shadow: 0 -11px 12px -3px #555;
-moz-box-shadow: 0 -11px 12px -3px #555;
box-shadow: 0 -11px 12px -3px #555;
position: relative;
}
#content {
background: url('background.jpg') 0 0 repeat-x;
background-color: #f6f6f8;
height: 20em;
width: 30em;
overflow: auto;
padding-bottom: 0.5em;
-webkit-box-shadow: 2px 0 12px #555;
-moz-box-shadow: 2px 0 12px #555;
box-shadow: 2px 0 12px #555;
text-align: center;
}
.box {
width: 60px;
height: 60px;
border: 4px solid #aaa;
background-color: #999;
border-radius: 5px;
color: #fff;
font-size: 2.8em;
font-family: 'Permanent Marker', sans-serif;
padding-top: 0.1em;
text-align: center;
display: inline-block;
margin: 0.2em;
}
.purple {
border-color: #1F0554;
background-color: #481E9D;
}
.pink {
border-color: #630339;
background-color: #B81270;
}
.green {
border-color: #4E7304;
background-color: #96D615;
}
.yellow {
border-color: #7B6B04;
background-color: #E6CA17;
}
::-webkit-scrollbar {
height: 12px;
width: 12px;
padding-right: 5px;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #aaa;
-webkit-border-radius: 1ex;
}
#arrow1 {
position: absolute;
left: 30em;
top: 0.5em;
}
#arrow2 {
position: absolute;
left: 37em;
top: 6em;
}
#arrow3 {
position: absolute;
left: 36em;
top: 15em;
}
#arrow4 {
position: absolute;
left: 37em;
top: 24em;
}
#explanation1 {
position: absolute;
left: 675px;
top: 50px;
color: white;
font-family: 'Rock Salt', sans-serif;
font-size: 0.8em;
line-height: 110%;
width: 15em;
}
#explanation2 {
position: absolute;
left: 700px;
top: 160px;
color: white;
font-family: 'Rock Salt', sans-serif;
font-size: 0.8em;
line-height: 110%;
width: 15em;
}
#explanation3 {
position: absolute;
left: 680px;
top: 270px;
color: white;
font-family: 'Rock Salt', sans-serif;
font-size: 0.8em;
line-height: 110%;
width: 15em;
}
#explanation4 {
position: absolute;
left: 690px;
top: 360px;
color: white;
font-family: 'Rock Salt', sans-serif;
font-size: 0.8em;
line-height: 110%;
width: 15em;
}
#explanation5 {
color: white;
font-family: 'Rock Salt', sans-serif;
font-size: 0.9em;
line-height: 130%;
}
A, A:visited, A:hover {
color: white;
}
</style>
</head>
<body>
<h1>CSS Scroll Effect</h1>
<div id="all">
<div id="header">
</div>
<div id="content">
<div class="box purple">1</div>
<div class="box pink">2</div>
<div class="box green">3</div>
<div class="box yellow">4</div>
<div class="box purple">5</div>
<div class="box pink">6</div>
<div class="box green">7</div>
<div class="box yellow">8</div>
<div class="box purple">9</div>
<div class="box pink">10</div>
<div class="box green">11</div>
<div class="box yellow">12</div>
<div class="box purple">13</div>
<div class="box pink">14</div>
<div class="box green">15</div>
<div class="box yellow">16</div>
<div class="box purple">17</div>
<div class="box pink">18</div>
<div class="box green">19</div>
<div class="box yellow">20</div>
<div class="box purple">21</div>
<div class="box pink">22</div>
<div class="box green">23</div>
<div class="box yellow">24</div>
<div class="box purple">25</div>
<div class="box pink">26</div>
<div class="box green">27</div>
<div class="box yellow">28</div>
<div class="box purple">29</div>
<div class="box pink">30</div>
<div class="box green">31</div>
<div class="box yellow">32</div>
<div class="box purple">33</div>
<div class="box pink">34</div>
<div class="box green">35</div>
<div class="box yellow">36</div>
<div class="box purple">37</div>
<div class="box pink">38</div>
<div class="box green">39</div>
<div class="box yellow">40</div>
<div class="box purple">41</div>
<div class="box pink">42</div>
<div class="box green">43</div>
<div class="box yellow">44</div>
<div class="box purple">45</div>
<div class="box pink">46</div>
<div class="box green">47</div>
<div class="box yellow">48</div>
<div class="box purple">49</div>
<div class="box pink">50</div>
</div>
<div id="footer"></div>
<p id="explanation5">
Arrows are &lt;canvas&gt; based bezier splines.<br /><br />
Feel free to download and reuse.<br />
Best on Chrome, Safari. Ok in Firefox4, no webfonts in Opera11.
Tested on a Mac only.
<br />
Riccardo Govoni,
<a href="mailto:[email protected]">[email protected]</a>,
<a href="http://www.twitter.com/battlehorse">twitter.com/battlehorse</a>.
</p>
</div>
<canvas id="arrow1" width="200" height="100"></canvas>
<p id="explanation1">
'Rock Salt' webfont from Google,
<a href="http://www.google.com/webfonts/family?family=Rock+Salt&subset=latin">here</a>.
</p>
<canvas id="arrow2" width="100" height="100"></canvas>
<p id="explanation2">
Relative positioning,
box shadow,
2em wider than content,
left offset at -1em.<br />
::-webkit-scrollbar style for the scrollbars.
</p>
<canvas id="arrow3" width="100" height="100"></canvas>
<p id="explanation3">
Fixed width and height. Auto overflow.
Faint box-shadow on the right,
colors from
<a href="http://colorschemedesigner.com/#4l42fhWs0g0g0">ColorSchemeDesigner</a>
</p>
<canvas id="arrow4" widht="100" height="100"></canvas>
<p id="explanation4">
Like the top one, but with inverted shadow.
</p>
<script>
var arrow1 = document.getElementById('arrow1');
var ctx = arrow1.getContext('2d');
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(190, 80);
ctx.bezierCurveTo(180,65,30,50,10,50);
ctx.lineTo(20,40);
ctx.moveTo(10,50);
ctx.lineTo(20,60);
ctx.stroke();
var arrow2 = document.getElementById('arrow2');
ctx = arrow2.getContext('2d');
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(60,90,40,15,10,10);
ctx.lineTo(18,5);
ctx.moveTo(10,10);
ctx.lineTo(16,16);
ctx.stroke();
var arrow3 = document.getElementById('arrow3');
ctx = arrow3.getContext('2d');
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.bezierCurveTo(60,70,40,15,10,10);
ctx.lineTo(20,7);
ctx.moveTo(10,10);
ctx.lineTo(16,16);
ctx.stroke();
var arrow4 = document.getElementById('arrow4');
ctx = arrow4.getContext('2d');
ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(90, 10);
ctx.bezierCurveTo(60,30,40,50,10,50);
ctx.lineTo(18,45);
ctx.moveTo(10,50);
ctx.lineTo(16,53);
ctx.stroke();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment