Skip to content

Hero section parallax #1091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jan 7, 2021
Merged

Hero section parallax #1091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7fd9fff
Hero section parallax
ww2497 Jan 5, 2021
02c9c80
Update package-lock.json
ww2497 Jan 5, 2021
8d3bf06
Update dependencies
ww2497 Jan 5, 2021
219422d
Merge branch 'develop' into bh-1071
ww2497 Jan 6, 2021
46cdf2c
Tweak parallax values for now
peterkos Jan 7, 2021
2d4341f
Fix zindex on hero content; reorder desk container
peterkos Jan 7, 2021
e50ad3b
Fix shapes div disappearing
peterkos Jan 7, 2021
26bb2b0
Fixed hero text clipping over shelf, disabled mobile parallax
ww2497 Jan 7, 2021
5bea630
Removed rellax class from the shelf
ww2497 Jan 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,8 @@
</div>
</nav>
<section id="hero" class="section-pad-left">
<div id="desk-container">
<div id="desk"></div>
<div id="wire"></div>
</div>
<div id="shelf"></div>
<div id="shapes"></div>
<div id="hero-content">
<div id="shapes" class="rellax" data-rellax-speed="0" data-rellax-desktop-speed="-10"></div>
<div id="hero-content" class="rellax" data-rellax-speed="0" data-rellax-desktop-speed="-8">
<!-- Background images due to easier positioning. -->
<div id="hero-text">
<p id="bh7">BRICKHACK 7</p>
Expand All @@ -59,6 +54,11 @@
<a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
</div>
</div>
<div id="desk-container" class="rellax" data-rellax-speed="0" data-rellax-desktop-speed="-8">
<div id="desk"></div>
<div id="wire"></div>
</div>
<div id="shelf"></div>
</section>
<section id="hackathon" class="section-pad-top">
<div class="carousel">
Expand Down
5 changes: 5 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ $(document).ready(function() {
localStorage.setItem('deskIndex', deskIndex + 1);
});

// Parallax functionality
import Rellax from 'rellax';
var rellax = new Rellax('.rellax', {
breakpoints:[0, 0, 900],
});

// Slick-carousel
import $ from 'jquery'
Expand Down
23 changes: 17 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"dependencies": {
"active-menu-link": "^1.1.8",
"jquery": "^3.5.1",
"rellax": "^1.12.1",
"slick-carousel": "^1.8.1"
}
}
9 changes: 4 additions & 5 deletions sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ $event-count: 6;
// Transition all elements on the screen
// (except FAQ panel, which already has a transition,
// and the section days, which need no transition.)
&:not(.link):not(.panel):not(#days):not(.number):not(#desk):not(#wire):not(.logo img) {
&:not(.link):not(.panel):not(#days):not(.number):not(#desk):not(#wire):not(.rellax):not(.logo img) {
transition: all 1s ease;
}

Expand Down Expand Up @@ -181,6 +181,8 @@ nav {
height: calc(100vh - #{$nav-height});
margin-top: $nav-height;
display: flex;
z-index: 4;
position: relative;
}

#hero-text {
Expand Down Expand Up @@ -231,7 +233,6 @@ nav {
height: 100%;
width: 100%;
background-position: bottom right;
background-attachment: fixed;
}

#desk {
Expand All @@ -258,7 +259,7 @@ nav {
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
z-index: 2;
z-index: 4;
}

#shapes {
Expand All @@ -270,7 +271,6 @@ nav {
background-image: url("../assets/shapes.svg");
background-repeat: no-repeat;
background-position: 100% 30%;
background-attachment: fixed;
background-size: 900px;
z-index: 1;
}
Expand Down Expand Up @@ -1067,7 +1067,6 @@ footer {
right: -100px;

#desk, #wire {
background-attachment: scroll;
background-position: right bottom;
}
}
Expand Down