+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+ Many different text. Many different text. Many different text. Many different text. Many different text.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js b/Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js
new file mode 100644
index 00000000..b48315e2
--- /dev/null
+++ b/Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js
@@ -0,0 +1,185 @@
+var ssb = {
+ aConts: [],
+ mouseY: 0,
+ N: 0,
+ asd: 0, /*active scrollbar element*/
+ sc: 0,
+ sp: 0,
+ to: 0,
+
+ // constructor
+ scrollbar: function (cont_id) {
+ var cont = document.getElementById(cont_id);
+
+ // perform initialization
+ if (!ssb.init()) return false;
+
+ var cont_clone = cont.cloneNode(false);
+ cont_clone.style.overflow = "hidden";
+ cont.parentNode.appendChild(cont_clone);
+ cont_clone.appendChild(cont);
+ cont.style.position = 'absolute';
+ cont.style.left = cont.style.top = '0px';
+ cont.style.width = cont.style.height = '100%';
+
+ // adding new container into array
+ ssb.aConts[ssb.N++] = cont;
+
+ cont.sg = false;
+
+ //creating scrollbar child elements
+ cont.st = this.create_div('ssb_st', cont, cont_clone);
+ cont.sb = this.create_div('ssb_sb', cont, cont_clone);
+ cont.su = this.create_div('ssb_up', cont, cont_clone);
+ cont.sd = this.create_div('ssb_down', cont, cont_clone);
+
+ // on mouse down processing
+ cont.sb.onmousedown = function (e) {
+ if (!this.cont.sg) {
+ if (!e) e = window.event;
+
+ ssb.asd = this.cont;
+ this.cont.yZ = e.screenY;
+ this.cont.sZ = cont.scrollTop;
+ this.cont.sg = true;
+
+ // new class name
+ this.className = 'ssb_sb ssb_sb_down';
+ }
+ return false;
+ }
+ // on mouse down on free track area - move our scroll element too
+ cont.st.onmousedown = function (e) {
+ if (!e) e = window.event;
+ ssb.asd = this.cont;
+
+ ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+ for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
+ this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;
+ this.cont.sb.onmousedown(e);
+ }
+
+ // onmousedown events
+ cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; }
+ cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; }
+
+ //onmouseout events
+ cont.su.onmouseout = cont.su.onmouseup = ssb.clear;
+ cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;
+
+ // on mouse over - apply custom class name: ssb_sb_over
+ cont.sb.onmouseover = function (e) {
+ if (!this.cont.sg) this.className = 'ssb_sb ssb_sb_over';
+ return false;
+ }
+
+ // on mouse out - revert back our usual class name 'ssb_sb'
+ cont.sb.onmouseout = function (e) {
+ if (!this.cont.sg) this.className = 'ssb_sb';
+ return false;
+ }
+
+ // onscroll - change positions of scroll element
+ cont.ssb_onscroll = function () {
+ this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;
+ this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';
+ }
+
+ // scrollbar width
+ cont.sw = 12;
+
+ // start scrolling
+ cont.ssb_onscroll();
+ ssb.refresh();
+
+ // binding own onscroll event
+ cont.onscroll = cont.ssb_onscroll;
+ return cont;
+ },
+
+ // initialization
+ init: function () {
+ if (window.oper || (!window.addEventListener && !window.attachEvent)) { return false; }
+
+ // temp inner function for event registration
+ function addEvent(o, e, f) {
+ if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }
+ if (window.attachEvent) return o.attachEvent('on' + e, f);
+ return false;
+ }
+
+ // binding events
+ addEvent(window.document, 'mousemove', ssb.onmousemove);
+ addEvent(window.document, 'mouseup', ssb.onmouseup);
+ addEvent(window, 'resize', ssb.refresh);
+ return true;
+ },
+
+ // create and append div finc
+ create_div: function (c, cont, cont_clone) {
+ var o = document.createElement('div');
+ o.cont = cont;
+ o.className = c;
+ cont_clone.appendChild(o);
+ return o;
+ },
+ // do clear of controls
+ clear: function () {
+ clearTimeout(ssb.to);
+ ssb.sc = 0;
+ return false;
+ },
+ // refresh scrollbar
+ refresh: function () {
+ for (var i = 0, N = ssb.N; i < N; i++) {
+ var o = ssb.aConts[i];
+ o.ssb_onscroll();
+ o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';
+ o.sb.style.height = Math.ceil(Math.max(o.sw * .5, o.ratio * o.offsetHeight) + 1) + 'px';
+ }
+ },
+ // arrow scrolling
+ arrow_scroll: function () {
+ if (ssb.sc != 0) {
+ ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;
+ ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);
+ ssb.sp = 32;
+ }
+ },
+
+ /* event binded functions : */
+ // scroll on mouse down
+ mousedown: function (o, s) {
+ if (ssb.sc == 0) {
+ // new class name
+ o.cont.sb.className = 'ssb_sb ssb_sb_down';
+ ssb.asd = o.cont;
+ ssb.sc = s;
+ ssb.sp = 400;
+ ssb.arrow_scroll();
+ }
+ },
+ // on mouseMove binded event
+ onmousemove: function (e) {
+ if (!e) e = window.event;
+ // get vertical mouse position
+ ssb.mouseY = e.screenY;
+ if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;
+ },
+ // on mouseUp binded event
+ onmouseup: function (e) {
+ if (!e) e = window.event;
+ var tg = (e.target) ? e.target : e.srcElement;
+ if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();
+
+ // new class name
+ if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb';
+ document.onselectstart = '';
+ ssb.clear();
+ ssb.asd.sg = false;
+ }
+}
+
+window.onload = function () {
+ ssb.scrollbar('container'); // scrollbar initialization
+}
\ No newline at end of file
diff --git a/Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css b/Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css
new file mode 100644
index 00000000..00f7a223
--- /dev/null
+++ b/Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css
@@ -0,0 +1,78 @@
+body {
+ background: #f5fffa;
+ margin: 0;
+ padding: 0;
+}
+
+.wrapper {
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ background: #FFF;
+ border: 1px #000 solid;
+ margin: 20px auto;
+ padding: 15px;
+ position: relative;
+ width: 600px;
+ height: 600px;
+}
+
+#container {
+ width: 580px;
+ height: 580px;
+ padding: 5px;
+ margin-top: 5px;
+ overflow: auto;
+ position: relative;
+}
+
+.ssb_down {
+ background-color: #33ccaa;
+ bottom: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ border-radius: 10px;
+}
+
+.ssb_sb {
+ background-color: #22aabb;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ border-radius: 10px;
+}
+
+.ssb_sb_down {
+ background-color: #1199aa;
+}
+
+.ssb_sb_over {
+ background-color: #33bbcc;
+}
+
+.ssb_st {
+ background-color: #dedede;
+ cursor: pointer;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ border-radius: 10px;
+}
+
+.ssb_up {
+ background-color: #33ccaa;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ border-radius: 10px;
+}
+
+.parent {
+ font-family: verdana;
+ height: 100%;
+ padding: 10px;
+ position: relative;
+}
\ No newline at end of file
diff --git a/Components/Text-Animations/Neon-Spectrum-Text-Animation/index.html b/Components/Text-Animations/Neon-Spectrum-Text-Animation/index.html
new file mode 100644
index 00000000..7ddd2d33
--- /dev/null
+++ b/Components/Text-Animations/Neon-Spectrum-Text-Animation/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ Neon Spectrum Text Animation
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+