nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs(home): Adds animation

Browse source
This commit is contained in:
Alexandre Stanislawski 2015-12-22 18:27:04 +01:00
parent a9ce824143
commit 0a03a59bc5
11 changed files with 159 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
docs/css/_home.scss
View file

@ -303,3 +303,21 @@ footer.site-footer .input-group-addon {
background-color: transparent;
}
.doc-page {
position: absolute;
transition: opacity 1000ms;
opacity:1;
z-index: 1;
}
.doc-page.init {
opacity: 0;
}
.index-container {
position: relative;
text-align: center;
margin:auto;
transform:translateZ(0);
z-index: 100;
}

BIN
docs/img/icon-page-doc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 586 B

19
docs/img/icon-page-doc.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="45px" viewBox="0 0 36 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
<title>icon-page-doc</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="DocSearch" sketch:type="MSArtboardGroup" transform="translate(-212.000000, -469.000000)" stroke="#46AEDA" stroke-width="3">
<g id="Header" sketch:type="MSLayerGroup" transform="translate(0.000000, 49.000000)">
<g id="illus" transform="translate(212.000000, 249.000000)" sketch:type="MSShapeGroup">
<g id="icon-page-doc" transform="translate(0.384318, 171.155889)">
<path d="M0,8.7849176 L11.2336977,8.7849176 L11.2336977,-5.68434189e-14 L35.3692615,-5.68434189e-14 L35.3692615,44.2073171 L0,44.2073171 L0,8.7849176 Z" id="Rectangle-42"></path>
<path d="M0,8.7849176 L11.2336977,-5.68434189e-14 L35.3692615,-5.68434189e-14 L35.3692615,44.2073171 L0,44.2073171 L0,8.7849176 Z" id="Rectangle-42"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
docs/img/icon-page-doc@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 998 B

BIN
docs/img/icon-page-doc@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
docs/img/illus-index.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

33
docs/img/illus-index.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="319px" height="181px" viewBox="0 0 319 181" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
<title>illus-index</title>
<desc>Created with sketchtool.</desc>
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feGaussianBlur stdDeviation="0" in="SourceGraphic" result="blur"></feGaussianBlur>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="DocSearch" sketch:type="MSArtboardGroup" transform="translate(-324.000000, -408.000000)">
<g id="Header" sketch:type="MSLayerGroup" transform="translate(0.000000, 49.000000)">
<g id="illus" transform="translate(212.000000, 249.000000)">
<g id="illus-index" transform="translate(112.000000, 111.000000)">
<g id="Icons/Search-+-illus-header" transform="translate(0.317365, 132.256098)" sketch:type="MSShapeGroup">
<path d="M41.5588822,36.6849048 C41.5588822,36.0881496 41.3133805,35.508946 40.9100561,35.1052587 L34.8952624,29.0850515 C36.3156655,27.0315114 37.0697067,24.574284 37.0697067,22.0819533 C37.0697067,15.2543714 31.5459166,9.72560976 24.7244741,9.72560976 C17.9030317,9.72560976 12.3792415,15.2543714 12.3792415,22.0819533 C12.3792415,28.9095352 17.9030317,34.4382969 24.7244741,34.4382969 C27.2145637,34.4382969 29.6695815,33.6835771 31.721275,32.2618955 L37.7360687,38.264551 C38.1393931,38.68579 38.7180759,38.9315128 39.3142945,38.9315128 C40.5418034,38.9315128 41.5588822,37.9135186 41.5588822,36.6849048 Z M32.5805312,22.0819533 C32.5805312,26.4172046 29.055827,29.9450811 24.7244741,29.9450811 C20.3931212,29.9450811 16.868417,26.4172046 16.868417,22.0819533 C16.868417,17.7467021 20.3931212,14.2188256 24.7244741,14.2188256 C29.055827,14.2188256 32.5805312,17.7467021 32.5805312,22.0819533 Z" id="Icons/Search" fill="#46AEDA"></path>
<rect id="illus-header" stroke="#46AEDA" stroke-width="3" x="0" y="0" width="318.323353" height="47.7439024" rx="100"></rect>
</g>
<g id="index" transform="translate(102.888224, 0.518293)" sketch:type="MSShapeGroup">
<ellipse id="Oval-15" stroke="#46AEDA" stroke-width="3" filter="url(#filter-1)" cx="53.496008" cy="53.4908537" rx="53.496008" ry="53.4908537"></ellipse>
<path d="M53.496008,99.3401568 C78.8203189,99.3401568 99.3497291,78.8127246 99.3497291,53.4908537 C99.3497291,28.1689827 78.8203189,7.64155052 53.496008,7.64155052 C28.1716971,7.64155052 7.64228685,28.1689827 7.64228685,53.4908537 C7.64228685,78.8127246 28.1716971,99.3401568 53.496008,99.3401568 Z M53.8883875,39.9235156 C67.0132831,39.9235156 77.6531133,37.370551 77.6531133,34.2213096 C77.6531133,31.0720681 67.0132831,28.5191035 53.8883875,28.5191035 C40.7634918,28.5191035 30.1236616,31.0720681 30.1236616,34.2213096 C30.1236616,37.370551 40.7634918,39.9235156 53.8883875,39.9235156 Z M77.6531133,47.2388112 C77.6531133,50.3880526 67.0132831,52.9410173 53.8883875,52.9410173 C40.7634918,52.9410173 30.1236616,50.3880526 30.1236616,47.2388112 L30.1236616,39.5132417 C30.1236616,39.5132417 40.7634918,43.3760264 53.8883875,43.3760264 C67.0132831,43.3760264 77.6531133,39.5132417 77.6531133,39.5132417 L77.6531133,47.2388112 Z M77.6531133,60.2563128 C77.6531133,63.4055543 67.0132831,65.9585189 53.8883875,65.9585189 C40.7634918,65.9585189 30.1236616,63.4055543 30.1236616,60.2563128 L30.1236616,52.5307433 C30.1236616,52.5307433 40.7634918,56.3935281 53.8883875,56.3935281 C67.0132831,56.3935281 77.6531133,52.5307433 77.6531133,52.5307433 L77.6531133,60.2563128 Z M77.6531133,73.2738144 C77.6531133,76.4230559 67.0132831,78.9760205 53.8883875,78.9760205 C40.7634918,78.9760205 30.1236616,76.4230559 30.1236616,73.2738144 L30.1236616,65.5482449 C30.1236616,65.5482449 40.7634918,69.4110297 53.8883875,69.4110297 C67.0132831,69.4110297 77.6531133,65.5482449 77.6531133,65.5482449 L77.6531133,73.2738144 Z" id="Path-8" fill="#FFFFFF"></path>
</g>
<text id="Search-your-document" sketch:type="MSTextLayer" font-family="Raleway" font-size="16" font-weight="normal" line-spacing="28" fill="#FFFFFF">
<tspan x="52.4870259" y="152.75">Search your documentation…</tspan>
</text>
<path d="M211.828312,57.998166 C211.828312,57.998166 239.880786,53.6879534 248.307467,67.2713415 C256.734149,80.8547296 224.831583,92.5903932 236.569525,106.325745 C248.307467,120.061096 262.643993,96.1338843 276.097438,106.325745 C289.550883,116.517605 285.830893,133.337106 285.830893,133.337106" id="Line" stroke="#46AEDA" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
docs/img/illus-index@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/img/illus-index@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

4
docs/index.haml
View file

@ -14,6 +14,8 @@ layout: default
%span.big S
%p#top The easiest way to add search to your documentation.
.jumbotron-left-column
%div.index-container
%img.index{src: 'img/illus-index.png'}
%p We’ve created the fastest, easiest way to search within documentation.
%p And best of all? It’s free!
%form#join-form{action: '#', method: 'POST'}
@ -112,6 +114,8 @@ layout: default
Help me improve my search
%i.fa.fa-heart
<script src="js/animation.js"></script>
{% contentfor site-footer %}
<script src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
{% endcontentfor %}

85
docs/js/animation.js Normal file
View file

@ -0,0 +1,85 @@
document.addEventListener("DOMContentLoaded", function(){
var box = getIndexDomPosition();
console.log(box);
var center = [box[0] + 90, box[1] - 90];
var particles = [];
for(var i=0; i<10; i++) {
setTimeout(function(){
var p = genParticle(center);
particles.push(p);
}, i * 300);
}
window.requestAnimationFrame(function loop(){
window.requestAnimationFrame(loop);
particles.forEach(function(p){
updatePosition(p, center);
if(distance(p.pos, center) < distance(p.v, [0, 0])) {
recycle(p, center);
}
else{
updateDOMPosition(p);
}
});
});
function genParticle(center){
var theta = - Math.random() * Math.PI;
var r = Math.random() * 300 + 400;
var x = r * Math.cos(theta);
var y = r * Math.sin(theta);
var e = document.createElement('img');
e.src = 'img/icon-page-doc.svg';
e.className = 'doc-page init';
e.style.top = center[1] + 'px';
e.style.left = center[0] + 'px';
document.body.querySelector('.jumbotron').appendChild(e);
return {
pos: [x + center[0], y + center[1]],
v: [0, 0],
e: e
};
}
function recycle(p, center) {
var theta = - Math.random() * Math.PI;
var r = Math.random() * 500 + 200;
var x = r * Math.cos(theta);
var y = r * Math.sin(theta);
var e = p.e;
e.className = 'doc-page init';
e.style.top = center[1] + 'px';
e.style.left = center[0] + 'px';
p.pos = [x + center[0], y + center[1]];
p.v = [0, 0];
}
function updateDOMPosition(p) {
var pos = [p.pos[0] - 18, p.pos[1] - 23];
p.e.style.transform = 'translate3D(' + pos[0] + 'px, ' + pos[1] + 'px, 0)';
p.e.className = 'doc-page';
}
function updatePosition(p, center) {
var d = distance(p.pos, center);
p.v[0] += (center[0] - p.pos[0] ) / 500;
p.v[1] += (center[1] - p.pos[1] ) / 500;
p.pos[0] += p.v[0] / 5;
p.pos[1] += p.v[1] / 5;
}
function distance(a, b) {
return Math.sqrt(
Math.pow(b[0] - a[0], 2) +
Math.pow(b[1] - a[1], 2));
}
function getIndexDomPosition() {
var position = jQuery('.index-container').position();
return [position.left, position.top];
}
});