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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +76 -85
1 changed files with 76 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9fbc19388f - Show all commits

55
source/screens/demo/examples/card.njk
View file

@ -9,13 +9,15 @@ tags:
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %} {% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}
{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="card_bkg"> <div class="card_bkg">
<div id="dither"></div> <div id="dither"></div>
@ -45,7 +47,7 @@ tags:
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #} {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div> </div>
<div class="card_box"> <div class="card_box">
<div id="jsCardHover"> <div id="js_content">
<p>Titel<br/>und Beschreibung</p> <p>Titel<br/>und Beschreibung</p>
<h1>{{ ph.name() }}</h1> <h1>{{ ph.name() }}</h1>
<p> <p>
@ -58,51 +60,40 @@ tags:
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }}
<script> <script>
$(document).ready(function () { const flag = document.getElementById("flag");
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', ''); let colors = new Array();
let iId = undefined;
let position = 0;
var colors = new Array(); for (let i = 1; i <= flag.childElementCount; i++) {
var position = 0; colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
for (var i = 1; i <= $("#flag").children().length; i++) {
colors.push($("#triangle-" + i).attr("fill"));
} }
$('#jsCardHover').on({ // console.log(colors);
mouseenter: function () {
// $('#flag').addClass('effect'); document.getElementById('js_content').addEventListener('mouseenter', () => {
// $('#flag').css('opacity', 0); iId = setInterval(() => {
$('#flag') for (let i = 1; i <= colors.length; i++) {
.stop()
.fadeOut(10000);
this.iid = setInterval(function () {
for (var i = 1; i <= colors.length; i++) {
position++; position++;
if (position >= colors.length) { if (position >= colors.length) {
position = 0; position = 0;
} }
$("#triangle-" + i).attr("fill", colors[position]);
document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
} }
position++; position++;
if (position >= colors.length) { if (position >= colors.length) {
position = 0; position = 0;
} }
}, 600); }, 600);
},
mouseleave: function () {
// $('#flag').removeClass('effect');
// $('#flag').css('opacity', 1);
$('#flag')
.stop()
.fadeIn(1000);
this.iid && clearInterval(this.iid);
},
click: function () {
$("#dither").toggle();
}
}); });
document.getElementById('js_content').addEventListener('mouseleave', () => {
iId && clearInterval(iId);
}); });
</script> </script>
{% endblock %} {% endblock %}