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:
Jesse C. Fisher 2023-04-30 10:14:08 +00:00
parent 56e447879e
commit 8c91245248
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 'coffee-rails' #, '~> 4.0.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder' #, '~> 2.0'
gem 'sdoc', group: :doc #, '~> 0.4.0'

3
Gemfile.lock
View File

@ -218,6 +218,8 @@ GEM
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
railties (>= 3.2.16)
launchy (2.5.0)
addressable (~> 2.7)
listen (3.7.0)
@ -464,6 +466,7 @@ DEPENDENCIES
hub
jbuilder
jquery-rails
jquery-ui-rails
launchy
net-ssh (>= 4.0.0)
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.
//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks
// require react

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

@ -5,6 +5,7 @@
vertical: true,
speed: 100, // In pixels per second
color: "#00ffff",
zindex: 0,
container: $(this).parent(),
bumpEdge: function () {}
}, options);
@ -22,24 +23,28 @@
move = {
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 () {
settings.bumpEdge();
move.left();
}});
},
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 () {
settings.bumpEdge();
move.right();
}});
},
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 () {
settings.bumpEdge();
move.up();
}});
},
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 () {
settings.bumpEdge();
move.down();
@ -66,6 +71,12 @@
$(document).ready( function() {
$(".eyecandy").bind('my-event', function(event) {
alert(event);
});
$("#mySecondDiv").trigger('my-event', [1, 2]);
$('.eyecandy').on( "click", function() {
$(this).toggleClass("clicked");
// $(this).marqueeify({
@ -78,19 +89,29 @@ $(document).ready( function() {
// });
} );
$('.eyecandy').marqueeify({
$('.eyecandy').marqueeify({
speed: 300,
self: this,
bumpEdge: function () {
// svg bgcolor
// var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
var newColor = Math.floor(Math.random()*16777215).toString(16);
// console.log($(this)[0].self);
console.log($(this)[0].color);
console.log($(this)[0].self);
// console.log($(this)[0].color);
// console.log($(this)[0].self);
// .css("background-color", "#" + newColor);
//.css("background-color", "#00ffff");
$(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
flex: 1 1 auto
text-align: center
z-index: 10
cursor: pointer
h1
font-size: 10vmin
color: #111
@ -79,13 +81,20 @@ header
padding: 5vmin
margin: 0
border: 3px solid black
background-color: #33cc3399
#main-menu
flex: 1 1 auto
font-size: 5vmin
display: flex
flex-direction: column
z-index: 10
background: #00ff33
background: #00000066
border-radius: 100px 100px 0 0
padding: 2em
a
display:inline
background: green
margin: 4px 0 4px
padding: 8px
@ -108,11 +117,17 @@ header
position: absolute
top: 0
// background-color: hotpink
border-radius: 300px
transition: background-color 0.2s, box-shadow 0.2s
img
width: 64px
width: 4rem
cursor: pointer
&:hover
background-color: gold
box-shadow: 1px 1px 8px 4px gold
&.clicked
// box-shadow: 1px 1px 4px 4px hotpink
border-radius: 300px
background-color: #00ffff
box-shadow: 0px 0px 8px 4px #00ffff
li

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

@ -11,102 +11,9 @@
-# = 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
- 10.times do |i|
.eyecandy
= image_tag "ICYPEES-glass.png"
- 20.times do |i|
.eyecandy
= image_tag "ICYPEES-coin.png"