jesse/thirteen-tien-len
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

Add eyecandy bouncing coins

Browse Source
This commit is contained in:
Jesse C. Fisher 2023-04-29 15:23:24 +00:00 committed by Bort
parent 8e2cbb6146
commit d9645d990c
6 changed files with 186 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/ICYPEES-coin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 KiB

BIN
app/assets/images/ICYPEES-glass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

2
app/assets/javascripts/application.js
View File

@ -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);
});

76
app/assets/javascripts/eyecandy.js Normal file
View File

@ -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;
}
});
});

7
app/assets/stylesheets/application.css.sass
View File

@ -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

101
app/views/visitors/index.html.haml
View File

@ -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