From 5a73b214a3ec0f29abe85783602cd9ebc4eb7714 Mon Sep 17 00:00:00 2001 From: Georg Hopp Date: Sun, 3 Apr 2016 12:13:39 +0200 Subject: [PATCH] more work on parallax --- app/assets/javascripts/parallax.coffee | 12 ++-- app/assets/stylesheets/welcome.scss | 90 +++++++++++++++++++++----- app/views/layouts/application.html.erb | 18 +++++- app/views/welcome/index.html.erb | 22 +++++-- 4 files changed, 108 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/parallax.coffee b/app/assets/javascripts/parallax.coffee index 37bcce0..5117d5b 100644 --- a/app/assets/javascripts/parallax.coffee +++ b/app/assets/javascripts/parallax.coffee @@ -7,17 +7,13 @@ window.App ||= {} content_top = content_left = width_delta = height_delta = 0 App.init = -> - content_top = parseFloat($('#content').css("top")) - height_delta = ($(document).height()-$(window).height())/2 - ### - window.scrollTo(width_delta, height_delta) - ### App.scroll = -> v_scroll = $(document).scrollTop() - section = Math.floor(v_scroll / 1000) - $(".background").css("top", 0) - $($(".background")[section]).css("top", (v_scroll-(section*1000))/2) + section = Math.floor(v_scroll / $(window).innerHeight()) + $($(".section")[section]).css( + "background-position", "center -" + + (v_scroll-(section*$(window).innerHeight()))/2 + "px") $(document).on "page:change", -> App.init() diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss index 0e4caef..9a68fae 100644 --- a/app/assets/stylesheets/welcome.scss +++ b/app/assets/stylesheets/welcome.scss @@ -26,40 +26,96 @@ a:visited { color: rgb(60, 130, 12); } +#header { + background: rgba(0, 0, 0, 0.7); + + position: fixed; + width: 100%; + height: 80px; + margin-top: 30px; + + z-index: 10; +} +#nav { + position: absolute; + top: 50%; + left: 80%; + transform: translate(-50%, -50%); + + width: 410px; +} +#logo a { + color: rgb(255,255,255); + + position: absolute; + left: 6%; + top: 50%; + transform: translate(0, -50%); + + text-decoration: none; + font-size: 30px; + font-family:"Meath"; + font-weight: bold; +} +#nav ul{ + display: block; + list-style: none; +} +#nav li{ + float: left; + padding-left: 21px; +} +#nav li a { + color: rgba(255,255,255,0.6); + font-size: 16px; + text-decoration: none; + font-weight: bold; +} +#nav li a:hover { + color: rgba(255,255,255,1); +} +#nav li a.active { + color: rgba(255,255,255,1); + border-bottom: 2px solid #fff; +} + #content { + position: absolute; top: 0px; left: 0px; width: 100%; + height: 100%; +} + +#section1 { + background: image_url("resized/blown.jpg") fixed; + background-position: center top; +} + +#section2,#section4 { + background-color: rgb(255,255,255); +} + +#section3 { + background: image_url("resized/beach3.jpg") fixed; + background-position: center top; } .section { position: relative; - height: 1000px; - left: 50%; - transform: translate(-50%, 0); + height: 100%; + overflow: hidden; } -.background { - position: absolute; - z-index: -1; -} + .content { position: absolute; - width: 80%; - left: 50%; - transform: translate(-50%, 0); - top: 200px; + top: 50%; height: 400px; padding: 30px; z-index: 1; } .text { - background: rgba(255, 255, 255, 0.6); - border-style: solid; - border-color: rgba(100, 190, 50, 0.6); - border-radius: 10px; - border-width: 3px; - box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6); } /* diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index efb2edf..88d2094 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -7,9 +7,21 @@ <%= csrf_meta_tags %> - + +
<%= yield %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 145cacb..94570f4 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -1,19 +1,29 @@
-
- <%= image_tag "resized/blown.jpg" %> -

About

+

+ Some other stuff here... +

+
+
+
+
+

Other

Welcome to the famous Weird Web Workers.

<% @projects.each do |project| -%>

<%= project.name %>

<% end -%>
-
-
- <%= image_tag "resized/beach3.jpg" %> +
+
+

Other

+

+ Some other stuff here... +

+
+

Other