add logo fall

EmilHvitfeldt · Nov 30, 2022 · 3211181 · 3211181
1 parent 90e2e1e
commit 3211181
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -441,7 +441,7 @@ <h1></h1>
 
 <section id="httpsparticles.js.org" class="title-slide slide level1 center">
 <h1>https://particles.js.org/</h1>
-<p>https://codepen.io/emilhhvitfeldt/pen/gOKmKLR</p>
+
 </section>
 
 <section id="section-9" class="title-slide slide level1 center" data-background-iframe="multiple-images/index.html">
@@ -474,6 +474,16 @@ <h1></h1>
 </div>
 </section>
 
+<section id="section-12" class="title-slide slide level1 center" data-background-iframe="logo-fall/index.html">
+<h1></h1>
+<div style="background-color: #ffffffbb; border-radius: 10px; padding: 5px;">
+<div class="r-fit-text">
+<p>Logo Fall</p>
+</div>
+<p><a href="logo-fall.zip">Download template</a></p>
+</div>
+</section>
+
 <section id="how-to-make-your-own" class="title-slide slide level1 center">
 <h1>How to make your own</h1>
 <p>From codepen.io</p>

diff --git a/index.qmd b/index.qmd
@@ -105,8 +105,6 @@ boids
 
 # https://particles.js.org/
 
-https://codepen.io/emilhhvitfeldt/pen/gOKmKLR
-
 # {background-iframe="multiple-images/index.html"}
 
 ::: {style="background-color: #ffffffbb; border-radius: 10px; padding: 5px;"}
@@ -137,6 +135,16 @@ Colored Particles
 [Download template](colored-particles.zip)
 :::
 
+# {background-iframe="logo-fall/index.html"}
+
+::: {style="background-color: #ffffffbb; border-radius: 10px; padding: 5px;"}
+::: r-fit-text
+Logo Fall
+:::
+
+[Download template](logo-fall.zip)
+:::
+
 # How to make your own
 
 From codepen.io

diff --git a/logo-fall.zip b/logo-fall.zip
diff --git a/logo-fall/Python.png b/logo-fall/Python.png
diff --git a/logo-fall/R.png b/logo-fall/R.png
diff --git a/logo-fall/index.html b/logo-fall/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - tsParticles - Make it rain 💵!! - Dollars confetti</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="tsparticles"></div>
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.confetti.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/logo-fall/script.js b/logo-fall/script.js
@@ -0,0 +1,88 @@
+(async () => {
+  //await loadConfettiPreset(tsParticles);
+
+  await tsParticles.load("tsparticles", {
+    particles: {
+      shape: {
+        character: {
+          fill: false,
+          font: "Verdana",
+          style: "",
+          value: "*",
+          weight: "400"
+        },
+        image: [
+          {
+            src: "R.png",
+            width: 32,
+            height: 32
+          },
+          {
+            src: "Python.png",
+            width: 320,
+            height: 320
+          }
+        ],
+        polygon: {
+          nb_sides: 5
+        },
+        stroke: {
+          color: "#000000",
+          width: 0
+        },
+        type: "image"
+      },
+      life: {
+        duration: {
+          value: 0
+        }
+      },
+      number: {
+        value: 15,
+        max: 0,
+        density: {
+          enable: true
+        }
+      },
+      move: {
+        enable: true,
+        gravity: {
+          enable: false
+        },
+        decay: 0,
+        direction: "bottom",
+        speed: 2,
+        outModes: {
+          default: "out",
+          left: "out",
+          right: "out",
+          bottom: "out",
+          top: "out"
+        }
+      },
+      size: {
+        value: 100
+      },
+      opacity: {
+        value: 1,
+        animation: {
+          enable: false
+        }
+      }
+    },
+    background: {
+      color: "#232323",
+      opacity: 0
+    },
+    emitters: [],
+    interactivity: {
+      events: {
+        onClick: {
+          enable: true,
+          mode: "repulse"
+        }
+      }
+    },
+    preset: "confetti"
+  });
+})();
diff --git a/logo-fall/style.css b/logo-fall/style.css
@@ -0,0 +1,30 @@
+/* ---- reset ---- */
+.github {
+  bottom: 10px;
+  right: 10px;
+  position: fixed;
+  border-radius: 10px;
+  background: #fff;
+  padding: 0 12px 6px 12px;
+  border: 1px solid #000;
+  z-index: 2000;
+}
+
+.github a:hover,
+.github a:link,
+.github a:visited,
+.github a:active {
+  color: #000;
+  text-decoration: none;
+}
+
+.github img {
+  height: 30px;
+}
+
+.github #gh-project {
+  font-size: 20px;
+  padding-left: 5px;
+  font-weight: bold;
+  vertical-align: bottom;
+}