Wertarbeit – Webers Testseite

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');

Webers Webdesign

Kontakt

Geöffnet • schließt um 17:00 Uhr

Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Erforderlichen Service akzeptieren und Inhalte entsperren

Kontakt

Telefon

E-Mail