bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00
Code Releases Activity

new SVG-based graph with subtle intro animation

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-02-08 18:06:21 +01:00
parent 445d952ceb
commit 9dd9129357
6 changed files with 89 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_src/_assets/javascripts/page-front.js
View File

@ -1,2 +1,19 @@
//=include bigchain/smoothscroll.js
//=include ../../../node_modules/vivus/dist/vivus.js
jQuery(function($) {
// graph animation
var iconOptions = {
type: 'delayed',
start: 'inViewport',
duration: 200,
animTimingFunction: Vivus.EASE_OUT,
selfDestroy: true
};
new Vivus('bigchain-graph', iconOptions);
});

23
_src/_assets/styles/page-front.scss
View File

@ -5,12 +5,6 @@
//
.section-features {
figure {
display: block;
margin-bottom: ($spacer * 2);
}
.icon {
display: block;
margin: auto;
@ -18,6 +12,23 @@
}
}
.graph-bigchain {
display: block;
margin-bottom: ($spacer * 2);
}
// the SVG
#bigchain-graph {
@media ($screen-md) {
margin-left: -10%;
margin-right: -10%;
width: 120%;
}
}
.section-features__main {
@extend .text-center;
margin-top: $spacer;

2
_src/_includes/scripts.html
View File

@ -9,6 +9,8 @@
{% if page.js %}
<script src="/assets/js/{{ page.js }}"></script>
{% elsif layout.js %}
<script src="/assets/js/{{ layout.js }}"></script>
{% endif %}
<!--

47
_src/_includes/svg/graph-bigchain.svg Normal file
View File

@ -0,0 +1,47 @@
<svg id="bigchain-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 656.18 194.29">
<defs>
<style>
.cls-1, .cls-2 {
fill: none;
}
.cls-1 {
stroke: #BFE6EC;
stroke-miterlimit: 10;
stroke-opacity: .2;
}
.cls-2 {
stroke: #54c695;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.cls-3 {
fill: #bfe6ec;
}
</style>
</defs>
<title>graph-bigchain</title>
<g id="lines">
<line class="cls-1" x1="25.18" y1="31.66" x2="655.18" y2="31.66"/>
<line class="cls-1" x1="25.18" y1="111.66" x2="655.18" y2="111.66"/>
<line class="cls-1" x1="25.18" y1="191" x2="655.18" y2="191"/>
</g>
<polyline id="graph" class="cls-2" points="19.59 21.09 23.72 18.38 28.45 26.52 46.51 42.66 54.18 42.66 59.84 71.25 73.18 44.77 85.84 52.39 97.18 30.36 103.18 48.35 111.18 41.67 123.84 49.67 135.18 37.67 143.84 29 150.51 44.64 155.18 37.01 161.84 44.66 172.18 44.66 175.84 28.58 180.51 35.79 189.18 33.06 195.18 35.7 201.84 49.68 213.18 57.01 221.18 57.67 239.84 44.59 248.51 65 255.18 39 261.18 44.58 272.51 40.33 280.51 48.33 285.84 63 291.84 44.58 297.18 57.66 305.18 61 310.51 44.58 317.84 41 322.51 27.66 333.84 40.33 338.51 41 348.51 21.66 355.84 38.33 362.51 27.66 368.18 41.66 375.18 41 381.18 32.33 389.84 34.33 397.18 50.33 401.18 36.33 409.84 38.33 414.51 44.58 422.51 50.33 427.18 64.33 435.18 54.33 442.01 58.33 452.18 51 452.18 38.66 463.59 36.33 471.05 38.33 476.45 49 483.15 44.63 503.16 65.67 517.84 40.33 523.84 48.33 537.18 39.66 549.18 27 557.18 30.83 563.18 38.66 569.18 38.66 573.84 41.91 585.84 27.79 593.84 29.73 601.18 23.7 605.18 33.01 611.84 18.39 617.84 26.34 625.84 1 633.84 27 645.18 5 655.18 21.66"/>
<g id="labels-y">
<g>
<path class="cls-3" d="M2.2,35.12H1.55V29.55l-1.15,1L0,30.08l1.62-1.33H2.2v6.37Z"/>
<path class="cls-3" d="M6.8,28.59a1.64,1.64,0,0,1,1,.29,2.14,2.14,0,0,1,.64.77,3.72,3.72,0,0,1,.35,1.08,7.19,7.19,0,0,1,.1,1.22,7.11,7.11,0,0,1-.1,1.22,3.72,3.72,0,0,1-.35,1.07,2.1,2.1,0,0,1-.64.76,1.65,1.65,0,0,1-1,.29,1.67,1.67,0,0,1-1-.29,2.1,2.1,0,0,1-.64-0.76,3.63,3.63,0,0,1-.34-1.07,7.47,7.47,0,0,1-.1-1.22,7.55,7.55,0,0,1,.1-1.22,3.63,3.63,0,0,1,.34-1.08,2.15,2.15,0,0,1,.64-0.77A1.65,1.65,0,0,1,6.8,28.59Zm0,0.55a1,1,0,0,0-.7.26,1.82,1.82,0,0,0-.44.67,3.67,3.67,0,0,0-.23.9,7.8,7.8,0,0,0-.06,1,7.69,7.69,0,0,0,.06,1,3.59,3.59,0,0,0,.23.9,1.78,1.78,0,0,0,.44.66,1,1,0,0,0,.7.26,1,1,0,0,0,.7-0.26,1.79,1.79,0,0,0,.44-0.66,3.72,3.72,0,0,0,.23-0.9,7.12,7.12,0,0,0,.07-1,7.22,7.22,0,0,0-.07-1,3.8,3.8,0,0,0-.23-0.9,1.83,1.83,0,0,0-.44-0.67A1,1,0,0,0,6.8,29.14Z"/>
<path class="cls-3" d="M12,28.59a1.64,1.64,0,0,1,1,.29,2.14,2.14,0,0,1,.64.77A3.72,3.72,0,0,1,14,30.72a7.19,7.19,0,0,1,.1,1.22,7.11,7.11,0,0,1-.1,1.22,3.72,3.72,0,0,1-.35,1.07A2.1,2.1,0,0,1,13,35a1.65,1.65,0,0,1-1,.29A1.67,1.67,0,0,1,11,35a2.1,2.1,0,0,1-.64-0.76A3.63,3.63,0,0,1,10,33.17a7.47,7.47,0,0,1-.1-1.22,7.55,7.55,0,0,1,.1-1.22,3.63,3.63,0,0,1,.34-1.08A2.15,2.15,0,0,1,11,28.88,1.65,1.65,0,0,1,12,28.59Zm0,0.55a1,1,0,0,0-.7.26,1.82,1.82,0,0,0-.44.67,3.67,3.67,0,0,0-.23.9,7.8,7.8,0,0,0-.06,1,7.69,7.69,0,0,0,.06,1,3.59,3.59,0,0,0,.23.9,1.78,1.78,0,0,0,.44.66,1,1,0,0,0,.7.26,1,1,0,0,0,.7-0.26,1.79,1.79,0,0,0,.44-0.66,3.72,3.72,0,0,0,.23-0.9,7.12,7.12,0,0,0,.07-1,7.22,7.22,0,0,0-.07-1,3.8,3.8,0,0,0-.23-0.9,1.83,1.83,0,0,0-.44-0.67A1,1,0,0,0,12,29.14Z"/>
<path class="cls-3" d="M16.13,31.61h0l3-2.86H20.1l-3.21,2.89,3.39,3.48h-1l-3.19-3.39h0v3.39H15.48V28.75h0.65v2.86Z"/>
</g>
<g>
<path class="cls-3" d="M8.47,108.33H5.81l0,2a2.44,2.44,0,0,1,.44-0.11,2.8,2.8,0,0,1,.44,0,2.3,2.3,0,0,1,.83.14,2,2,0,0,1,.66.41,1.83,1.83,0,0,1,.43.63,2.09,2.09,0,0,1,.15.81,2.35,2.35,0,0,1-.15.85,1.93,1.93,0,0,1-1.1,1.12,2.22,2.22,0,0,1-.86.16A2.08,2.08,0,0,1,5.44,114a2.1,2.1,0,0,1-.74-0.85l0.58-.26a1.43,1.43,0,0,0,.52.63,1.34,1.34,0,0,0,.77.23,1.58,1.58,0,0,0,.6-0.11,1.4,1.4,0,0,0,.47-0.32A1.45,1.45,0,0,0,8,112.82a1.69,1.69,0,0,0,0-1.24,1.41,1.41,0,0,0-.33-0.48,1.49,1.49,0,0,0-.5-0.31,1.8,1.8,0,0,0-.63-0.11,2.49,2.49,0,0,0-.68.09,3.24,3.24,0,0,0-.64.26l0.06-3.29H8.47v0.58Z"/>
<path class="cls-3" d="M12,107.59a1.63,1.63,0,0,1,1,.29,2.15,2.15,0,0,1,.64.76,3.72,3.72,0,0,1,.35,1.08,7.26,7.26,0,0,1,0,2.44,3.71,3.71,0,0,1-.35,1.07A2.09,2.09,0,0,1,13,114a1.65,1.65,0,0,1-1,.29,1.67,1.67,0,0,1-1-.29,2.1,2.1,0,0,1-.64-0.76,3.62,3.62,0,0,1-.34-1.07,7.62,7.62,0,0,1,0-2.44,3.63,3.63,0,0,1,.34-1.08,2.15,2.15,0,0,1,.64-0.76A1.65,1.65,0,0,1,12,107.59Zm0,0.55a1,1,0,0,0-.7.26,1.81,1.81,0,0,0-.44.67,3.66,3.66,0,0,0-.23.9,7.8,7.8,0,0,0-.06,1,7.68,7.68,0,0,0,.06,1,3.59,3.59,0,0,0,.23.9,1.78,1.78,0,0,0,.44.66,1,1,0,0,0,.7.26,1,1,0,0,0,.7-0.26,1.78,1.78,0,0,0,.44-0.66,3.72,3.72,0,0,0,.23-0.9,7.11,7.11,0,0,0,.07-1,7.22,7.22,0,0,0-.07-1,3.79,3.79,0,0,0-.23-0.9,1.82,1.82,0,0,0-.44-0.67A1,1,0,0,0,12,108.14Z"/>
<path class="cls-3" d="M16.13,110.61h0l3-2.86H20.1l-3.21,2.89,3.39,3.48h-1l-3.19-3.39h0v3.39H15.48v-6.37h0.65v2.86Z"/>
</g>
<path class="cls-3" d="M17.56,187.59a1.63,1.63,0,0,1,1,.29,2.15,2.15,0,0,1,.64.76,3.72,3.72,0,0,1,.35,1.08,7.26,7.26,0,0,1,0,2.44,3.71,3.71,0,0,1-.35,1.07,2.09,2.09,0,0,1-.64.76,1.65,1.65,0,0,1-1,.29,1.67,1.67,0,0,1-1-.29,2.1,2.1,0,0,1-.64-0.76,3.62,3.62,0,0,1-.34-1.07,7.62,7.62,0,0,1,0-2.44,3.63,3.63,0,0,1,.34-1.08,2.15,2.15,0,0,1,.64-0.76A1.65,1.65,0,0,1,17.56,187.59Zm0,0.55a1,1,0,0,0-.7.26,1.81,1.81,0,0,0-.44.67,3.66,3.66,0,0,0-.23.9,7.8,7.8,0,0,0-.06,1,7.68,7.68,0,0,0,.06,1,3.59,3.59,0,0,0,.23.9,1.78,1.78,0,0,0,.44.66,1,1,0,0,0,.7.26,1,1,0,0,0,.7-0.26,1.78,1.78,0,0,0,.44-0.66,3.72,3.72,0,0,0,.23-0.9,7.11,7.11,0,0,0,.07-1,7.22,7.22,0,0,0-.07-1,3.79,3.79,0,0,0-.23-0.9,1.82,1.82,0,0,0-.44-0.67A1,1,0,0,0,17.56,188.14Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

8
_src/index.html
View File

@ -1,11 +1,11 @@
---
layout: base
front_page: true
tagline: 'Meet BigchainDB, the world’s most scalable blockchain database'
front_page: true
hero_video_name: northern-light
js: page-front.min.js
---
{% include hero-video.html %}
@ -19,8 +19,8 @@ hero_video_name: northern-light
</p>
</header>
<figure>
<img class="img--responsive" src="/assets/img/graph.png" width="672" height="226">
<figure class="graph-bigchain img--responsive">
{% include svg/graph-bigchain.svg %}
</figure>
<div class="section-features__main grid grid--full grid-small--fit grid--gutters">

3
package.json
View File

@ -18,7 +18,8 @@
"normalize-css": ">=2.3.1",
"normalize-opentype.css": ">=0.2.4",
"parsleyjs": "^2.0.7",
"svg4everybody": "^2.0.0"
"svg4everybody": "^2.0.0",
"vivus": "^0.2.2"
},
"devDependencies": {
"browser-sync": ">=2.10.0",