-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
You can use animated particles to create a subtle background effect...
-
Or you can make your particles show-stopping!
+
...or you can make your particles POP!
@@ -114,7 +169,7 @@
The defining characteristics of a particle animation are:
- Numerous animated elements of the same type.
- - Randomness/Variation: of particle speed, direction, size, color, etc. This is what gives the animation a natural appearance.
+ - 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:
diff --git a/scss/midterm.scss b/scss/midterm.scss
index b55ce73..1e6427f 100644
--- a/scss/midterm.scss
+++ b/scss/midterm.scss
@@ -150,13 +150,264 @@ ul, ol {
position: relative;
}
-.particle-temp {
+.particle-subtle {
position: absolute;
border-radius: 50%;
margin: 15px;
background: white;
}
+.starburst {
+ position: absolute;
+ transform-origin: center;
+}
+
+#starburst1 {
+ left: 20px;
+ animation: burst1 4s ease-in infinite backwards;
+}
+
+#starburst2 {
+ left: 125px;
+ animation: burst2 4s ease-in infinite backwards;
+}
+
+#starburst3 {
+ left: 250px;
+ animation: burst3 4s ease-in infinite backwards;
+}
+
+#starburst4 {
+ left: 400px;
+ animation: burst4 4s ease-in infinite backwards;
+}
+
+#starburst5 {
+ left: 575px;
+ animation: burst5 4s ease-in infinite backwards;
+}
+
+@keyframes flicker {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes burst1 {
+ 0%, 20% {
+ transform: rotate(-10deg) scale(1,0.8);
+ opacity:0;
+ top: 50px;
+ }
+ 25% {
+ opacity:1;
+ }
+ 50%{
+ transform: scale(1, 0.5);
+ top: 50px;
+ }
+ 75% {
+ opacity:.5;
+ }
+ 100% {
+ opacity:0;
+ transform: rotate(10deg) scale(1, 0.3);
+ top: 250px;
+ }
+}
+
+@keyframes burst2 {
+ 0%, 20% {
+ transform: scale(1,0.8);
+ opacity:0;
+ top: 75px;
+ }
+ 25% {
+ opacity:1;
+ }
+ 50%{
+ transform: scale(1, 0.5);
+ top: 75px;
+ }
+ 75% {
+ opacity:.5;
+ }
+ 100% {
+ opacity:0;
+ transform: scale(1, 0.3);
+ top: 275px;
+ }
+}
+
+@keyframes burst3 {
+ 0%, 20% {
+ transform: scale(1,0.8);
+ opacity:0;
+ top: 75px;
+ }
+ 25% {
+ opacity:1;
+ }
+ 50%{
+ transform: scale(1, 0.5);
+ top: 75px;
+ }
+ 75% {
+ opacity:.5;
+ }
+ 100% {
+ opacity:0;
+ transform: scale(1, 0.3);
+ top: 275px;
+ }
+}
+
+@keyframes burst4 {
+ 0%, 20% {
+ transform: scale(1,0.8);
+ opacity:0;
+ top: 75px;
+ }
+ 25% {
+ opacity:1;
+ }
+ 50%{
+ transform: scale(1, 0.5);
+ top: 75px;
+ }
+ 75% {
+ opacity:.5;
+ }
+ 100% {
+ opacity:0;
+ transform: scale(1, 0.3);
+ top: 275px;
+ }
+}
+
+@keyframes burst5 {
+ 0%, 20% {
+ transform: scale(1,0.8);
+ opacity:0;
+ top: 75px;
+ }
+ 25% {
+ opacity:1;
+ }
+ 50%{
+ transform: scale(1, 0.5);
+ top: 75px;
+ }
+ 75% {
+ opacity:.5;
+ }
+ 100% {
+ opacity:0;
+ transform: scale(1, 0.3);
+ top: 275px;
+ }
+}
+
+@keyframes grow {
+ 0%, 20% {
+ transform-origin: center;
+ top: 100px;
+ left: 100px;
+ }
+ 25% {
+ transform-origin: 25px 25px;
+ top: 75px;
+ left: 75px;
+ }
+ 75% {
+ transform-origin: 75px 75px;
+ top: 25px;
+ left: 25px;
+ }
+ 100% {
+ transform-origin: 100px 100px;
+ top: 0px;
+ left: 0px;
+ }
+}
+
+.star-wrapper {
+ position: absolute;
+ animation:
+ flicker 100ms steps(2, jump-none) infinite,
+ grow 4s linear infinite backwards;
+}
+
+@for $i from 1 through 10 {
+ .rotate#{$i} {
+ transform: rotate(#{36*$i}deg);
+ }
+}
+
+$star-size: 6px;
+
+#starburst1 .particle-star {
+ background: magenta;
+}
+
+#starburst1 .particle-star:before {
+ background:magenta;
+}
+
+#starburst2 .particle-star {
+ background: violet;
+}
+
+#starburst2 .particle-star:before {
+ background:violet;
+}
+
+#starburst3 .particle-star {
+ background: violet;
+}
+
+#starburst3 .particle-star:before {
+ background:violet;
+}
+
+#starburst4 .particle-star {
+ background: violet;
+}
+
+#starburst4 .particle-star:before {
+ background:violet;
+}
+
+#starburst5 .particle-star {
+ background: violet;
+}
+
+#starburst5 .particle-star:before {
+ background:violet;
+}
+
+.particle-star {
+ opacity: 1;
+ width: $star-size;
+ height: $star-size;
+ position: absolute;
+ text-align: center;
+ transform: rotate(20deg);
+}
+.particle-star:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: $star-size;
+ width: $star-size;
+ opacity: 1;
+ transform: rotate(135deg);
+}
+
@keyframes blur_fade {
0% {
height: 2px;
@@ -186,9 +437,8 @@ ul, ol {
}
}
-
@for $i from 1 through 30 {
- .particle-temp:nth-child(#{$i}) {
+ .particle-subtle:nth-child(#{$i}) {
top: random($limit: 8)*50px;
left: random($limit: 14)*50px;
animation: