mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
intro animation
This commit is contained in:
parent
2941c872dd
commit
88e90c74d5
35
_src/_assets/javascripts/bigchain/testimonials.js
Normal file
35
_src/_assets/javascripts/bigchain/testimonials.js
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
//=include ../../../../node_modules/is-in-viewport/lib/isInViewport.js
|
||||
|
||||
var Testimonials = (function(w, d, $) {
|
||||
|
||||
'use strict'
|
||||
|
||||
var app, _private, _config
|
||||
|
||||
_config = {
|
||||
testimonials: $('.testimonials'),
|
||||
testimonial: $('.testimonial')
|
||||
}
|
||||
|
||||
_private = {
|
||||
toggleReady: function() {
|
||||
$(window).on('load resize scroll',function() {
|
||||
if (_config.testimonials.is( ':in-viewport()' ) ) {
|
||||
_config.testimonials.addClass('is-ready');
|
||||
} else {
|
||||
_config.testimonials.removeClass('is-ready');
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
app = {
|
||||
init: function() {
|
||||
_private.toggleReady();
|
||||
}
|
||||
}
|
||||
|
||||
return app
|
||||
|
||||
})(window, document, jQuery)
|
@ -1,6 +1,7 @@
|
||||
|
||||
//=include bigchain/hero-video.js
|
||||
//=include bigchain/smoothscroll.js
|
||||
//=include bigchain/testimonials.js
|
||||
//=include ../../../node_modules/vivus/dist/vivus.js
|
||||
|
||||
|
||||
@ -26,4 +27,6 @@ jQuery(function($) {
|
||||
|
||||
new Vivus('bigchain-graph', iconOptions);
|
||||
|
||||
Testimonials.init();
|
||||
|
||||
});
|
||||
|
@ -43,7 +43,7 @@ $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
|
||||
@keyframes slide-in-from-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100px);
|
||||
transform: translateY(50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
@ -6,11 +6,22 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// intro animation
|
||||
&.is-ready .grid__col {
|
||||
&:nth-child(2) .testimonial { animation-delay: .3s; }
|
||||
&:nth-child(3) .testimonial { animation-delay: .6s; }
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.is-ready & {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial__quote,
|
||||
@ -29,7 +40,6 @@
|
||||
|
||||
// styling
|
||||
margin-bottom: $spacer;
|
||||
font-size: 95%;
|
||||
align-self: flex-start;
|
||||
|
||||
// quote characters
|
||||
|
11
_src/_includes/section-testimonials.html
Normal file
11
_src/_includes/section-testimonials.html
Normal file
@ -0,0 +1,11 @@
|
||||
<section class="section section-testimonials">
|
||||
<div class="row row--wide">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">What others are saying</h1>
|
||||
</header>
|
||||
|
||||
{% include testimonials.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
@ -94,17 +94,7 @@ js: page-front.min.js
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="row row--wide">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">What others are saying</h1>
|
||||
</header>
|
||||
|
||||
{% include testimonials.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include section-testimonials.html %}
|
||||
|
||||
<section class="section section-whitepaper background--photo">
|
||||
<div class="row">
|
||||
|
Loading…
Reference in New Issue
Block a user