diff --git a/app/assets/images/ICYPEES-coin.png b/app/assets/images/ICYPEES-coin.png new file mode 100644 index 00000000..e084ca81 Binary files /dev/null and b/app/assets/images/ICYPEES-coin.png differ diff --git a/app/assets/images/ICYPEES-glass.png b/app/assets/images/ICYPEES-glass.png new file mode 100644 index 00000000..848b2a7b Binary files /dev/null and b/app/assets/images/ICYPEES-glass.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e1fcb680..b31ff36a 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -17,6 +17,7 @@ // require react_ujs // require components //= require qrcode.min.js +//= require eyecandy // require react-rails-hot-loader // require_tree . @@ -28,3 +29,4 @@ $(document).ready(function(){ $('#play-buttons').load("#{request.path} #play-buttons"); }, 2000); }); + diff --git a/app/assets/javascripts/eyecandy.js b/app/assets/javascripts/eyecandy.js new file mode 100644 index 00000000..42f74c8f --- /dev/null +++ b/app/assets/javascripts/eyecandy.js @@ -0,0 +1,76 @@ +(function ($, window, undefined) { + $.fn.marqueeify = function (options) { + var settings = $.extend({ + horizontal: true, + vertical: true, + speed: 100, // In pixels per second + container: $(this).parent(), + bumpEdge: function () {} + }, options); + + return this.each(function () { + var containerWidth, containerHeight, elWidth, elHeight, move, getSizes, + $el = $(this); + + getSizes = function () { + containerWidth = settings.container.outerWidth(); + containerHeight = settings.container.outerHeight(); + elWidth = $el.outerWidth(); + elHeight = $el.outerHeight(); + }; + + move = { + right: function () { + $el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { + settings.bumpEdge(); + move.left(); + }}); + }, + left: function () { + $el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { + settings.bumpEdge(); + move.right(); + }}); + }, + down: function () { + $el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { + settings.bumpEdge(); + move.up(); + }}); + }, + up: function () { + $el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { + settings.bumpEdge(); + move.down(); + }}); + } + }; + + getSizes(); + + if (settings.horizontal) { + move.right(); + } + if (settings.vertical) { + move.down(); + } + + // Make that shit responsive! + $(window).resize( function() { + getSizes(); + }); + }); + }; +})(jQuery, window); + +$(document).ready( function() { + + $('.eyecandy').marqueeify({ + speed: 300, + bumpEdge: function () { + var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)"; + $('.marquee').css('background', newColor); + $(this)[0].speed = Math.random()*420; + } + }); +}); diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index ed803693..a90bbafe 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -102,6 +102,13 @@ header font-family: Impact, Anton, fantasy, sans-serif font-weight: lighter +.eyecandy + display: block + left: 0 + position: absolute + top: 0 + + li list-style: none diff --git a/app/views/visitors/index.html.haml b/app/views/visitors/index.html.haml index 32242b06..4bd4e107 100644 --- a/app/views/visitors/index.html.haml +++ b/app/views/visitors/index.html.haml @@ -9,3 +9,104 @@ -# = link_to 'Browse Tables', tables_path -# = link_to 'Tutorial', tutorial_path -# = link_to 'About', page_path('about') + + +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 + +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 + +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 + +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32 +.eyecandy + = image_tag "ICYPEES-glass.png", width: 32 +.eyecandy + = image_tag "ICYPEES-coin.png", width: 32