Showing
4 changed files
with
108 additions
and
34 deletions
| ... | ... | @@ -7,17 +7,13 @@ window.App ||= {} |
| 7 | 7 | content_top = content_left = width_delta = height_delta = 0 |
| 8 | 8 | |
| 9 | 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 | 11 | App.scroll = -> |
| 17 | 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 | 18 | $(document).on "page:change", -> |
| 23 | 19 | App.init() | ... | ... |
| ... | ... | @@ -26,40 +26,96 @@ a:visited { |
| 26 | 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 | 82 | #content { |
| 83 | + position: absolute; | |
| 30 | 84 | top: 0px; |
| 31 | 85 | left: 0px; |
| 32 | 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 | 104 | .section { |
| 36 | 105 | position: relative; |
| 37 | - height: 1000px; | |
| 38 | - left: 50%; | |
| 39 | - transform: translate(-50%, 0); | |
| 106 | + height: 100%; | |
| 107 | + | |
| 40 | 108 | overflow: hidden; |
| 41 | 109 | } |
| 42 | -.background { | |
| 43 | - position: absolute; | |
| 44 | - z-index: -1; | |
| 45 | -} | |
| 110 | + | |
| 46 | 111 | .content { |
| 47 | 112 | position: absolute; |
| 48 | - width: 80%; | |
| 49 | - left: 50%; | |
| 50 | - transform: translate(-50%, 0); | |
| 51 | - top: 200px; | |
| 113 | + top: 50%; | |
| 52 | 114 | height: 400px; |
| 53 | 115 | padding: 30px; |
| 54 | 116 | z-index: 1; |
| 55 | 117 | } |
| 56 | 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 | 7 | <%= csrf_meta_tags %> |
| 8 | 8 | </head> |
| 9 | 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 | 25 | <div id="content"> |
| 14 | 26 | <%= yield %> |
| 15 | 27 | </div> | ... | ... |
| 1 | 1 | <div id="section1" class="section"> |
| 2 | - <div class="background"> | |
| 3 | - <%= image_tag "resized/blown.jpg" %> | |
| 4 | - </div> | |
| 5 | 2 | <div class="content text"> |
| 6 | 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 | 12 | <h3>Welcome to the famous <i>Weird Web Workers</i>.</h3> |
| 8 | 13 | <% @projects.each do |project| -%> |
| 9 | 14 | <p><%= project.name %></p> |
| 10 | 15 | <% end -%> |
| 11 | 16 | </div> |
| 12 | 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 | 24 | </div> |
| 25 | +</div> | |
| 26 | +<div id="section4" class="section"> | |
| 17 | 27 | <div class="content text"> |
| 18 | 28 | <h1>Other</h1> |
| 19 | 29 | <p> | ... | ... |
Please
register
or
login
to post a comment