status-im/artproject
2
0
Fork 0
mirror of https://github.com/status-im/artproject.git synced 2025-02-23 05:08:24 +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>
<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>
<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>
</h1>
<div class="hero__counter">
<div class="js-parallax" data-rellax-speed="-0.2">
<div class="js-parallax" data-rellax-speed="-0.5">
{{ hero.counterText }}
</div>
</div>
<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>
{{#each hero.events as |event|}}
<p class="hero__detail__event">
@ -35,7 +35,7 @@
}}
<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"}}
<div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
{{ hero.nextSectionLink.text }}

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

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

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

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