Skip to content

Instantly share code, notes, and snippets.

@un1tz3r0

un1tz3r0/cor3-animated-splash-page.markdown

Created September 12, 2018 13:29
Show Gist options
  • Save un1tz3r0/f72cf2a7e4ef9997ab7659b1430489d3 to your computer and use it in GitHub Desktop.
Save un1tz3r0/f72cf2a7e4ef9997ab7659b1430489d3 to your computer and use it in GitHub Desktop.
Download ZIP
cor3 animated splash page
Raw
cor3-animated-splash-page.markdown
Raw
index.html
<div class="container">
<div class="splash" style="display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; place-items: center; height: 1vh; width: 1vw;">
<svg id="particles" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" version="1.1" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
</svg>
<div style="display: grid; grid-template-rows: 1fr 1fr 10fr 1fr 1fr; grid-template-columns: 1fr 1fr 10fr 1fr 1fr; place-items: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
<!--<div style="color: white; opacity: 0.9; place-self: center; font-family: sans-serifnt-size: 300px; ">cor<span style="position: relative; top: 0.30ex;">3<span style="font-size: 100px;">llc</span></span>-->
<div style="grid-row: 1 / -2; grid-column: 1 / -1; border: 0.15ex solid white; border-radius: 1.5ex; padding: 2em 2.5em; place-self: center; background: #ffffff0b; display: grid; place-items: stretch;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" style="width: 80vmin; height: 50vmin; place-self: center; " viewBox="15 76.421 979 477.421" width="100%" height="100%"><defs><clipPath id="_clipPath_37zY7a2hzKf4xD4JMWX6O05cDsKVIIZ3"><rect width="994" height="512.841"/></clipPath></defs><!--<g clip-path="url(#_clipPath_37zY7a2hzKf4xD4JMWX6O05cDsKVIIZ3)"><path d=" M 15 76.421 L 979 76.421 L 979 477.421 L 15 477.421 L 15 76.421 Z " fill="none" vector-effect="non-scaling-stroke" stroke-width="10" stroke="rgba(255,255,255,95%)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><g>--><path d=" M 681.869 174.783 L 621.609 243.59 C 618.19 247.863 616.054 251.71 616.054 258.547 C 616.054 270.941 625.883 280.771 639.132 280.771 L 665.629 280.771 C 704.092 280.771 716.486 302.139 716.486 332.055 C 716.486 362.398 698.536 381.63 660.073 381.63 C 632.294 381.63 616.054 369.236 601.523 352.569 C 594.258 344.449 588.702 341.457 581.009 341.457 C 568.615 341.457 558.359 351.714 558.359 364.108 C 558.359 368.809 559.641 373.083 562.205 376.929 C 580.582 402.999 615.626 424.367 660.073 424.367 C 729.734 424.367 765.206 390.605 765.206 332.055 C 765.206 286.754 746.829 244.872 686.57 238.034 L 748.966 167.518 C 753.239 162.817 754.522 157.688 754.522 152.987 C 754.522 141.021 744.692 131.191 732.726 131.191 L 595.967 131.191 C 584.001 131.191 574.171 141.021 574.171 152.987 C 574.171 164.953 584.001 174.783 595.967 174.783 L 681.869 174.783 Z " fill="rgba(255,255,255,95%)"/><path d=" M 63.969 224.853 C 63.969 289.941 94.528 320.5 145.725 320.5 C 177.872 320.5 196.922 306.213 205.653 299.069 C 209.622 295.497 210.812 292.719 210.812 289.147 C 210.812 282.797 205.653 277.638 199.303 277.638 C 196.525 277.638 194.541 278.431 191.762 280.416 C 182.634 287.163 168.744 297.481 145.725 297.481 C 109.212 297.481 89.766 274.463 89.766 224.853 C 89.766 176.038 109.212 152.622 145.725 152.622 C 171.919 152.622 182.634 164.528 188.587 171.275 C 191.366 174.45 194.144 176.038 198.112 176.038 C 204.462 176.038 209.622 171.275 209.622 164.528 C 209.622 161.75 208.828 159.766 206.844 156.988 C 200.494 148.256 181.047 129.603 145.725 129.603 C 94.528 129.603 63.969 159.766 63.969 224.853 Z M 322.334 129.603 C 271.137 129.603 238.991 159.766 238.991 224.853 C 238.991 289.941 271.137 320.5 322.334 320.5 C 373.928 320.5 405.678 289.941 405.678 224.853 C 405.678 159.766 373.928 129.603 322.334 129.603 Z M 322.334 297.481 C 285.822 297.481 264.787 275.653 264.787 224.853 C 264.787 174.847 285.822 152.622 322.334 152.622 C 358.847 152.622 379.881 174.847 379.881 224.853 C 379.881 275.653 358.847 297.481 322.334 297.481 Z M 470.766 144.684 C 470.766 137.541 465.209 131.984 458.066 131.984 C 450.922 131.984 445.366 137.541 445.366 144.684 L 445.366 305.816 C 445.366 312.959 450.922 318.516 458.066 318.516 C 465.209 318.516 470.766 312.959 470.766 305.816 L 470.766 216.916 C 470.766 180.403 489.419 155.003 525.931 155.003 C 532.678 155.003 538.234 149.447 538.234 142.7 C 538.234 135.953 532.678 130.397 525.931 130.397 C 498.547 130.397 478.703 143.891 470.766 162.147 L 470.766 144.684 Z " fill-rule="evenodd" fill="rgba(255,255,255,95%)"/><path d=" M 815.583 312.449 C 814.359 312.449 813.288 313.52 813.288 314.744 L 813.288 406.081 C 813.288 416.943 818.336 422.604 827.516 422.604 C 828.587 422.604 829.505 421.686 829.505 420.615 C 829.505 419.544 828.587 418.626 827.516 418.626 C 820.937 418.626 817.877 414.954 817.877 406.081 L 817.877 314.744 C 817.877 313.52 816.806 312.449 815.583 312.449 Z M 845.416 312.449 C 844.192 312.449 843.121 313.52 843.121 314.744 L 843.121 406.081 C 843.121 416.943 848.17 422.604 857.35 422.604 C 858.421 422.604 859.339 421.686 859.339 420.615 C 859.339 419.544 858.421 418.626 857.35 418.626 C 850.771 418.626 847.711 414.954 847.711 406.081 L 847.711 314.744 C 847.711 313.52 846.64 312.449 845.416 312.449 Z M 868.212 386.498 C 868.212 411.588 879.993 423.369 899.576 423.369 C 911.968 423.369 919.159 417.555 922.219 415.107 C 922.984 414.495 923.137 413.883 923.137 413.424 C 923.137 412.353 922.219 411.435 921.148 411.435 C 920.689 411.435 920.383 411.588 919.924 411.894 C 915.946 414.954 910.133 419.391 899.576 419.391 C 882.288 419.391 873.108 409.447 873.108 386.498 C 873.108 363.854 882.288 353.757 899.576 353.757 C 911.815 353.757 916.405 359.418 919.006 362.478 C 919.465 363.089 919.924 363.395 920.689 363.395 C 921.76 363.395 922.678 362.478 922.678 361.407 C 922.678 360.948 922.525 360.489 922.219 360.03 C 920.689 358.041 914.722 349.779 899.576 349.779 C 879.993 349.779 868.212 361.407 868.212 386.498 Z " fill-rule="evenodd" fill="rgba(255,255,255,95%)"/></g></g></svg>
<div style="color: white; font-family: sans-serif; place-self: center; font-size: 6vmin;">
<!--
Better living through <span class="roller"><span>security.</span><span>privacy.</span></span>-->
<svg width="80vmin" viewBox="0 0 800 50" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="patha" d="m 0 37.5 h 500"/>
<path id="pathb" d="m 500 37.5 h 600">
<animate attributeName="d" values="m500,37.5 h0; m500,37.5 h300; m500,37.5 h300; m500,37.5 h0; m500,37.5 h0;" keyTimes="0; 0.05; 0.20; 0.25; 1.0" dur="20s" begin="0s" repeatCount="indefinite"></animate>
</path>
<path id="pathc" d="m 500 37.5 h 600">
<animate attributeName="d" values="m500,37.5 h0; m500,37.5 h300; m500,37.5 h300; m500,37.5 h0; m500,37.5 h0;" keyTimes="0; 0.05; 0.20; 0.25; 1.0" dur="20s" begin="-5s" repeatCount="indefinite"></animate>
</path>
<path id="pathd" d="m 500 37.5 h 600">
<animate attributeName="d" values="m500,37.5 h0; m500,37.5 h300; m500,37.5 h300; m500,37.5 h0; m500,37.5 h0;" keyTimes="0; 0.05; 0.20; 0.25; 1.0" dur="20s" begin="-10s" repeatCount="indefinite"></animate>
</path>
<path id="pathe" d="m 500 37.5 h 600">
<animate attributeName="d" values="m500,37.5 h0; m500,37.5 h300; m500,37.5 h300; m500,37.5 h0; m500,37.5 h0;" keyTimes="0; 0.05; 0.20; 0.25; 1.0" dur="20s" begin="-15s" repeatCount="indefinite"></animate>
</path>
<text font-size="53" font-family="IBM Plex Sans" fill="hsla(0, 0%, 100%, 1)">
<textPath xlink:href="#patha">Better living through
</textPath>
<textPath xlink:href="#pathb" font-weight="bold">privacy.</textPath>
<textPath xlink:href="#pathc" font-weight="bold">flexibility.</textPath>
<textPath xlink:href="#pathd" font-weight="bold">anonymity.</textPath>
<textPath xlink:href="#pathe" font-weight="bold">technology.</textPath>
</text>
<!--<use xlink:href="#path" stroke="white" stroke-width="3px"/>
-->
</svg></div>
</div>
</div>
</div>
</div>
Raw
script.js
(function(){
var num_particles = 50;
var yzamplmin = 0.3;
var yzamplmax = 0.8;
var xperiodmax = 100.0;
var xperiodmin = 300.0;
var yperiodmax = 100.0;
var yperiodmin = 40.0;
var z_scale = 1.2;
var mid_r = 15;
var near_r = mid_r * z_scale;
var far_r = mid_r / z_scale;
var near_l = 75;
var mid_l = 100;
var far_l = 80;
var getUnique = (function() {
var nextUnique = performance.now();
function _getUnique() {
nextUnique = nextUnique + 1;
return nextUnique;
};
return _getUnique;
})();
function padNumToStr(n, places) {
var s = String(Number(n)).split(".").join("");
s = s.substr(s.length-places);
return s.padStart(places, "0");
}
function addStyleRule(ruletext) {
if(document.styleSheets.length < 1) {
var sheetel = document.createElement("style");
document.head.appendChild(sheetel);
}
var sheet = document.styleSheets[document.styleSheets.length - 1];
return sheet.insertRule(ruletext, sheet.cssRules.length);
}
/*
function roller(el, rolltime, rolldelay) {
var unique = "roller" + padNumToStr(getUnique(), 10);
console.info("setting up roller for ", el, ": unique is ", unique);
var clds = Array.from(el.querySelectorAll(". > *")).filter(function(n){return n.nodeType == document.ELEMENT_NODE});
console.debug("roller(", el, ") has "+clds.length+" viable children: ",clds);
var n = clds.length;
var totaltime = (rolltime + rolldelay) * n;
var fadepercent = 100.0*(rolltime/totaltime);
var delaypercent = 100.0*(rolldelay/totaltime);
var keyframesname = "roller" + padNumToStr(getUnique(), 6);
console.info("keyframesname is ", keyframesname, " for roller parent ", el);
addStyleRule("@keyframes "+keyframesname+" { "+
"from { opacity: 0.0; transform: translateY(-50%); }, "+
(fadepercent)+"% { opacity: 1.0; transform: translateY(0); } " + (fadepercent+delaypercent) + "% { opacity: 1.0; transform: translateY(0); } " + (fadepercent*2+delaypercent) + "% { opacity: 0.0; transform: translateY(50%); } to { opacity: 0.0; transform: translateY(-50%); } }");
for(var i=0; i < clds.length; i++) {
var cld = clds[i];
cld.style.gridRowStart = "1";
cld.style.gridRowEnd = "-1";
cld.style.gridColumnStart = "1";
cld.style.gridColumnEnd = "-1";
cld.style.animationName = keyframesname;
cld.style.animationDuration = totaltime + "s";
cld.style.animationDelay = ((rolltime + rolldelay) * i) + "s ";
cld.style.animationIterations = "infinite";
cld.style.opacity = 0.0;
}
}
document.addEventListener("load", function() {
var els
= Array.from(document.querySelectorAll(".roller"));
for(var i=0; i < els.length; i++)
{
roller(els[i], 1, 3);
}
});
*/
document.addEventListener("load", function() {
var particles = [];
function createSVGNode(n, v, camel) {
if(camel == undefined)
camel = false;
var node = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
node.setAttributeNS(null, camel ? p : p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
return node;
}
/*
We want to animate three transformations independently, so we need two wrapper g elements around our
actual particle's path element, one to animate the x translation, one for the y translation animation,
and theq scaling animation we can apply to the path element itself.
*/
var txgroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
txgroup.appendChild(
createSVGNode("animateTransform", {
'attributeName': "transform",
'type': "translate",
'from': "-10 0",
'to': "1010 0",
'begin': (-xperiod * xphase) + "s",
'dur': xperiod + "s",
'repeatCount': "indefinite",
//'keySplines': "0.5 0 0.5 1",
'keyTimes': "0; 1"
//'calcMode': 'spline'
}, true)
);
var tygroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
tygroup.appendChild(
createSVGNode("animateTransform", {
'attributeName': "transform",
'type': "translate",
'values': "0 "+(250 - 250 * yzampl)+"; 0 "+(250 + 250 * yzampl)+"; 0 "+(250 - 250 * yzampl)+"",
'begin': (-yperiod * yphase)+"s",
'dur': yperiod+"s",
'repeatCount': "indefinite",
'keySplines': "0.5 0 0.5 1; 0.5 0 0.5 1",
'keyTimes': "0; 0.5; 1",
'calcMode': 'spline'
}, true)
);
var tzgroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
tzgroup.appendChild(
createSVGNode("animateTransform", {
'attributeName': "transform",
'type': "scale",
'values': ""+(mid_r / (1.0/ z_scale * yzampl))+"; "+(mid_r * (1.0/z_scale * yzampl))+"; "+(mid_r / (1.0/z_scale * yzampl)),
'begin': -(yperiod/4 + yperiod * (yphase))+"s",
'dur': yperiod+"s",
'repeatCount': "indefinite",
'keySplines': "0.5 0 0.5 1; 0.5 0 0.5 1",
'keyTimes': "0; 0.5; 1",
'calcMode': 'spline'
}, true)
);
var particle = createSVGNode("path", {
//filter: "url(#f1)",
//mask: "url(#myMask)",
fill: "#fff",
fillOpacity: 2.0/5.0,
strokeOpacity: 5.0/6.0,
strokeWidth: 0.05,
stroke: "#fff",
d: "M 0,-0.5 0.433012,-0.25 V 0.25 L 0,0.5 -0.433012,0.25 v -0.5 z"
});
txgroup.appendChild(tygroup);
tygroup.appendChild(tzgroup);
tzgroup.appendChild(particle);
particles[particles.length] = txgroup;
particle.classList.add("particle");
//particle.setAttribute("fill-opacity", "50%");
//particle.setAttribute("stroke-width", "1");
//particle.style.animation = "leftright " + xperiod + "s " + " -" + (xperiod * xphase) + "s infinite linear, "+updownanimname+" " + yperiod + "s -" + ((yphase*yperiod*2)) + "s infinite alternate ease-in-out, "+inoutanimname+" " + yperiod + "s -" + ((yperiod/2)+(yphase*yperiod*2)) + "s infinite alternate ease-in-out";
document.getElementById("particles").appendChild(txgroup);
};
function random(lo, hi) {
return lo + Math.random() * (hi-lo);
};
for(var i = 0; i < num_particles; i ++) {
addparticle(random(xperiodmin, xperiodmax),
random(yperiodmin, yperiodmax),
random(0,1),
random(0,1),
random(yzamplmin, yzamplmax));
}
}, true);
})();
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,500,600,700|IBM+Plex+Sans+Condensed:100,200,300,400,500,600,700|IBM+Plex+Sans:100,200,300,400,500,600,700&subset=latin-ext');
html, body, div {
font-family: 'IBM Plex Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: bold;
}
/*p {
font-family: 'IBM Plex Serif', serif;
}*/
code, pre {
font-family: 'IBM Plex Mono', monospace;
}
svg#particles {
/* background: linear-gradient(to top right, #112, #244, #466, #243),
radial-gradient(circle farthest-corner at center, #8888, #4448);
*/
background-image: radial-gradient(circle farthest-corner at center, #0000, #000a), linear-gradient(to top right, #92FFC0, #204661);
opacity: 100%;
}
.particle {
stroke: white;
stroke-width: 0.025;
stroke-opacity: 0.75;
fill-opacity: 0.25;
mix-blend-mode: /*normal|multiply|screen|*/overlay/*|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity*/;
}
span.roller {
display: inline-grid;
overflow: show;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
@keyframes roller2 {
from { opacity: 0; transform: translateY(-50%); }
5% { opacity: 1; transform: translateY(0); }
45% { opacity: 1; transform: translateY(0); }
50% { opacity: 0; transform: translateY(50%); }
to { opacity: 0; transform: translateY(-50%); }
}
span.roller > span {
grid-column-start: 1;
grid-row-start: 1;
}
span.roller > span:nth-of-type(2) {
animation: roller2 6s 0s infinite ease;
}
span.roller > span:nth-of-type(1) {
animation: roller2 6s -3s infinite ease;
}
div.container {
scroll-snap-type: y proximity /* mandatory*/;
overflow-y: scroll;
}
div.container > div {
scroll-snap-align: start;
}
Console
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment