-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (101 loc) · 6.75 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="Gravify : Falling with Style: A CSS3 Bouncing Effect that Mimics Gravity">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Gravify</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title">Gravify</h1>
<h2 id="project_tagline">Falling with Style: A CSS3 Animation to Mimic Gravity</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h2>
<a id="the-problem" class="anchor" href="#the-problem" aria-hidden="true"><span class="octicon octicon-link"></span></a>The Problem</h2>
<p>A long, long time ago (in the summer of 2014), when I did everything in my stylesheet, I came across a peculiar problem.
I wanted to use CSS3 to give a ball object the effect of bouncing in accordance with the natural laws of physics.
I scoured the internet for some way to breathe gravity into this ball.
After hours looking through StackOverflow and CSS docs, I had found a few options, though I remained unsatisfied.
Using <a href="http://stackoverflow.com/questions/8825519/how-to-create-a-gravity-effect-with-javascript" target="_blank">JavaScript and JQuery</a> would be excessive and inefficient for such a minor task that should be easily solvable with the existing animation options in CSS3.
I first tried using the <a href="http://cbateman.com/blog/bouncing-along-css3-animation/" target="_blank">ease-in/out transitions</a> that CSS provides, and while these appeared smooth, it was very difficult to attain a feeling of natural acceleration, and each new bouncing object would need an entirely different function found through extensive trial and error.
Many sites I visited suggested an <a href="http://cssdeck.com/labs/css3-bouncing-ball" target="_blank">unwieldy keyframe function</a> to time each bounce. These functions appeared verbose and redundant in code. What's more, the created effect still appeared choppy and unprofessional.</p>
<div style="height: 20px;"></div>
<h2><a id="the-solution" class="anchor" href="#the-solution" aria-hidden="true"><span class="octicon octicon-link"></span></a>The Solution</h2>
<p>Finally, I began experimenting with a <a href="http://www.cubic-bezier.com/" target="_blank">cubic-bezier curve</a>, though all the sample functions I found were slightly off. Still, this was the closest I had come. I started from scratch, spending hours of trial-and-error to fine tune this versatile function, until finally, something just clicked.</p>
<p>To easily implement this, first define your bounce animation by set the overall position change of your object using a keyframe function (for non-modern browser compatability, see <a href="https://github.com/albiebrown/gravify/blob/gh-pages/stylesheets/stylesheet.css" target="_blank">stylesheet</a> for this page):</p>
<pre><code>@-webkit-keyframes bounce {
from, to {
bottom: [bottom_of_bounce_location]px;
height: [squished_height_at_bottom_of_bounce]px;
}
80% {
bottom: [top_of_bounce_location]px;
height: [full_height_at_top_of_bounce]px;
}
}
</code></pre>
<p></p>
<p>Next, calculate the duration needed:</p>
<p>duration_per_bounce ≈ (((top_of_bounce_location) - (bottom_of_bounce_location))/125)</p>
<p>Then, by adding just one CSS3 transition/timing to your stylesheet, you may give your bounce animation the effect of accelerating under a gravitational force:</p>
<pre><code>#OBJECT-TO-BOUNCE {
-webkit-animation: bounce [duration_per_bounce] cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}
</code></pre>
<div style="height: 20px;"></div>
<h2><a id="examples" class="anchor" href="#examples" aria-hidden="true"><span class="octicon octicon-link"></span></a>Examples</h2>
<p>Here a few potential ideas of what you might "gravify" to add a special flair to your website in just a couple minutes.
Feel free to copy the CSS from this page's <a href="https://github.com/albiebrown/gravify/blob/gh-pages/stylesheets/stylesheet.css" target="_blank">stylesheet</a> to implement these effects on your own!</p>
<h4><a id="mail-example" class="anchor" href="#mail-example" aria-hidden="true"><span class="octicon octicon-link"></span></a>Alert Messages</h4>
<p>The bouncing effect has a very practical use in websites as a means to accentuate a notification or alert.
Here, we see an unread message alert for an online email client:</p>
<div id="mail-container">
<img id="mailbox" class="" src="images/mail.png">
<div id="mailhole"></div>
<img id="message" class="" src="images/message.png">
</div>
<div style="height: 200px;"></div>
<h4><a id="bouncing-ball" class="anchor" href="#bouncing-ball" aria-hidden="true"><span class="octicon octicon-link"></span></a>Bouncy Ball:</h4>
<p>This implementation shows a typical object acting under the effects of gravity.
The bounce animation, which is really just a specially-timed translation, may also be paired with other effects.
In this example, we see a rotation, and a slight height transformation to add the illusion of elasticity.
The shadow simply scales concurrently with each bounce using the same magical cubic-bezier curve.</p>
<p>
<div id="container1" class="bounce-container">
<div id="container2" class="ball-bounce">
<img id="ball" class="ball-roll" src="images/ball.png">
</div>
</div>
</p>
<div id="shadow" class="shadow shadow-bounce"></div>
<div style="height: 500px;"></div>
<h4><a id="squish-effect" class="anchor" href="#squish-effect" aria-hidden="true"><span class="octicon octicon-link"></span></a>Squish Effect:</h4>
<p>This effect might look rather complicated, but it uses the same functions that all the other examples on this page use.
The letter "I" transforms and the lamp bounces with the exact same cubic-bezier curve.
This simultaneous animation makes the lamp seem to squish the "I".</p>
<p><img id="lamp" src="images/lamp.png"></p>
<div id="gravify">
<p><img id="gravtext" class="gravifytext" src="images/grav.png"></p>
<p><img id="itext" class="gravifytext" src="images/i.png"></p>
<p><img id="fytext" class="gravifytext" src="images/fy.png"></p>
</div>
<div style="height: 200px;"></div>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Gravify maintained by <a href="https://github.com/albiebrown">albiebrown</a></p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>