Merge branch 'dev'

warengonzaga · Jan 21, 2020 · 0523bcc · 0523bcc
2 parents b29e367 + 17ba1a6
commit 0523bcc
Show file tree

Hide file tree

Showing 8 changed files with 681 additions and 4 deletions.
diff --git a/daisy.js b/daisy.js
diff --git a/daisy.min.js b/daisy.min.js
diff --git a/demo/css/style.css b/demo/css/style.css
@@ -0,0 +1,131 @@
+/** 
+ * CSS Reset
+ * http://meyerweb.com/eric/tools/css/reset/
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/**  
+ * DaisyJS Demo Styles
+ * by Waren Gonzaga
+ */
+
+* {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: #65c9ff;
+  font-family: 'Montserrat', sans-serif;
+  color: #fff;
+  line-height: 1.3;
+  -webkit-font-smoothing: antialiased;
+}
+
+#momoland {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.wrapper {
+    position: absolute;
+    left: 0;
+    top: 15%;
+    padding: 0 20px;
+    width: 100%;
+    text-align: center;
+}
+
+.wrapper > img {
+    width: 200px;
+    height: auto;
+}
+
+h1 {
+    color: #ff5c5c;
+    font-size: 100px;
+    font-family: 'Marcellus SC', serif;
+    font-weight: 800;
+}
+
+.btn {
+    top: 30px;
+    position: relative;
+    background: #ff5c5c;
+    color: #fff;
+    padding: 20px 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    border-radius: 10px;
+    transition-duration: 0.3s;
+}
+
+.btn:hover {
+    background: #fff;
+    color: #ff5c5c;
+    transition-duration: 0.3s;
+}
+
+span {
+    top: 70px;
+    display: block;
+    position: relative;
+    color: #fff;
+    font-weight: 500;
+}
+
+span > a {
+    color: #fff;
+}
diff --git a/img/daisy-official-icon.png → demo/img/daisy-official-icon.png b/img/daisy-official-icon.png → demo/img/daisy-official-icon.png
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>DaisyJS Demo</title>
+        <meta name="description" content="Web animation javascript plugin for beautiful background particle systems. The Maintained and LTS version of popular Particleground.">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/css?family=Marcellus+SC&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://oss.maxcdn.com/libs/normalize-css/3.0.0/normalize.min.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"/>
+        <link rel="stylesheet" href="./css/style.css"/>
+        <style>
+            .github-fork-ribbon:before {
+                background-color: #000;
+            }
+        </style>
+    </head>
+    <body>
+        <a class="github-fork-ribbon" href="https://github.com/warengonzaga/daisy.js" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+
+        <div id="momoland">
+            <div class="wrapper">
+                <img src="./img/daisy-official-icon.png"/>
+                <h1>DaisyJS</h1>
+                <a class="btn" href="https://github.com/WarenGonzaga/daisy.js/archive/master.zip" target="_blank">Download Now</a>
+                <span>&lt;/&gt; with &lt;3 by <a href="https://github.com/warengonzaga" target="_blank" title="Visit My Github Profile">Waren Gonzaga</a></span>
+            </div>
+        </div>
+
+        <!--[if lt IE 7]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+
+        <script src="../src/daisy.js" defer></script>
+        <script src="./js/index.js" defer></script>
+    </body>
+</html>
diff --git a/demo/js/index.js b/demo/js/index.js
@@ -0,0 +1,22 @@
+/** 
+ * DaisyJS Demo Script
+ * by Waren Gonzaga
+ */
+
+// in vanilla javascript
+
+document.addEventListener('DOMContentLoaded', function () {
+  daisyjs(document.getElementById('momoland'), {
+    dotColor: '#000',
+    lineColor: '#222'
+  });
+}, false);
+
+// as jquery plugin
+
+/* $(document).ready(function() {
+  $('#momoland').daisyjs({
+    dotColor: '#000',
+    lineColor: '#222'
+  });
+}); */
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "daisyjs",
   "version": "1.0.0",
-  "description": "A JavaScript plugin for snazzy background particle systems. A maintained version and inspired by Particleground.",
+  "description": "Web animation javascript plugin for beautiful background particle systems. The Maintained and LTS version of popular Particleground.",
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/src/daisy.js b/src/daisy.js
@@ -175,8 +175,9 @@
     /**
      * Particle
      */
+
     function Particle() {
-      this.stackPos = stackPos;
+      this.stackPos = this.stackPos; 
       this.active = true;
       this.layer = Math.ceil(Math.random() * 3);
       this.parallaxOffsetX = 0;
@@ -227,7 +228,7 @@
       // draw lines
       ctx.beginPath();
       // iterate over all particles which are higher in the stack than this one
-      for (var i = particles.length - 1; i > tpos; i--) {
+      for (var i = particles.length - 1; i > this.stackPos; i--) {
         var p2 = particles[i];
 
         // pythagorus theorum to get distance between two points
@@ -322,7 +323,7 @@
      * Setter: particle stacking position
      */
     Particle.prototype.setStackPos = function(i) {
-      stackPos = i;
+      this.stackPos = i;
     };
 
     function option (key, val) {