status-im
/
artproject
mirror of https://github.com/status-im/artproject.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add reveal to all elements in hero section

This commit is contained in:
Maciej Matuszewski 2018-01-22 19:28:27 +01:00
parent 03b725f524
commit 2aca8a41f3
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}> <section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
<div id="klein" class="hero__canvas"> <div id="klein" class="hero__canvas">
<div class="hero__canvas-info hero__canvas-info--desktop"> <div class="hero__canvas-info hero__canvas-info--desktop js-sr">
{{ hero.canvas.info.desktop }} {{ hero.canvas.info.desktop }}
</div> </div>
<div class="hero__canvas-info hero__canvas-info--mobile"> <div class="hero__canvas-info hero__canvas-info--mobile js-sr">
{{ hero.canvas.info.mobile }} {{ hero.canvas.info.mobile }}
</div> </div>
</div> </div>
@ -19,19 +19,21 @@
<div class="hero__counter"> <div class="hero__counter">
<div class="js-parallax" data-rellax-speed="-0.5"> <div class="js-parallax" data-rellax-speed="-0.5">
{{ hero.counterText }} <div class="js-sr">{{ hero.counterText }}</div>
</div> </div>
</div> </div>
<div class="hero__bottom"> <div class="hero__bottom">
<div class="hero__detail js-parallax" data-rellax-speed="-0.2"> <div class="hero__detail js-parallax" data-rellax-speed="-0.2">
<h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3> <h3 class="hero__detail__title js-sr">{{ hero.eventsLabel }}</h3>
{{#each hero.events as |event|}} <div class="js-sr">
<p class="hero__detail__event"> {{#each hero.events as |event|}}
{{ event.text }}, <p class="hero__detail__event">
<strong class="hero__detail__city">{{ event.city }}</strong> {{ event.text }},
</p> <strong class="hero__detail__city">{{ event.city }}</strong>
{{/each}} </p>
{{/each}}
</div>
</div> </div>
{{> components/button {{> components/button
@ -43,9 +45,11 @@
<a href="{{ hero.nextSectionLink.link }}" class="hero__scroll"> <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
<div class="js-parallax" data-rellax-speed="0.4"> <div class="js-parallax" data-rellax-speed="0.4">
{{svg 'images/arrow-down.svg' class="hero__scroll__icon"}} <div class="js-sr">
<div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}"> {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
{{ hero.nextSectionLink.text }} <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
{{ hero.nextSectionLink.text }}
</div>
</div> </div>
</div> </div>
</a> </a>

2
src/scripts/reveal.js
View File

@ -23,7 +23,7 @@ class Reveal {
ScrollReveal().reveal('.js-sr', { ScrollReveal().reveal('.js-sr', {
scale: 1, scale: 1,
distance: '30px', distance: '30px',
duration: 600, duration: 1500,
viewOffset: { bottom: 50 }, viewOffset: { bottom: 50 },
}); });
} }