Showing
4 changed files
with
108 additions
and
34 deletions
| @@ -7,17 +7,13 @@ window.App ||= {} | @@ -7,17 +7,13 @@ window.App ||= {} | ||
| 7 | content_top = content_left = width_delta = height_delta = 0 | 7 | content_top = content_left = width_delta = height_delta = 0 |
| 8 | 8 | ||
| 9 | App.init = -> | 9 | App.init = -> |
| 10 | - content_top = parseFloat($('#content').css("top")) | ||
| 11 | - height_delta = ($(document).height()-$(window).height())/2 | ||
| 12 | - ### | ||
| 13 | - window.scrollTo(width_delta, height_delta) | ||
| 14 | - ### | ||
| 15 | 10 | ||
| 16 | App.scroll = -> | 11 | App.scroll = -> |
| 17 | v_scroll = $(document).scrollTop() | 12 | v_scroll = $(document).scrollTop() |
| 18 | - section = Math.floor(v_scroll / 1000) | ||
| 19 | - $(".background").css("top", 0) | ||
| 20 | - $($(".background")[section]).css("top", (v_scroll-(section*1000))/2) | 13 | + section = Math.floor(v_scroll / $(window).innerHeight()) |
| 14 | + $($(".section")[section]).css( | ||
| 15 | + "background-position", "center -" + | ||
| 16 | + (v_scroll-(section*$(window).innerHeight()))/2 + "px") | ||
| 21 | 17 | ||
| 22 | $(document).on "page:change", -> | 18 | $(document).on "page:change", -> |
| 23 | App.init() | 19 | App.init() |
| @@ -26,40 +26,96 @@ a:visited { | @@ -26,40 +26,96 @@ a:visited { | ||
| 26 | color: rgb(60, 130, 12); | 26 | color: rgb(60, 130, 12); |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | +#header { | ||
| 30 | + background: rgba(0, 0, 0, 0.7); | ||
| 31 | + | ||
| 32 | + position: fixed; | ||
| 33 | + width: 100%; | ||
| 34 | + height: 80px; | ||
| 35 | + margin-top: 30px; | ||
| 36 | + | ||
| 37 | + z-index: 10; | ||
| 38 | +} | ||
| 39 | +#nav { | ||
| 40 | + position: absolute; | ||
| 41 | + top: 50%; | ||
| 42 | + left: 80%; | ||
| 43 | + transform: translate(-50%, -50%); | ||
| 44 | + | ||
| 45 | + width: 410px; | ||
| 46 | +} | ||
| 47 | +#logo a { | ||
| 48 | + color: rgb(255,255,255); | ||
| 49 | + | ||
| 50 | + position: absolute; | ||
| 51 | + left: 6%; | ||
| 52 | + top: 50%; | ||
| 53 | + transform: translate(0, -50%); | ||
| 54 | + | ||
| 55 | + text-decoration: none; | ||
| 56 | + font-size: 30px; | ||
| 57 | + font-family:"Meath"; | ||
| 58 | + font-weight: bold; | ||
| 59 | +} | ||
| 60 | +#nav ul{ | ||
| 61 | + display: block; | ||
| 62 | + list-style: none; | ||
| 63 | +} | ||
| 64 | +#nav li{ | ||
| 65 | + float: left; | ||
| 66 | + padding-left: 21px; | ||
| 67 | +} | ||
| 68 | +#nav li a { | ||
| 69 | + color: rgba(255,255,255,0.6); | ||
| 70 | + font-size: 16px; | ||
| 71 | + text-decoration: none; | ||
| 72 | + font-weight: bold; | ||
| 73 | +} | ||
| 74 | +#nav li a:hover { | ||
| 75 | + color: rgba(255,255,255,1); | ||
| 76 | +} | ||
| 77 | +#nav li a.active { | ||
| 78 | + color: rgba(255,255,255,1); | ||
| 79 | + border-bottom: 2px solid #fff; | ||
| 80 | +} | ||
| 81 | + | ||
| 29 | #content { | 82 | #content { |
| 83 | + position: absolute; | ||
| 30 | top: 0px; | 84 | top: 0px; |
| 31 | left: 0px; | 85 | left: 0px; |
| 32 | width: 100%; | 86 | width: 100%; |
| 87 | + height: 100%; | ||
| 88 | +} | ||
| 89 | + | ||
| 90 | +#section1 { | ||
| 91 | + background: image_url("resized/blown.jpg") fixed; | ||
| 92 | + background-position: center top; | ||
| 93 | +} | ||
| 94 | + | ||
| 95 | +#section2,#section4 { | ||
| 96 | + background-color: rgb(255,255,255); | ||
| 97 | +} | ||
| 98 | + | ||
| 99 | +#section3 { | ||
| 100 | + background: image_url("resized/beach3.jpg") fixed; | ||
| 101 | + background-position: center top; | ||
| 33 | } | 102 | } |
| 34 | 103 | ||
| 35 | .section { | 104 | .section { |
| 36 | position: relative; | 105 | position: relative; |
| 37 | - height: 1000px; | ||
| 38 | - left: 50%; | ||
| 39 | - transform: translate(-50%, 0); | 106 | + height: 100%; |
| 107 | + | ||
| 40 | overflow: hidden; | 108 | overflow: hidden; |
| 41 | } | 109 | } |
| 42 | -.background { | ||
| 43 | - position: absolute; | ||
| 44 | - z-index: -1; | ||
| 45 | -} | 110 | + |
| 46 | .content { | 111 | .content { |
| 47 | position: absolute; | 112 | position: absolute; |
| 48 | - width: 80%; | ||
| 49 | - left: 50%; | ||
| 50 | - transform: translate(-50%, 0); | ||
| 51 | - top: 200px; | 113 | + top: 50%; |
| 52 | height: 400px; | 114 | height: 400px; |
| 53 | padding: 30px; | 115 | padding: 30px; |
| 54 | z-index: 1; | 116 | z-index: 1; |
| 55 | } | 117 | } |
| 56 | .text { | 118 | .text { |
| 57 | - background: rgba(255, 255, 255, 0.6); | ||
| 58 | - border-style: solid; | ||
| 59 | - border-color: rgba(100, 190, 50, 0.6); | ||
| 60 | - border-radius: 10px; | ||
| 61 | - border-width: 3px; | ||
| 62 | - box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6); | ||
| 63 | } | 119 | } |
| 64 | 120 | ||
| 65 | /* | 121 | /* |
| @@ -7,9 +7,21 @@ | @@ -7,9 +7,21 @@ | ||
| 7 | <%= csrf_meta_tags %> | 7 | <%= csrf_meta_tags %> |
| 8 | </head> | 8 | </head> |
| 9 | <body> | 9 | <body> |
| 10 | - <!--<div id="title"> | ||
| 11 | - <h1>Weird Web Workers</h1> | ||
| 12 | - </div>--> | 10 | + <header id="header"> |
| 11 | + <div class="header-content"> | ||
| 12 | + <div id="logo"><a href=""> WEIRD WEB WORKERS </a></div> | ||
| 13 | + <nav id="nav"> | ||
| 14 | + <ul> | ||
| 15 | + <li><a href="#slide1" class="active" title="Next Section" >Slide 1</a></li> | ||
| 16 | + <li><a href="#slide2" title="Next Section">Slide 2</a></li> | ||
| 17 | + <li><a href="#slide3" title="Next Section">Slide 3</a></li> | ||
| 18 | + <li><a href="#slide4" title="Next Section">Slide 4</a></li> | ||
| 19 | + <li><a href="#slide5" title="Next Section">Slide 5</a></li> | ||
| 20 | + </ul> | ||
| 21 | + </nav> | ||
| 22 | + </div> | ||
| 23 | + </header> | ||
| 24 | + | ||
| 13 | <div id="content"> | 25 | <div id="content"> |
| 14 | <%= yield %> | 26 | <%= yield %> |
| 15 | </div> | 27 | </div> |
| 1 | <div id="section1" class="section"> | 1 | <div id="section1" class="section"> |
| 2 | - <div class="background"> | ||
| 3 | - <%= image_tag "resized/blown.jpg" %> | ||
| 4 | - </div> | ||
| 5 | <div class="content text"> | 2 | <div class="content text"> |
| 6 | <h1>About</h1> | 3 | <h1>About</h1> |
| 4 | + <p> | ||
| 5 | + Some other stuff here... | ||
| 6 | + </p> | ||
| 7 | + </div> | ||
| 8 | +</div> | ||
| 9 | +<div id="section2" class="section"> | ||
| 10 | + <div class="content text"> | ||
| 11 | + <h1>Other</h1> | ||
| 7 | <h3>Welcome to the famous <i>Weird Web Workers</i>.</h3> | 12 | <h3>Welcome to the famous <i>Weird Web Workers</i>.</h3> |
| 8 | <% @projects.each do |project| -%> | 13 | <% @projects.each do |project| -%> |
| 9 | <p><%= project.name %></p> | 14 | <p><%= project.name %></p> |
| 10 | <% end -%> | 15 | <% end -%> |
| 11 | </div> | 16 | </div> |
| 12 | </div> | 17 | </div> |
| 13 | -<div id="section2" class="section"> | ||
| 14 | - <div class="background"> | ||
| 15 | - <%= image_tag "resized/beach3.jpg" %> | 18 | +<div id="section3" class="section"> |
| 19 | + <div class="content text"> | ||
| 20 | + <h1>Other</h1> | ||
| 21 | + <p> | ||
| 22 | + Some other stuff here... | ||
| 23 | + </p> | ||
| 16 | </div> | 24 | </div> |
| 25 | +</div> | ||
| 26 | +<div id="section4" class="section"> | ||
| 17 | <div class="content text"> | 27 | <div class="content text"> |
| 18 | <h1>Other</h1> | 28 | <h1>Other</h1> |
| 19 | <p> | 29 | <p> |
Please
register
or
login
to post a comment