From 9adf23548d8ebf10cc09572df7ab83032e024dab Mon Sep 17 00:00:00 2001 From: Maciej Matuszewski Date: Sat, 13 Jan 2018 19:06:14 +0100 Subject: [PATCH] Add smooth scroll and link hooks --- package-lock.json | 5 +++++ package.json | 1 + src/hbs/index.hbs | 10 +++++++++- src/hbs/partials/components/get-involved.hbs | 2 +- src/hbs/partials/components/hero.hbs | 6 +++--- src/hbs/partials/components/introduction.hbs | 2 +- src/hbs/partials/components/project.hbs | 2 +- src/hbs/partials/components/structure.hbs | 2 +- src/hbs/partials/components/team.hbs | 2 +- src/scripts/main.js | 2 ++ src/scripts/scroll.js | 9 +++++++++ src/styles/base/_settings.scss | 2 +- src/styles/components/_nav.scss | 2 +- 13 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 src/scripts/scroll.js diff --git a/package-lock.json b/package-lock.json index 7e87f64..4f18f95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13494,6 +13494,11 @@ "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, + "smooth-scroll": { + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/smooth-scroll/-/smooth-scroll-12.1.5.tgz", + "integrity": "sha1-ttjeyjcant1eo60pHvD7fnQe1B4=" + }, "snapdragon": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.1.tgz", diff --git a/package.json b/package.json index 6cf9e23..04dbce3 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ }, "dependencies": { "sanitize.css": "^4.1.0", + "smooth-scroll": "^12.1.5", "vanilla-tilt": "^1.4.1" } } diff --git a/src/hbs/index.hbs b/src/hbs/index.hbs index 0145bcf..ab1947e 100644 --- a/src/hbs/index.hbs +++ b/src/hbs/index.hbs @@ -2,6 +2,7 @@ title: 'Home' hero: + id: 'hero' header: upper: '#Art' lower: 'Project.' @@ -14,10 +15,13 @@ hero: button: label: 'Telegram Community' icon: 'images/telegram-logo.svg' - nextSectionLink: 'Scroll Down' + nextSectionLink: + text: 'Scroll Down' + link: '#introduction' counterText: '01 - 06' introduction: + id: 'introduction' header: 'Introduction —' subheader: 'TrueBit, in collaboration with artist Jessica Angel, are creating an open source, massive public art installation connected to the blockchain in real time.' content: @@ -29,6 +33,7 @@ introduction: counterText: '02 - 06' project: + id: 'project' header: 'Project —' subheader: 'This first art project proposes the visualization and experience of immersion inside the “dogetherium bridge”, an endeavour that TrueBit is undertaking to create a “bridge" between the Dogecoin and Ethereum blockchains.' content: @@ -48,6 +53,7 @@ project: nextSectionLink: 'Learn more about the structure ↓' structure: + id: 'structure' header: 'Structure —' button: label: 'Floor / Elevation Plans' @@ -62,6 +68,7 @@ structure: counterText: '04 - 06' team: + id: 'team' header: 'Team -' quote: text: '"Everything I do is some kind of modified borrowing from others who have been close to me either actually or virtually, and the virtual influences are amongst the most profound"' @@ -92,6 +99,7 @@ team: counter: '05 - 06' getInvolved: + id: 'get-involved' header: 'Get Involved —' description: - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (artproject@truebit.io), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!' diff --git a/src/hbs/partials/components/get-involved.hbs b/src/hbs/partials/components/get-involved.hbs index 9284158..f02c8ed 100644 --- a/src/hbs/partials/components/get-involved.hbs +++ b/src/hbs/partials/components/get-involved.hbs @@ -1,4 +1,4 @@ -
+
{{> components/heading diff --git a/src/hbs/partials/components/hero.hbs b/src/hbs/partials/components/hero.hbs index 94f0ad8..e05fe88 100644 --- a/src/hbs/partials/components/hero.hbs +++ b/src/hbs/partials/components/hero.hbs @@ -1,4 +1,4 @@ -
+

{{ hero.header.upper }}
@@ -25,9 +25,9 @@ icon=(svg hero.button.icon width="24px" height="24px") }} - + {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}} -
{{ hero.nextSectionLink }}
+
{{ hero.nextSectionLink.text }}

diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs index 5043db8..ee5eb56 100644 --- a/src/hbs/partials/components/introduction.hbs +++ b/src/hbs/partials/components/introduction.hbs @@ -1,4 +1,4 @@ -
+
{{> components/heading diff --git a/src/hbs/partials/components/project.hbs b/src/hbs/partials/components/project.hbs index c01f67c..43ed3c9 100644 --- a/src/hbs/partials/components/project.hbs +++ b/src/hbs/partials/components/project.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/src/hbs/partials/components/structure.hbs b/src/hbs/partials/components/structure.hbs index c3a536b..d643fe0 100644 --- a/src/hbs/partials/components/structure.hbs +++ b/src/hbs/partials/components/structure.hbs @@ -1,4 +1,4 @@ -
+
{{> components/heading diff --git a/src/hbs/partials/components/team.hbs b/src/hbs/partials/components/team.hbs index a09bf56..8e766a5 100644 --- a/src/hbs/partials/components/team.hbs +++ b/src/hbs/partials/components/team.hbs @@ -1,4 +1,4 @@ -
+
{{> components/heading diff --git a/src/scripts/main.js b/src/scripts/main.js index 3528339..e8d8c52 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,7 +1,9 @@ import 'babel-polyfill'; import 'vanilla-tilt'; import nav from './nav'; +import scroll from './scroll'; document.addEventListener('DOMContentLoaded', () => { nav(); + scroll(); }); diff --git a/src/scripts/scroll.js b/src/scripts/scroll.js new file mode 100644 index 0000000..a9b175e --- /dev/null +++ b/src/scripts/scroll.js @@ -0,0 +1,9 @@ +import SmoothScroll from 'smooth-scroll'; + +export default function init() { + return new SmoothScroll('a[href^="#"]', { + speed: 700, + offset: 95, + easing: 'easeOut' + }); +} diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss index 125aab4..e5b97f2 100644 --- a/src/styles/base/_settings.scss +++ b/src/styles/base/_settings.scss @@ -42,5 +42,5 @@ $title-font-family: 'Rubik Mono One', sans-serif; //======================= $duration: .2s; -$header-height--mobile: 80px; +$header-height--mobile: 95px; $header-height--desktop: 95px; diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss index b291320..a95cb7e 100644 --- a/src/styles/components/_nav.scss +++ b/src/styles/components/_nav.scss @@ -68,7 +68,7 @@ z-index: -1; content: attr(data-title); transform: translate(-50%, -50%); - transition: transform .7s cubic-bezier(0, 1.54, .4, 1.35); + transition: transform .7s cubic-bezier(0, 1.54, .4, 1.7); } &__link::before {