diff options
Diffstat (limited to '_includes')
-rw-r--r-- | _includes/extensions/trianglify.html | 13 | ||||
-rw-r--r-- | _includes/views/banner.html | 15 | ||||
-rw-r--r-- | _includes/views/header.html | 59 |
3 files changed, 75 insertions, 12 deletions
diff --git a/_includes/extensions/trianglify.html b/_includes/extensions/trianglify.html index 22003dc..c11458e 100644 --- a/_includes/extensions/trianglify.html +++ b/_includes/extensions/trianglify.html @@ -8,16 +8,19 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script> <script> - function setRandomBgImage(selector, seed) { + function setRandomBgImage(selector, seed, zoom = 1) { var element = document.querySelector(selector); if (!element) return; var pattern = Trianglify({ - width: screen.width, - height: element.offsetHeight, + width: screen.width * zoom, + height: element.offsetHeight * zoom, seed: seed }); - element.appendChild(pattern.canvas()); + + var image = document.createElement("div"); + image.style.backgroundImage = "url(" + pattern.png() + ")"; + element.appendChild(image); } - setRandomBgImage('{{ selector }}', '{{ seed }}'); + setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}}); </script> diff --git a/_includes/views/banner.html b/_includes/views/banner.html index baa8465..45ea62c 100644 --- a/_includes/views/banner.html +++ b/_includes/views/banner.html @@ -44,12 +44,14 @@ {%- else -%} - <h1 class="page-banner-heading"> - {{ heading | default: page.title | escape }} - </h1> - <h3 class="page-banner-subheading"> - {{ subheading | default: page.subtitle | escape }} - </h3> + <div class="page-banner-default"> + <h1 class="page-banner-heading"> + {{ heading | default: page.title | escape }} + </h1> + <h3 class="page-banner-subheading"> + {{ subheading | default: page.subtitle | escape }} + </h3> + <div> {%- endif -%} </div> @@ -72,6 +74,7 @@ {%- endif -%} + {%- assign zoom = 1.5 -%} {%- include extensions/trianglify.html -%} {%- endif -%} diff --git a/_includes/views/header.html b/_includes/views/header.html index 06a20ed..10637c2 100644 --- a/_includes/views/header.html +++ b/_includes/views/header.html @@ -1,4 +1,19 @@ -<header class="site-header" role="banner"> + +{%- include functions.html func='log' level='debug' msg='Get banner value' -%} +{% assign name = 'banner' %} +{%- include functions.html func='get_value' -%} +{% assign banner = return %} + +{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%} +{% assign name = 'header_transparent' %} +{%- include functions.html func='get_value' -%} +{% assign header_transparent = return %} + +{%- if banner and header_transparent -%} + {%- assign header_transparent_class = "site-header-transparent" -%} +{%- endif -%} + +<header class="site-header {{ header_transparent_class }}" role="banner"> <div class="wrapper"> {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%} @@ -42,3 +57,45 @@ {%- endif -%} </div> </header> + +<script> + (function() { + var supportPageOffset = window.pageXOffset !== undefined; + var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); + + function scrollY() { + return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; + } + + var lastScrollY = scrollY(); + var dataset = document.documentElement.dataset; + + function storeScrollData() { + var y = scrollY(); + + {%- if banner and header_transparent -%} + dataset.headerTransparent = ""; + {%- endif -%} + + var scrollStatus = ""; + + if (y <= 0) { + scrollStatus = "top"; + } else if ((window.innerHeight + y) >= document.body.offsetHeight) { + scrollStatus = "bottom"; + } else { + var isScrollDown = (y - lastScrollY > 0) ? true : false; + scrollStatus = isScrollDown ? "down" : "up"; + } + + lastScrollY = y; + dataset.scrollStatus = scrollStatus; + } + + window.addEventListener('scroll', function(e) { + storeScrollData(); + }); + + storeScrollData(); + })(); +</script> |