-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
56 lines (56 loc) · 2.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<head>
<title>CSS3 Snowflakes Demo</title>
<link href="css/base.css" rel="stylesheet" media="screen" />
<link href="css/snowflakes.css" rel="stylesheet" media="screen" />
</head>
<script src="js/ready.min.js" type="text/javascript"></script>
<script src="js/snowflakes.js" type="text/javascript"></script>
<script type="text/javascript">
var snowflakes;
domReady(function() {
snowflakes = new Snowflakes('container','snowflakesContainer');
snowflakes.create(40);
});
</script>
<body id="index">
<div id="container">
<div id="text">
<h1>CSS3 Snowflakes</h1>
<p>
This is a simple demo of CSS3-based snowflakes. It is based on <a href="http://www.standardista.com/sxsw/">the work of
Estelle Weyl</a> (<a href="http://twitter.com/estellevw/">@estellevw</a>). These snowflakes are dynamically created on
page load and several effects (<em>e.g. opacity, size, speed</em>) are randomly added to each snowflake.
The <a href="https://github.com/dmolsen/CSS3-Snowflakes">code is available on GitHub</a>.
</p>
<h2>Browser Support</h2>
<p>
This demo should support Safari, Chrome, and Firefox.
</p>
<h2>Requirements</h2>
<p>
If you decide you want to initialize the snowflakes in your <code><head></code> tag then you'll need to use a simple
library to tell you when the DOM is ready like <a href="https://github.com/ded/domready">domReady</a>. domReady is
included and used in the distribution.
</p>
<h2>To Use</h2>
<p>
If you would like to use CSS3 Snowflakes on your own site (<em>and who wouldn't?</em>) simply include <code>snowflakes.js</code> and
<code>snowflakes.css</code> in your project. Modify <code>snowflakes.js</code> to include the proper references to the <code><div></code>
that marks the overall container for your content as well as the <code><div></code> from which your snowflakes will fall. Then simply add:
<blockquote>
<code>var snowflakes = new Snowflakes(pageContentDiv,snowflakesHolderDiv);<br />snowflakes.create(someNumber);</code>
</blockquote>
to your page to generate the snowflakes.
</p>
<h2>Some Fun</h2>
<p>
You can always <a href="#" onclick="javascript:snowflakes.moreSnow(40);return false;">add more snow</a> to this page to create a blizzard.
Or <a href="#" onclick="javascript:snowflakes.lessSnow(20);return false;">remove some snow</a> if you think it's too much.
</p>
</div>
<div id="translucentBG"></div>
</div>
<div id="snowflakesContainer"></div>
</body>
</html>