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

Improve home page eyecandy

Browse Source
This commit is contained in:
Bort 2023-04-30 10:14:08 +00:00
parent e1e7ae2848
commit 4e389ccdd9
7 changed files with 64 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@ -7,6 +7,7 @@ gem 'sass-rails' #, '~> 4.0.3'
gem 'uglifier' #, '>= 1.3.0' gem 'uglifier' #, '>= 1.3.0'
gem 'coffee-rails' #, '~> 4.0.0' gem 'coffee-rails' #, '~> 4.0.0'
gem 'jquery-rails' gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks' gem 'turbolinks'
gem 'jbuilder' #, '~> 2.0' gem 'jbuilder' #, '~> 2.0'
gem 'sdoc', group: :doc #, '~> 0.4.0' gem 'sdoc', group: :doc #, '~> 0.4.0'

3
Gemfile.lock
View File

@ -218,6 +218,8 @@ GEM
rails-dom-testing (>= 1, < 3) rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0) railties (>= 4.2.0)
thor (>= 0.14, < 2.0) thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
launchy (2.5.0) launchy (2.5.0)
addressable (~> 2.7) addressable (~> 2.7)
listen (3.7.0) listen (3.7.0)
@ -464,6 +466,7 @@ DEPENDENCIES
hub hub
jbuilder jbuilder
jquery-rails jquery-rails
jquery-ui-rails
launchy launchy
net-ssh (>= 4.0.0) net-ssh (>= 4.0.0)
parallel_tests parallel_tests

10
app/assets/images/icp-coin.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

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

@ -11,6 +11,7 @@
// about supported directives. // about supported directives.
// //
//= require jquery //= require jquery
//= require jquery-ui
//= require jquery_ujs //= require jquery_ujs
//= require turbolinks //= require turbolinks
// require react // require react

29
app/assets/javascripts/eyecandy.js
View File

@ -5,6 +5,7 @@
vertical: true, vertical: true,
speed: 100, // In pixels per second speed: 100, // In pixels per second
color: "#00ffff", color: "#00ffff",
zindex: 0,
container: $(this).parent(), container: $(this).parent(),
bumpEdge: function () {} bumpEdge: function () {}
}, options); }, options);
@ -22,24 +23,28 @@
move = { move = {
right: function () { right: function () {
$el.css("z-index", Math.round(settings.zindex));
$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { $el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge(); settings.bumpEdge();
move.left(); move.left();
}}); }});
}, },
left: function () { left: function () {
$el.css("z-index", Math.round(settings.zindex));
$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { $el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge(); settings.bumpEdge();
move.right(); move.right();
}}); }});
}, },
down: function () { down: function () {
$el.css("z-index", Math.round(settings.zindex));
$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { $el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge(); settings.bumpEdge();
move.up(); move.up();
}}); }});
}, },
up: function () { up: function () {
$el.css("z-index", Math.round(settings.zindex));
$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () { $el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge(); settings.bumpEdge();
move.down(); move.down();
@ -66,6 +71,12 @@
$(document).ready( function() { $(document).ready( function() {
$(".eyecandy").bind('my-event', function(event) {
alert(event);
});
$("#mySecondDiv").trigger('my-event', [1, 2]);
$('.eyecandy').on( "click", function() { $('.eyecandy').on( "click", function() {
$(this).toggleClass("clicked"); $(this).toggleClass("clicked");
// $(this).marqueeify({ // $(this).marqueeify({
@ -78,19 +89,29 @@ $(document).ready( function() {
// }); // });
} ); } );
$('.eyecandy').marqueeify({ $('.eyecandy').marqueeify({
speed: 300, speed: 300,
self: this,
bumpEdge: function () { bumpEdge: function () {
// svg bgcolor // svg bgcolor
// var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)"; // var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
var newColor = Math.floor(Math.random()*16777215).toString(16); var newColor = Math.floor(Math.random()*16777215).toString(16);
// console.log($(this)[0].self); // console.log($(this)[0].self);
console.log($(this)[0].color); // console.log($(this)[0].color);
console.log($(this)[0].self); // console.log($(this)[0].self);
// .css("background-color", "#" + newColor); // .css("background-color", "#" + newColor);
//.css("background-color", "#00ffff"); //.css("background-color", "#00ffff");
$(this)[0].speed = Math.random()*420; $(this)[0].speed = Math.random()*420;
$(this)[0].zindex = Math.random()*20;
// .parent.css("display", "none");
// console.log(this);
// delete this;
} }
}); });
// $( ".eyecandy" ).draggable({
// addClasses: true
// });
$("#home-headline").draggable({
addClasses: true
});
}); });

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

@ -72,6 +72,8 @@ header
margin-top: 6em margin-top: 6em
flex: 1 1 auto flex: 1 1 auto
text-align: center text-align: center
z-index: 10
cursor: pointer
h1 h1
font-size: 10vmin font-size: 10vmin
color: #111 color: #111
@ -79,13 +81,20 @@ header
padding: 5vmin padding: 5vmin
margin: 0 margin: 0
border: 3px solid black border: 3px solid black
background-color: #33cc3399
#main-menu #main-menu
flex: 1 1 auto flex: 1 1 auto
font-size: 5vmin font-size: 5vmin
display: flex display: flex
flex-direction: column flex-direction: column
z-index: 10
background: #00ff33
background: #00000066
border-radius: 100px 100px 0 0
padding: 2em
a a
display:inline
background: green background: green
margin: 4px 0 4px margin: 4px 0 4px
padding: 8px padding: 8px
@ -108,11 +117,17 @@ header
position: absolute position: absolute
top: 0 top: 0
// background-color: hotpink // background-color: hotpink
border-radius: 300px
transition: background-color 0.2s, box-shadow 0.2s
img img
width: 64px width: 4rem
cursor: pointer
&:hover
background-color: gold
box-shadow: 1px 1px 8px 4px gold
&.clicked &.clicked
// box-shadow: 1px 1px 4px 4px hotpink background-color: #00ffff
border-radius: 300px box-shadow: 0px 0px 8px 4px #00ffff
li li

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

@ -11,102 +11,9 @@
-# = link_to 'About', page_path('about') -# = link_to 'About', page_path('about')
.eyecandy - 10.times do |i|
= image_tag "ICYPEES-coin.png", width: 32 .eyecandy
.eyecandy = image_tag "ICYPEES-glass.png"
= image_tag "ICYPEES-coin.png", width: 32 - 20.times do |i|
.eyecandy .eyecandy
= image_tag "ICYPEES-coin.png", width: 32 = image_tag "ICYPEES-coin.png"
.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