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

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

@ -28,7 +28,6 @@
<body class="{{ bodyClass }}">
{{ log.log('BODY start') }}
{% include "hippie/partials/_body_hover.njk" %}
{% include "hippie/partials/_body_nav.njk" %}
<div id="root">
{% 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();
});

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

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

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

@ -1,28 +1,33 @@
<!-- nav.partial -->
<div class="pos_rel">
<nav class="nav_page_meta">
<ul>
<li class="js_scrolltop di_none">
<a href="#begin" class="a_button_meta">
<div class="sprite_img demo__sprite_up"></div>
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
</a>
</li>
<li>
{# <button class="">Show Meta Information</button> #}
{# <a href="#meta" class="js_showmeta a_button_meta">
<nav class="nav_page_meta">
<ul>
<li class="js_scrolltop di_none">
<a href="#begin" class="a_button_meta">
<div class="sprite_img demo__sprite_up"></div>
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
</a>
</li>
<li>
{# <button class="">Show Meta Information</button> #}
{# <a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta"></div>
</a> #}
<button class="js_showmeta button_clear" type="button"><div class="sprite_img demo__sprite_meta"></div></button>
</li>
<li class="js_scrolldown">
<a href="#end" class="a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
<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 class="js_scrolldown">
<a href="#end" class="a_button_meta">
<div class="sprite_img demo__sprite_down"></div>
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
</div>
{# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span>