Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
remove box after a given time:
here it is 2000 milliseconds
function wordcloud_trigger_images() {
?>
<script type="text/javascript">
var wordcloud = document.getElementsByClassName('wordcloud')[0];
if (wordcloud) {
var triggerword = document.querySelectorAll(".wordcloud g[id^='Trigger_']");
var wordgroups = document.querySelectorAll(".wordcloud g[id^='Box_']");
Array.from(triggerword).forEach(function (t) {
t.addEventListener('click', function (e) {
var triggerid = this.id;
var triggertargetid = triggerid.replace('Trigger', 'Box');
Array.from(wordgroups).forEach(function (w) {
w.classList.remove('is-visible');
});
document.getElementById(triggertargetid).classList.add('is-visible');
setTimeout(function(){
document.getElementById(triggertargetid).classList.remove('is-visible');
}, 2000);
});
});
}
</script>
<?php
}
add_action('wp_footer', 'wordcloud_trigger_images');for quick css:
.wordcloud {
margin: 2rem auto;
}
.wordcloud svg {
width: 100%;
height: auto;
}
.wordcloud svg g[id^=Trigger_] {
cursor: pointer;
display: block;
}
.wordcloud svg g[id^=Box_] {
opacity: 0;
pointer-events: none;
transition: all 0.2s;
}
.wordcloud svg g[id^=Box_].is-visible {
opacity: 1;
}
.wordcloud path {
pointer-events: none !important;
}
.wordcloud svg g[id^="Box_"].is-visible > path {
filter: drop-shadow(0px 0px 5px #ccc);
}remove box when it is not in viewport:
function wordcloud_trigger_images() {
?>
<script type="text/javascript">
var wordcloud = document.getElementsByClassName('wordcloud')[0];
if (wordcloud) {
var triggerword = document.querySelectorAll(".wordcloud g[id^='Trigger_']");
var wordgroups = document.querySelectorAll(".wordcloud g[id^='Box_']");
Array.from(triggerword).forEach(function (t) {
t.addEventListener('click', function (e) {
var triggerid = this.id;
var triggertargetid = triggerid.replace('Trigger', 'Box');
Array.from(wordgroups).forEach(function (w) {
w.classList.remove('is-visible');
});
document.getElementById(triggertargetid).classList.add('is-visible');
});
});
if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
let wordgroupObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
}
else {
entry.target.classList.remove("is-visible");
}
});
},{
root: null,
threshold: 0.1,
rootMargin: "-150px 0px 0px 0px",
});
wordgroups.forEach(function(wordgroup) {
wordgroupObserver.observe(wordgroup);
});
}
}
</script>
<?php
}
add_action('wp_footer', 'wordcloud_trigger_images');