Skip to content

Commit 31c8453

Browse files
author
Jordan
committed
Initial Commit
Setting up project files
1 parent 0508a71 commit 31c8453

26 files changed

Lines changed: 779 additions & 0 deletions

‎README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# More Obnoxious.CSS
2+
3+
A "just add water" library of obnoxious CSS animations, based on the original [Obnoxious.CSS](http://tholman.com/obnoxious/) by [Tim Holman](http://tholman.com/), and inspired by the simplicity of [Animate.CSS](https://daneden.github.io/animate.css/).
4+
5+
[View The Demo](https://thecssking.github.io/MoreObnoxiousCSS/demo/) or [Download v1.0](https://github.com/thecssking/MoreObnoxiousCSS/releases/download/v1.0/moreobnoxious.css)
6+
7+
## About
8+
9+
I wanted to build a library of animations that were obnoxious, but not so obnoxious they could never be used. I like to think there is a website out there that really needs text to blink un-evenly, or exit via a black hole. If you happen to run one of these websites, please let me know - I would love to see it!
10+
11+
## The Path Forward
12+
13+
I feel like I've just begun to scratch the surface of obnoxious CSS animations. There are a lot more possibilities, and my goal is to continue updating and refining the library.
14+
15+
16+
17+

‎demo/css/main.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/css/main.less‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
html {
2+
background-color: #fefefe;
3+
}
4+
5+
.main-container {
6+
width: 100%;
7+
position: fixed;
8+
transform: translateY(-50%);
9+
top: 50%;
10+
}
11+
12+
#animateTarget {
13+
font-size: 4em;
14+
text-transform: uppercase;
15+
font-weight: bold;
16+
margin-bottom: 25px;
17+
}
18+
19+
.bottom-container {
20+
font-size: 1.15em;
21+
margin-bottom: 25px;
22+
.subtitle {
23+
margin-bottom: 25px;
24+
color: #777;
25+
}
26+
}
27+
28+
#animationSelect {
29+
width: 200px;
30+
margin: 0px auto;
31+
display: inline-block;
32+
}
33+
34+
.select-group {
35+
margin: 0px auto;
36+
}
37+
38+
a {
39+
color: #333;
40+
41+
&:hover {
42+
color: red;
43+
display: inline-block;
44+
animation: hummingbird .02s linear infinite;
45+
}
46+
47+
&.obn-link:hover {
48+
animation: danceparty 2s linear infinite;
49+
}
50+
}
51+
52+
button {
53+
&:hover {
54+
animation: crazycursor 1s linear infinite;
55+
}
56+
}
57+
58+
@media (max-width: 960px){
59+
body {
60+
font-size: 13px;
61+
}
62+
}
63+
64+
@media (max-width: 720px){
65+
body {
66+
font-size: 11px;
67+
}
68+
.bottom-container, .footer {
69+
font-size: 1.5em;
70+
}
71+
}
72+
73+
@media (max-width: 540px){
74+
body {
75+
font-size: 8px;
76+
}
77+
.bottom-container, .footer {
78+
font-size: 2em;
79+
}
80+
}
81+

‎demo/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>More Obnoxious CSS</title>
5+
<link href="../moreobnoxious.css" rel="stylesheet">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
7+
<link href="./css/main.css" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
<div class="main-container text-center">
12+
13+
<div class="animate-container">
14+
<h1 id="animateTarget" class="zigzagin">More Obnoxious.CSS</h1>
15+
</div>
16+
17+
<div class="bottom-container">
18+
<p class="subtitle">More animations for the strong of heart, and weak of mind. <br class="d-none d-sm-block"> Inspired by the original <a class="obn-link" href="http://tholman.com/obnoxious/" target="_blank">Obnoxious.CSS</a> by Tim Holman.</p>
19+
20+
<div class="select-group">
21+
<select class="form-control mr-2" id="animationSelect">
22+
<optgroup label="Hover">
23+
<option value="colorwheel">Color Wheel</option>
24+
<option value="crazycursor">Crazy Cursor (Hover over text)</option>
25+
<option value="hummingbird">Hummingbird</option>
26+
<option value="wavey">Wavey</option>
27+
<option value="heartbeat">Heart Beat</option>
28+
<option value="danceparty">Dance Party (WARNING: BRIGHT)</option>
29+
</optgroup>
30+
<optgroup label="Blink">
31+
<option value="blinkstandard">Blink - Standard</option>
32+
<option value="blinkuneven">Blink - Uneven</option>
33+
<option value="blinkflicker">Blink - Flicker</option>
34+
</optgroup>
35+
<optgroup label="Exit">
36+
<option value="ring">The Ring</option>
37+
<option value="slingshotout">Slingshot Out</option>
38+
<option value="titanic">Titanic</option>
39+
<option value="blackhole">Black Hole</option>
40+
<option value="spinout">Spin Out</option>
41+
</optgroup>
42+
43+
<optgroup label="Entrance">
44+
<option value="zigzagin">Zig Zag In</option>
45+
<option value="slideupspin">Slide Up Spin</option>
46+
<option value="spinin">Spin In</option>
47+
</optgroup>
48+
</select>
49+
50+
<!-- Very weird - need this margin to align with select -->
51+
<button class="btn btn-primary mb-2" id="animationStart">Run Animation</button>
52+
</div>
53+
</div>
54+
55+
<div class="footer">
56+
<a href="https://github.com/thecssking/MoreObnoxiousCSS/releases/download/v1.0/moreobnoxious.css">Download</a> or <a href="https://github.com/thecssking/MoreObnoxiousCSS">View on Github</a>
57+
</div>
58+
</div>
59+
60+
<script src="./js/main.js"></script>
61+
62+
</body>
63+
</html>

‎demo/js/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
(function(){
2+
3+
var selectMenu = document.getElementById('animationSelect');
4+
var animateTarget = document.getElementById('animateTarget');
5+
var button = document.getElementById('animationStart');
6+
7+
function runAnimation(){
8+
var animateClass = selectMenu.value;
9+
animateTarget.className="";
10+
11+
// This is so the above call can reset the class, allowing the same animation to be run again
12+
setTimeout(function(){
13+
animateTarget.className=animateClass
14+
},5)
15+
}
16+
17+
selectMenu.addEventListener('change', runAnimation);
18+
button.addEventListener('click', runAnimation);
19+
20+
})();

‎moreobnoxious-dist.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎moreobnoxious.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/blackhole.less‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
3+
.blackhole {
4+
animation: blackhole 3s linear;
5+
/*animation-fill-mode: both;*/
6+
}
7+
8+
@keyframes blackhole {
9+
10+
0% {
11+
transform: rotate(0turn) scale(1);
12+
}
13+
14+
80% {
15+
transform: rotate(20turn) scale(0);
16+
}
17+
18+
80.01% {
19+
transform: rotate(0turn) scale(1) skewX(89deg) skewY(1.1deg);
20+
}
21+
22+
83% {
23+
transform: rotate(0turn) scale(0);
24+
}
25+
26+
100% {
27+
transform: rotate(0turn) scale(0);
28+
}
29+
}

‎src/blinkflicker.less‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.blinkflicker {
2+
/* Note: Make sure to include the timing function (steps) when using */
3+
animation: blinkflicker 3s steps(1);
4+
animation-iteration-count: 3;
5+
}
6+
7+
8+
@keyframes blinkflicker {
9+
0% {
10+
opacity: 1;
11+
}
12+
13+
11% {
14+
opacity: 0;
15+
}
16+
17+
13% {
18+
opacity: 1;
19+
}
20+
21+
22+
40% {
23+
opacity: 0;
24+
}
25+
26+
41% {
27+
opacity: 1;
28+
}
29+
30+
49% {
31+
opacity: 0;
32+
}
33+
51% {
34+
opacity: 1;
35+
}
36+
37+
/*
38+
71% {
39+
opacity: 0;
40+
}
41+
42+
73% {
43+
opacity: 1;
44+
}*/
45+
46+
100% {
47+
opacity: 1;
48+
}
49+
}

‎src/blinkstandard.less‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.blinkstandard {
2+
/* Note: Make sure to include the timing function (steps) when using */
3+
animation: blinkstandard 1s steps(1);
4+
animation-iteration-count: 6;
5+
}
6+
7+
8+
@keyframes blinkstandard {
9+
0% {
10+
opacity: 1;
11+
}
12+
13+
50% {
14+
opacity: 0;
15+
}
16+
17+
18+
100% {
19+
opacity: 1;
20+
}
21+
}

0 commit comments

Comments
 (0)