status-im/artproject
2
0
Fork 0
mirror of https://github.com/status-im/artproject.git synced 2025-02-23 13:18:26 +00:00
Code Issues Projects Releases Wiki Activity

Make parallax bigger in hero section

Browse Source
This commit is contained in:
Maciej Matuszewski 2018-01-14 22:48:08 +01:00
parent 2d416bb5a7
commit 961d9398bf
3 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/hbs/partials/components/hero.hbs
View File

@ -2,22 +2,22 @@
<div class="hero__canvas"></div> <div class="hero__canvas"></div>
<h1 class="hero__header"> <h1 class="hero__header">
<div class="js-parallax" data-rellax-speed="2"> <div class="js-parallax" data-rellax-speed="4">
<div class="hero__header--upper">{{ hero.header.upper }}</div> <div class="hero__header--upper">{{ hero.header.upper }}</div>
</div> </div>
<div class="js-parallax" data-rellax-speed="1"> <div class="js-parallax" data-rellax-speed="2">
<div class="hero__header--lower">{{ hero.header.lower }}</div> <div class="hero__header--lower">{{ hero.header.lower }}</div>
</div> </div>
</h1> </h1>
<div class="hero__counter"> <div class="hero__counter">
<div class="js-parallax" data-rellax-speed="-0.2"> <div class="js-parallax" data-rellax-speed="-0.5">
{{ hero.counterText }} {{ hero.counterText }}
</div> </div>
</div> </div>
<div class="hero__bottom"> <div class="hero__bottom">
<div class="hero__detail js-parallax" data-rellax-speed="-0.15"> <div class="hero__detail js-parallax" data-rellax-speed="-0.2">
<h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3> <h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3>
{{#each hero.events as |event|}} {{#each hero.events as |event|}}
<p class="hero__detail__event"> <p class="hero__detail__event">
@ -35,7 +35,7 @@
}} }}
<a href="{{ hero.nextSectionLink.link }}" class="hero__scroll"> <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
<div class="js-parallax" data-rellax-speed="0.2"> <div class="js-parallax" data-rellax-speed="0.4">
{{svg 'images/arrow-down.svg' class="hero__scroll__icon"}} {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
<div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}"> <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
{{ hero.nextSectionLink.text }} {{ hero.nextSectionLink.text }}

4
src/styles/components/_hero.scss
View File

@ -73,7 +73,7 @@ body {
} }
&__scroll { &__scroll {
margin: 20px auto 0; margin: 30px auto 0;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
@ -83,7 +83,7 @@ body {
&__text { &__text {
@include hoverDistortion; @include hoverDistortion;
margin-top: 15px; margin-top: 20px;
} }
&__icon { &__icon {

12
src/styles/utils/_animations.scss
View File

@ -1,3 +1,5 @@
$scroll-offset: 10px;
@mixin fade-in($duration: .2s) { @mixin fade-in($duration: .2s) {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@ -38,25 +40,21 @@
transition: transform $duration $easing 0s, visibility 0s $easing $duration; transition: transform $duration $easing 0s, visibility 0s $easing $duration;
} }
// @keyframes hovering {
// }
@keyframes scrollDown { @keyframes scrollDown {
0% { 0% {
transform: translateY(0); transform: translateY(0);
} }
10% { 10% {
transform: translateY(5px); transform: translateY($scroll-offset);
} }
15% { 15% {
transform: translateY(2px); transform: translateY(#{$scroll-offset - $scroll-offset / 2});
} }
25% { 25% {
transform: translateY(5px); transform: translateY($scroll-offset);
} }
50%, 50%,