blog/_includes/extensions/trianglify.html

27 lines
761 B
HTML
Raw Normal View History

2019-09-11 06:19:34 +02:00
{% if include.selector %}
{% assign selector = include.selector %}
{% endif %}
{% if include.seed %}
{% assign seed = include.seed %}
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
<script>
function setRandomBgImage(selector, seed, zoom = 1) {
2019-09-11 06:19:34 +02:00
var element = document.querySelector(selector);
if (!element) return;
var pattern = Trianglify({
width: screen.width * zoom,
height: element.offsetHeight * zoom,
2019-09-11 06:19:34 +02:00
seed: seed
});
var image = document.createElement("div");
image.style.backgroundImage = "url(" + pattern.png() + ")";
element.appendChild(image);
2019-09-11 06:19:34 +02:00
}
setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
2019-09-11 06:19:34 +02:00
</script>