ghopp
/
weird-web-workers.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

more work on parallax

master
Georg Hopp 10 years ago
parent
d6b91da86c
commit
5a73b214a3
4 changed files with 108 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      app/assets/javascripts/parallax.coffee
  2. 90
      app/assets/stylesheets/welcome.scss
  3. 18
      app/views/layouts/application.html.erb
  4. 22
      app/views/welcome/index.html.erb

12
app/assets/javascripts/parallax.coffee
View File

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

90
app/assets/stylesheets/welcome.scss
View File

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

18
app/views/layouts/application.html.erb
View File

@ -7,9 +7,21 @@
<%= csrf_meta_tags %>
</head>
<body>
<!--<div id="title">
<h1>Weird Web Workers</h1>
</div>-->
<header id="header">
<div class="header-content">
<div id="logo"><a href=""> WEIRD WEB WORKERS </a></div>
<nav id="nav">
<ul>
<li><a href="#slide1" class="active" title="Next Section" >Slide 1</a></li>
<li><a href="#slide2" title="Next Section">Slide 2</a></li>
<li><a href="#slide3" title="Next Section">Slide 3</a></li>
<li><a href="#slide4" title="Next Section">Slide 4</a></li>
<li><a href="#slide5" title="Next Section">Slide 5</a></li>
</ul>
</nav>
</div>
</header>
<div id="content">
<%= yield %>
</div>

22
app/views/welcome/index.html.erb
View File

@ -1,19 +1,29 @@
<div id="section1" class="section">
<div class="background">
<%= image_tag "resized/blown.jpg" %>
</div>
<div class="content text">
<h1>About</h1>
<p>
Some other stuff here...
</p>
</div>
</div>
<div id="section2" class="section">
<div class="content text">
<h1>Other</h1>
<h3>Welcome to the famous <i>Weird Web Workers</i>.</h3>
<% @projects.each do |project| -%>
<p><%= project.name %></p>
<% end -%>
</div>
</div>
<div id="section2" class="section">
<div class="background">
<%= image_tag "resized/beach3.jpg" %>
<div id="section3" class="section">
<div class="content text">
<h1>Other</h1>
<p>
Some other stuff here...
</p>
</div>
</div>
<div id="section4" class="section">
<div class="content text">
<h1>Other</h1>
<p>

Write Preview
Loading…
Cancel
Save