first version of working marquee

zinas · May 12, 2014 · 412ba56 · 412ba56
1 parent 7c48917
commit 412ba56
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -66,5 +66,13 @@ The infamous spacer.gif at your disposal
 ```
 
 ### 90s Marquee
-_Not implemented yet_
+The all time favourite marquee
 
+#####Things that you can learn by reading the code
+- Everything included in the 90s Welcome element
+- Some weird shit to make marquee working without spending too much time on it
+
+#####Usage
+```html
+<nineties-marquee>Welcome to the 90s!</nineties-marquee>
+```
diff --git a/nineties-marquee/index.html b/nineties-marquee/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>90s Marquee</title>
+
+ <!-- Importing Custom Elements -->
+ <link rel="import" href="nineties-marquee.html">
+
+ <style>
+ :unresolved {
+ display: none !important;
+ }
+
+ nineties-marquee {
+ color: red;
+ font-size: 30px;
+ }
+ </style>
+</head>
+<body>
+
+ <!-- Using Custom Elements -->
+ <nineties-marquee>Hello there, Nikos!</nineties-marquee>
+</body>
+</html>
diff --git a/nineties-marquee/nineties-marquee.html b/nineties-marquee/nineties-marquee.html
@@ -0,0 +1,34 @@
+<style>
+ nineties-marquee {
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+</style>
+
+<script>
+(function () {
+ var Marquee = Object.create(HTMLElement.prototype);
+
+ Marquee.createdCallback = function () {
+ var s = document.createElement('span'),
+ div = document.createElement('div'),
+ l;
+ s.innerHTML = this.innerHTML;
+ document.querySelector('body').appendChild(div);
+ div.appendChild(s);
+ l = s.offsetWidth;
+ document.querySelector('body').removeChild(div);
+
+ requestAnimationFrame(move.bind(this));
+
+ function move() {
+ var val = this.style.textIndent.replace(/[^-\d\.]/g, '');
+ this.style.textIndent = (-val<=l?val-1:this.offsetWidth)+"px";
+ requestAnimationFrame(move.bind(this));
+ }
+ }
+
+ document.registerElement('nineties-marquee', {prototype: Marquee});
+})();
+</script>