diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index cdca2f2..ef2e3c7 100644 --- a/source/code/hippie/functions.js +++ b/source/code/hippie/functions.js @@ -11,16 +11,6 @@ function setup() { console.dir(hippie); console.groupEnd(); } - - // WANNABE MODULE Mouse over effect - // With CSS only - if ($('#js_mob').length && viewHover) { - $('#js_mob').addClass('mouse_over'); - } - // if (viewHover) { - // $('body').prepend('
'); - // } - // With JS } // MODULE Scroll navigation @@ -70,6 +60,27 @@ function HippieScroll($tp, $dn) { }); } +function HippieFade(toggleElement, initState) { + 'use strict'; + + const fragment = document.createDocumentFragment(); + const overlay = document.createElement('div'); + + overlay.id = 'mouse-overlay'; + + if (initState) { + overlay.classList.add('active'); + } + + toggleElement.addEventListener('click', function () { + overlay.classList.toggle('active'); + }); + + fragment.appendChild(overlay); + document.body.style.position = 'relative'; + document.body.prepend(fragment); +} + // MODULE Meta elements function HippieMeta($ma, $pp) { 'use strict'; diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js index e1f77e7..b5d8538 100644 --- a/source/code/hippie/variables.js +++ b/source/code/hippie/variables.js @@ -27,4 +27,4 @@ const flagColors = [ 'b7e0f0', '6bc7d9', '52bed1' -] \ No newline at end of file +]; \ No newline at end of file diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk index 44898cc..e6ee3cd 100644 --- a/source/screens/demo/examples/intro.njk +++ b/source/screens/demo/examples/intro.njk @@ -5,6 +5,7 @@ tags: --- {% set pageId = "init" %} +{% set bodyClass = "body_intro" %} {% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} @@ -51,7 +52,7 @@ tags:

This needs to be seen and acknowledged.
So an interaction must be made to continue.

-
+
Hello World!

Only left mouse click or any key

@@ -140,7 +141,7 @@ tags: .then(showAgreement) .then(showIdle) .catch(er => console.error(er)) - . finally(() => { + .finally(() => { console.debug('Init end.', isAgree); // location = 'demo/examples/ui/new.html'; }); diff --git a/source/style/hippie-style b/source/style/hippie-style index b739dde..867e96e 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b739ddefda35962192aadfc2ca86a11d996ab7c9 +Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2 diff --git a/source/style/ui.scss b/source/style/ui.scss index 5a4998b..f5a80c4 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -22,6 +22,10 @@ $color_gui_back: $color_dark; } } +.body_intro { + background-color: black; +} + .step { @extend %full_parent; } @@ -46,7 +50,7 @@ $color_gui_back: $color_dark; } #progress { - width: 0%; + width: 0; height: 100%; background-color: black; } @@ -157,7 +161,7 @@ $color_gui_back: $color_dark; background-color: $color_back_basic; transition: background-color 4s; - &:hover>.mouse_over { + &:hover>.mouse-overlay { background-color: transparent !important; transition: background-color $duration_basic $timing_basic 0s !important; } diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk index 443b555..ede46e3 100644 --- a/source/templates/hippie/_main.njk +++ b/source/templates/hippie/_main.njk @@ -28,7 +28,6 @@ {{ log.log('BODY start') }} - {% include "hippie/partials/_body_hover.njk" %} {% include "hippie/partials/_body_nav.njk" %}
{% include "hippie/partials/_header.njk" %} @@ -54,6 +53,10 @@ let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown')); let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop')); + if (viewHover) { + let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true); + } + document.addEventListener('scroll', () => { scrollUi.check(); }); diff --git a/source/templates/hippie/partials/_body_hover.njk b/source/templates/hippie/partials/_body_hover.njk deleted file mode 100644 index 08311a3..0000000 --- a/source/templates/hippie/partials/_body_hover.njk +++ /dev/null @@ -1,2 +0,0 @@ - -
\ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index 632054f..870d2a6 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,28 +1,33 @@
-
{#
?