Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
  • 2 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 55 additions and 45 deletions.
  1. +5 −5 css/hackweek.css
  2. +26 −23 index.html
  3. +24 −17 js/hackweek.js
View
10 css/hackweek.css
@@ -183,7 +183,7 @@ li {
float: left;
margin-top: 110px;
}
-#projects{
+#people{
background-color: #000;
background: url('../images/projects-thumbs.jpg');
background-size: 100% auto;
@@ -276,7 +276,7 @@ li {
font-size: 30px;
color: #00843e;
}
-#join{
+#projects{
background: rgb(215, 215, 215);
background: -o-radial-gradient(rgb(240, 240, 240), rgb(220, 220, 220));
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(220, 220, 220));
@@ -285,7 +285,7 @@ li {
z-index: 40;
position: relative;
}
-#join-title{
+#projects-title{
margin: 0 auto;
padding-top: 110px;
font-family: 'Droid Sans', sans-serif;
@@ -293,7 +293,7 @@ li {
font-size: 35px;
text-align: center;
}
-#join-call-to-action{
+#projects-call-to-action{
position: absolute;
background-color: #9cdaf0;
height: 25%;
@@ -309,7 +309,7 @@ li {
font-weight: bold;
padding-top: 20px;
}
-#join-unlock{
+#projects-unlock{
margin: 0 auto;
text-align: center;
padding-top: 80px;
View
49 index.html
@@ -9,19 +9,18 @@
<body>
<div id="navigation">
<li id="start-link" class="logo">
-
</li>
<li id="what-is-link">
what is hack week?
</li>
- <li id="projects-link">
- projects
- </li>
<li id="agenda-link">
agenda
</li>
- <li id="join-link">
- join
+ <li id="projects-link">
+ projects
+ </li>
+ <li id="people-link">
+ people
</li>
<li id="where-link">
where?
@@ -79,16 +78,7 @@
</div>
</div>
</div>
- <div id="projects" class="page-size">
- <div class="project-instructions">
- <div class="text-project-box">
- Discover projects<br>made by <span class="cut-text">people</span><br>real <span class="bolder">HACKERS</span>
- <div id="project-info">
- rollover the grid
- </div>
- </div>
- </div>
- </div>
+
<div id="agenda" class="page-size">
<div id="agenda-year">
April 2013
@@ -175,17 +165,30 @@
</div>
</div>
</div>
- <div id="join" class="page-size">
- <div id="join-title">
- We will be using Github to track your ideas and coordinate<br>with others that might want join a project.
+
+ <div id="projects" class="page-size">
+ <div id="projects-title">
+ We will be using Github to track your ideas and coordinate<br>with others that might want join a project.
</div>
- <div id="join-unlock">
- <img src="images/unlock.png">
+ <div id="projects-unlock">
+ <img src="images/unlock.png">
</div>
- <div id="join-call-to-action">
- Unlock your ideas
+ <div id="projects-call-to-action">
+ Unlock your ideas
+ </div>
+ </div>
+
+ <div id="people" class="page-size">
+ <div class="project-instructions">
+ <div class="text-project-box">
+ Discover projects<br>made by <span class="cut-text">people</span><br>real <span class="bolder">HACKERS</span>
+ <div id="project-info">
+ rollover the grid
+ </div>
+ </div>
</div>
</div>
+
<div id="where" class="page-size">
<div id="where-title">
<span class="claim-where">SUSE Hack week is happening</span>
View
41 js/hackweek.js
@@ -12,9 +12,9 @@ $(function () {
}, 1000);
})
- $("#projects-link").click(function () {
+ $("#people-link").click(function () {
$('html, body').animate({
- scrollTop: $("#projects").offset().top
+ scrollTop: $("#people").offset().top
}, 1000);
})
@@ -24,9 +24,9 @@ $(function () {
}, 1000);
})
- $("#join-link").click(function () {
+ $("#projects-link").click(function () {
$('html, body').animate({
- scrollTop: $("#join").offset().top
+ scrollTop: $("#projects").offset().top
}, 1000);
})
@@ -88,27 +88,34 @@ $(function () {
});
}
+ /* people page text scroll animation */
+ if ($(window).scrollTop() > $('#people').position().top - $('#people').height() &&
+ $(window).scrollTop() < $('#people').position().top + 2 * $('#people').height()) {
+ var percent_scrolled_out = Math.abs(($(window).scrollTop() - $('#people').position().top) / $('#people').height())
+ $('.project-instructions').css({'opacity': 1 - percent_scrolled_out * 3})
+ }
+
/* where page text scroll animation */
- if ($(window).scrollTop() > $('#join').position().top) {
- var percent_scrolled_out = -($(window).scrollTop() - $('#where').position().top) / $('#where').height()
+ if ($(window).scrollTop() > $('#where').position().top - $('#where').height()) {
+ var percent_scrolled_out = Math.abs(($(window).scrollTop() - $('#where').position().top) / $('#where').height())
$('#where-title').css({'opacity': 1 - percent_scrolled_out/2,
right: percent_scrolled_out * -500})
}
/* set active page in navigation menu */
- if ($(window).scrollTop() > $('#join').position().top + $('#join').height() / 2) {
+ if ($(window).scrollTop() > $('#where').position().top - $('#where').height() / 2) {
$('#navigation li').removeClass('active')
$('#where-link').addClass('active')
- } else if ($(window).scrollTop() > $('#agenda').position().top + $('#agenda').height() / 2) {
- $('#navigation li').removeClass('active')
- $('#join-link').addClass('active')
- } else if ($(window).scrollTop() > $('#projects').position().top + $('#projects').height() / 2) {
+ } else if ($(window).scrollTop() > $('#people').position().top - $('#people').height() / 2) {
$('#navigation li').removeClass('active')
- $('#agenda-link').addClass('active')
- } else if ($(window).scrollTop() > $('#what-is').position().top + $('#what-is').height() / 2) {
+ $('#people-link').addClass('active')
+ } else if ($(window).scrollTop() > $('#projects').position().top - $('#projects').height() / 2) {
$('#navigation li').removeClass('active')
$('#projects-link').addClass('active')
- } else if ($(window).scrollTop() > $('#start').position().top + $('#start').height() / 2) {
+ } else if ($(window).scrollTop() > $('#agenda').position().top - $('#agenda').height() / 2) {
+ $('#navigation li').removeClass('active')
+ $('#agenda-link').addClass('active')
+ } else if ($(window).scrollTop() > $('#what-is-link').position().top - $('#what-is-link').height() / 2) {
$('#navigation li').removeClass('active')
$('#what-is-link').addClass('active')
}
@@ -116,12 +123,12 @@ $(function () {
/* invert navigation color */
$('#navigation li').each(function( index ) {
$(this).removeClass('invert')
- if (($(this).position().top + $(this).height() > $("#projects").position().top - $(window).scrollTop()) &&
- ($(this).position().top + $(this).height() < $("#agenda").position().top - $(window).scrollTop())) {
+ if (($(this).position().top + $(this).height() > $("#people").position().top - $(window).scrollTop()) &&
+ ($(this).position().top + $(this).height() < $("#people").position().top - $(window).scrollTop() + $('#people').height())) {
$(this).addClass('invert')
}
if (($(this).position().top + $(this).height() > $("#what-is").position().top - $(window).scrollTop()) &&
- ($(this).position().top + $(this).height() < $("#agenda").position().top - $(window).scrollTop())) {
+ ($(this).position().top + $(this).height() < $("#what-is").position().top - $(window).scrollTop() + $('#what-is').height())) {
$(this).addClass('invert')
}
});

No commit comments for this range

Something went wrong with that request. Please try again.