-
+
+
+
+
Click here to make me smile!
-
(particle gallery here)
+
Coin source, dollar bill source Business vector created by macrovector - www.freepik.com
-
+
Say you’re already familiar with the animation properties of CSS.
What makes particle animation any different?
The defining characteristics of a particle animation are:
- Numerous animated elements of the same type.
+ Numerous like items being animated simultaneously.
Randomness/Variation: of particle speed, direction, size, color, etc. (This gives the animation a more interesting and natural appearance.)
Professional animation software has the ability to automatically generate an infinite number of particles with randomized properties and realistic physics. With CSS, unfortunately we are limited in a few ways:
@@ -182,7 +213,7 @@
We'll look at some ways to get past these limitations later on.
-
+
Tutorial
Read on to find out how you can create awesome CSS particle animations yourself!
Outline
diff --git a/scss/midterm.scss b/scss/midterm.scss
index 043fb09..8038635 100644
--- a/scss/midterm.scss
+++ b/scss/midterm.scss
@@ -111,9 +111,6 @@ header {
background-color: aliceblue;
}
-#info3 {
- background-color: pink;
-}
ul, ol {
text-align: left;
@@ -146,11 +143,131 @@ ul, ol {
.attribution {
grid-row: -1/span1;
+ grid-column: 1/-1;
opacity: .5;
font-size: 9pt;
margin: 0 5px;
}
+#button {
+ width: 120px;
+ height: auto;
+ position: relative;
+ background: white;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ color: black;
+ padding: 20px 5px;
+ align-self: flex-start;
+}
+#button:before {
+ content: "";
+ position: absolute;
+ right: 100%;
+ top: 26px;
+ width: 0;
+ height: 0;
+ border-top: 13px solid transparent;
+ border-right: 26px solid white;
+ border-bottom: 13px solid transparent;
+}
+
+#button:hover {
+ cursor: pointer;
+}
+
+#rain {
+ background: black;
+ color: white;
+ height: 50vh;
+ min-height: 400px;
+ display: grid;
+ grid-template-rows: 1fr auto 1fr auto;
+ grid-template-columns: 1fr 1fr 2fr;
+}
+
+#character-wrapper {
+ grid-row:2/-1;
+ grid-column: 1/3;
+ display: flex;
+ justify-content: flex-start;
+}
+
+svg {
+ align-self: flex-end;
+}
+
+#sad-girl {
+ height: 250px;
+}
+
+#happy-girl {
+ height: 220px;
+}
+
+/* ==========================================================================
+ CHECKBOX HACK
+ ========================================================================== */
+
+.show {
+ display: none;
+}
+
+.hide {
+ display: block;
+}
+
+.switch { /*default rain attribute here*/
+ background: gray;
+ height: 10px;
+ width: 3px;
+ position: absolute;
+}
+
+@for $i from 1 through 50 {
+ .switch:nth-child(#{$i}) {
+ left: random($limit: 650)+50px;
+ animation: rain 1s linear infinite;
+ transform: scale(random($limit: 2)*0.7);
+ animation-fill-mode: backwards;
+ animation-delay: random(100)*0.05s !important;
+ }
+}
+
+#rainswitch {
+ display: none;
+}
+
+#rainswitch:checked ~ div > .show{
+ display: block;
+}
+
+#rainswitch:checked ~ div > .hide{
+ display: none;
+}
+
+#rainswitch:checked ~ .particle-container > .particle-rain1{ /*coin rain attributes here*/
+ background: url(/img/spinning-coin.gif);
+ background-size: cover;
+ background-position: center;
+ width: 30px;
+ height: 30px;
+ transform: scale(random($limit: 2)*0.7) rotate(90deg);
+ animation: rain 2s linear infinite;
+}
+
+#rainswitch:checked ~ .particle-container > .particle-rain2{ /*dollar bill rain attributes here*/
+ background: url(/img/dollar.png);
+ background-size: cover;
+ background-position: center;
+ width: 80px;
+ height: 48px;
+ transform-origin: 0 -100px;
+ animation: rain 3s linear infinite, sway 3s linear alternate infinite;
+}
+
+
/* ==========================================================================
PARTICLE-RELATED STYLES & ANIMATION
========================================================================== */
@@ -160,7 +277,7 @@ ul, ol {
overflow: hidden;
height: 100%;
grid-row: 1/4;
- grid-column: 1/2;
+ grid-column: 1/-1;
position: relative;
}
@@ -217,6 +334,24 @@ ul, ol {
animation-delay: 7s;
}
+@keyframes rain {
+ 0% {
+ top: -10%;
+ }
+ 100% {
+ top: 100%;
+ }
+}
+
+@keyframes sway {
+ 0% {
+ transform: rotate(-15deg);
+ }
+ 100% {
+ transform: rotate(15deg);
+ }
+}
+
@-webkit-keyframes burst1 {
0%, 20% {
-webkit-transform: rotate(-10deg) scale(1,0.8);