feat: Update card script
- Use vanilla instead of jQuery - Remove super script - Remove event for dither variant - Reindent
This commit is contained in:
parent
9ff731395a
commit
9fbc19388f
1 changed files with 76 additions and 85 deletions
|
|
@ -9,100 +9,91 @@ tags:
|
|||
{% extends "demo/_default.njk" %}
|
||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block title %}{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="card_bkg">
|
||||
<div id="dither"></div>
|
||||
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||
{# <defs>
|
||||
<filter id="turb3">
|
||||
<feColorMatrix type="saturate" values="1" />
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
|
||||
</filter>
|
||||
<symbol id="triangle-5">
|
||||
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<g>
|
||||
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
|
||||
</g> #}
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
||||
</svg>
|
||||
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
|
||||
</div>
|
||||
<div class="card_box">
|
||||
<div id="jsCardHover">
|
||||
<p>Titel<br/>und Beschreibung</p>
|
||||
<h1>{{ ph.name() }}</h1>
|
||||
<p>
|
||||
{{ ph.email('card_address') }}<br/>
|
||||
{{ ph.link('decent', 'site.tld') }}
|
||||
·
|
||||
{{ ph.address('decent') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<div class="card_bkg">
|
||||
<div id="dither"></div>
|
||||
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||
{# <defs>
|
||||
<filter id="turb3">
|
||||
<feColorMatrix type="saturate" values="1" />
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
|
||||
</filter>
|
||||
<symbol id="triangle-5">
|
||||
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<g>
|
||||
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
|
||||
</g> #}
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
||||
</svg>
|
||||
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
|
||||
</div>
|
||||
<div class="card_box">
|
||||
<div id="js_content">
|
||||
<p>Titel<br/>und Beschreibung</p>
|
||||
<h1>{{ ph.name() }}</h1>
|
||||
<p>
|
||||
{{ ph.email('card_address') }}<br/>
|
||||
{{ ph.link('decent', 'site.tld') }}
|
||||
·
|
||||
{{ ph.address('decent') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
|
||||
<script>
|
||||
const flag = document.getElementById("flag");
|
||||
let colors = new Array();
|
||||
let iId = undefined;
|
||||
let position = 0;
|
||||
|
||||
var colors = new Array();
|
||||
var position = 0;
|
||||
for (let i = 1; i <= flag.childElementCount; i++) {
|
||||
colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
|
||||
}
|
||||
|
||||
for (var i = 1; i <= $("#flag").children().length; i++) {
|
||||
colors.push($("#triangle-" + i).attr("fill"));
|
||||
}
|
||||
// console.log(colors);
|
||||
|
||||
$('#jsCardHover').on({
|
||||
mouseenter: function () {
|
||||
// $('#flag').addClass('effect');
|
||||
// $('#flag').css('opacity', 0);
|
||||
$('#flag')
|
||||
.stop()
|
||||
.fadeOut(10000);
|
||||
this.iid = setInterval(function () {
|
||||
for (var i = 1; i <= colors.length; i++) {
|
||||
position++;
|
||||
if (position >= colors.length) {
|
||||
position = 0;
|
||||
}
|
||||
$("#triangle-" + i).attr("fill", colors[position]);
|
||||
}
|
||||
position++;
|
||||
if (position >= colors.length) {
|
||||
position = 0;
|
||||
}
|
||||
}, 600);
|
||||
},
|
||||
mouseleave: function () {
|
||||
// $('#flag').removeClass('effect');
|
||||
// $('#flag').css('opacity', 1);
|
||||
$('#flag')
|
||||
.stop()
|
||||
.fadeIn(1000);
|
||||
this.iid && clearInterval(this.iid);
|
||||
},
|
||||
click: function () {
|
||||
$("#dither").toggle();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
document.getElementById('js_content').addEventListener('mouseenter', () => {
|
||||
iId = setInterval(() => {
|
||||
for (let i = 1; i <= colors.length; i++) {
|
||||
position++;
|
||||
|
||||
if (position >= colors.length) {
|
||||
position = 0;
|
||||
}
|
||||
|
||||
document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
|
||||
}
|
||||
|
||||
position++;
|
||||
|
||||
if (position >= colors.length) {
|
||||
position = 0;
|
||||
}
|
||||
}, 600);
|
||||
});
|
||||
|
||||
document.getElementById('js_content').addEventListener('mouseleave', () => {
|
||||
iId && clearInterval(iId);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue