interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Change global mouse interaction

Browse source 
- Add .body_intro to intro screen
- Change mouse over identifier
- Introduce HippieFade as global function
- Replace #js_mob with HippieFade
- Remove old partial
This commit is contained in:
sthag 2025-10-25 09:32:22 +02:00
parent 65d80fcbc4
commit ac8f55a7c9
8 changed files with 62 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

31
source/code/hippie/functions.js
View file

@ -11,16 +11,6 @@ function setup() {
console.dir(hippie); console.dir(hippie);
console.groupEnd(); console.groupEnd();
} }
// WANNABE MODULE Mouse over effect
// With CSS only
if ($('#js_mob').length && viewHover) {
$('#js_mob').addClass('mouse_over');
}
// if (viewHover) {
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
// }
// With JS
} }
// MODULE Scroll navigation // 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 // MODULE Meta elements
function HippieMeta($ma, $pp) { function HippieMeta($ma, $pp) {
'use strict'; 'use strict';

2
source/code/hippie/variables.js
View file

@ -27,4 +27,4 @@ const flagColors = [
'b7e0f0', 'b7e0f0',
'6bc7d9', '6bc7d9',
'52bed1' '52bed1'
] ];

5
source/screens/demo/examples/intro.njk
View file

@ -5,6 +5,7 @@ tags:
--- ---
{% set pageId = "init" %} {% set pageId = "init" %}
{% set bodyClass = "body_intro" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %} {% import "hippie/macros/_placeholder.njk" as ph %}
@ -51,7 +52,7 @@ tags:
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p> <p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
</div> </div>
<div id="idle" class="step op_hide"> <div id="idle" class="step op_hide">
<div class="mouse_over"></div> <div class="mouse-overlay"></div>
<div class="hello">Hello World!</div> <div class="hello">Hello World!</div>
<p class="hello">Only left mouse click or any key</p> <p class="hello">Only left mouse click or any key</p>
</div> </div>
@ -140,7 +141,7 @@ tags:
.then(showAgreement) .then(showAgreement)
.then(showIdle) .then(showIdle)
.catch(er => console.error(er)) .catch(er => console.error(er))
. finally(() => { .finally(() => {
console.debug('Init end.', isAgree); console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html'; // location = 'demo/examples/ui/new.html';
}); });

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b739ddefda35962192aadfc2ca86a11d996ab7c9 Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2

8
source/style/ui.scss
View file

@ -22,6 +22,10 @@ $color_gui_back: $color_dark;
} }
} }
.body_intro {
background-color: black;
}
.step { .step {
@extend %full_parent; @extend %full_parent;
} }
@ -46,7 +50,7 @@ $color_gui_back: $color_dark;
} }
#progress { #progress {
width: 0%; width: 0;
height: 100%; height: 100%;
background-color: black; background-color: black;
} }
@ -157,7 +161,7 @@ $color_gui_back: $color_dark;
background-color: $color_back_basic; background-color: $color_back_basic;
transition: background-color 4s; transition: background-color 4s;
&:hover>.mouse_over { &:hover>.mouse-overlay {
background-color: transparent !important; background-color: transparent !important;
transition: background-color $duration_basic $timing_basic 0s !important; transition: background-color $duration_basic $timing_basic 0s !important;
} }

5
source/templates/hippie/_main.njk
View file

@ -28,7 +28,6 @@
<body class="{{ bodyClass }}"> <body class="{{ bodyClass }}">
{{ log.log('BODY start') }} {{ log.log('BODY start') }}
{% include "hippie/partials/_body_hover.njk" %}
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
<div id="root"> <div id="root">
{% include "hippie/partials/_header.njk" %} {% include "hippie/partials/_header.njk" %}
@ -54,6 +53,10 @@
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown')); let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop')); let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
if (viewHover) {
let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
}
document.addEventListener('scroll', () => { document.addEventListener('scroll', () => {
scrollUi.check(); scrollUi.check();
}); });

2
source/templates/hippie/partials/_body_hover.njk
View file

@ -1,2 +0,0 @@
<!-- hover.partial -->
<div id="js_mob"></div>

7
source/templates/hippie/partials/_body_nav.njk
View file

@ -13,7 +13,12 @@
{# <a href="#meta" class="js_showmeta a_button_meta"> {# <a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta"></div> <div class="sprite_img demo__sprite_meta"></div>
</a> #} </a> #}
<button class="js_showmeta button_clear" type="button"><div class="sprite_img demo__sprite_meta"></div></button> <button class="js_showmeta button_clear" type="button">
<div class="sprite_img demo__sprite_meta"></div>
</button>
</li>
<li>
<button id="js-toggle-fade">F</button>
</li> </li>
<li class="js_scrolldown"> <li class="js_scrolldown">
<a href="#end" class="a_button_meta"> <a href="#end" class="a_button_meta">