biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-06-29 18:30:47 +00:00
Code Issues Projects Releases Wiki Activity

sticky header - lazyload - navbar - floatingpoints

Browse Source
This commit is contained in:
Tancre
2020-10-22 00:00:04 +02:00
parent 9d06322a82
commit 5d4331954f
19 changed files with 294 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/js/App.js
View File

@ -1,3 +1,9 @@
import $ from 'jquery';
import MobileMenu from './modules/MobileMenu';
import RevealOnScroll from './modules/RevealOnScroll';
import StickyHeader from './modules/StickyHeader';
var mobileMenu = new MobileMenu();
var mobileMenu = new MobileMenu();
new RevealOnScroll($(".how-it-works-1"), "79%");
new RevealOnScroll($(".how-it-works-2, .how-it-works-3"), "90%");
var stickyHeader = new StickyHeader();

3
app/assets/js/Vendor.js
View File

@ -1 +1,2 @@
import '../temp/modernizr';
// import '../temp/modernizr';
import 'lazysizes';

31
app/assets/js/modules/RevealOnScroll.js Normal file
View File

@ -0,0 +1,31 @@
import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
class RevealOnScroll {
constructor(els, offset){
this.itemsToReveal = els;
this.offsetPercentage = offset;
this.hideInitially();
this.createWaypoints();
}
hideInitially() {
this.itemsToReveal.addClass("reveal-item");
}
createWaypoints() {
var that = this;
this.itemsToReveal.each( function(){
var currentItem = this;
new Waypoint({
element: currentItem,
handler: function() {
$(currentItem).addClass("reveal-item--is-visible");
},
offset: that.offsetPercentage
});
});
}
}
export default RevealOnScroll;

86
app/assets/js/modules/StickyHeader.js Normal file
View File

@ -0,0 +1,86 @@
import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
import smoothScroll from 'jquery-smooth-scroll';
class StickyHeader {
constructor() {
this.lazyImages = $(".lazyload");
this.siteHeader = $(".site-header");
this.siteLogo = $(".site-header__logo");
this.siteNav = $(".primary-nav");
this.siteLanguage = $(".site-header__language");
this.siteButton = $(".site-header__btn-container");
this.headerTriggerElement = $(".large-hero__title");
this.createHeaderWaypoint();
this.pageSections = $(".page-section");
this.headerLinks = $(".primary-nav a");
this.createPageSectionWaypoints();
this.addSmoothScrolling();
this.refreshWaypoints();
}
refreshWaypoints(){
this.lazyImages.on('load', function() {
Waypoint.refreshAll();
});
}
addSmoothScrolling() {
this.headerLinks.smoothScroll();
}
createHeaderWaypoint() {
var that = this;
new Waypoint({
element: this.headerTriggerElement[0],
handler: function(direction) {
if (direction == "down") {
that.siteHeader.addClass("site-header--dark");
that.siteLogo.addClass("site-header__logo--small");
that.siteNav.addClass("primary-nav--small");
that.siteLanguage.addClass("site-header__language--small");
that.siteButton.addClass("site-header__btn-container--small");
} else {
that.siteHeader.removeClass("site-header--dark");
that.siteLogo.removeClass("site-header__logo--small");
that.siteNav.removeClass("primary-nav--small");
that.siteLanguage.removeClass("site-header__language--small");
that.siteButton.removeClass("site-header__btn-container--small");
that.headerLinks.removeClass("is-current-link");
}
},
offset: "10%"
});
}
createPageSectionWaypoints() {
var that = this;
this.pageSections.each(function(){
var currentPageSection = this;
new Waypoint({
element: currentPageSection,
handler: function(direction){
if (direction == "down"){
var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
that.headerLinks.removeClass("is-current-link");
$(matchingHeaderLink).addClass("is-current-link");
}
}
});
new Waypoint({
element: currentPageSection,
handler: function(direction){
if (direction == "up"){
var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
that.headerLinks.removeClass("is-current-link");
$(matchingHeaderLink).addClass("is-current-link");
}
},
offset: "-38%"
});
});
}
}
export default StickyHeader;

4
app/assets/scss/modules/_arrow.scss
View File

@ -35,14 +35,14 @@
@include atMedium{
position: relative;
bottom: -30px;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -30px;
bottom: 0px;
left: 70%;
transform: translateX(-50%);
}

2
app/assets/scss/modules/_headline.scss
View File

@ -24,7 +24,7 @@
&__title {
font-weight: 400;
font-size: 1.6rem;
font-size: 1.5rem;
@include atMedium(){
font-size: 2.1rem;

2
app/assets/scss/modules/_how-it-works.scss
View File

@ -54,7 +54,7 @@
p{
font-weight: 300;
line-height: 1.25;
line-height: 1.125;
margin: 0;
font-size: 1.2rem;

5
app/assets/scss/modules/_primary-nav.scss
View File

@ -3,6 +3,11 @@
@include atMedium(){
padding: 22px 0px;
transition: padding .3s ease-out;
&--small{
padding: 2px 0px;
}
}
&--pull-right{

10
app/assets/scss/modules/_reveal-item.scss Normal file
View File

@ -0,0 +1,10 @@
.reveal-item {
opacity: 0;
transition: all 1.5s ease-out;
transform: scale(1.15);
&--is-visible {
opacity: 1;
transform: scale(1);
}
}

34
app/assets/scss/modules/_site-header.scss
View File

@ -12,13 +12,22 @@
@include atMedium(){
position: absolute;
position: fixed;
background-color: rgba(#000, 0.4);
background-color: rgba(#000, .4);
&--dark {
background-color: rgba(#000, .7);
}
}
&__btn-container{
@include atMedium(){
padding: 32px 0px 32px 0px;
float: right;
transition: padding .3s ease-out;
&--small{
padding: 13px 0px 13px 0px;
}
}
}
@ -35,6 +44,11 @@
position: unset;
margin: 40px 20px 0px 0px;
float: right;
transition: margin .3s ease-out;
&--small{
margin: 22px 20px 0px 0px;
}
}
}
@ -135,15 +149,22 @@
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8);
transition: transform .3s ease-out;
transition: all .3s ease-out;
background-color: rgba(black, 0.5);
&--small {
transform: translateX(-50%) scale(.5);
background-color: rgba(black, 0.7);
}
&--orange-bg {
transition: background-color .3s ease-out;
background-color: orange;
transition: all .3s ease-out;
background-color: $myOrange;
transform: translateX(-50%) scale(.8);
}
@include atMedium(){
width: 170px;
padding: 0;
top: 3px;
position: relative;
@ -151,6 +172,11 @@
left: auto;
transform: translateX(0);
background-color: rgba(black, 0);
transition: width .3s ease-out;
&--small {
width: 100px;
}
}
}

4
app/assets/scss/style.scss
View File

@ -17,6 +17,4 @@
@import './modules/arrow';
@import './modules/footer';
@import './modules/sprite';
@import './modules/reveal-item';