Vlad Feninets

<div style="height: 2000px; width: 400px; margin: 0 auto;" id="map-wrap">
            <iframe style="pointer-events: none;" src="https://yandex.ru/map-widget/v1/?um=constructor%3Ac94e45d7f53bf7d35e1ae3e4946b0966305666753488de23effbc47e7d2d337f&amp;lang=ru_RU&amp;scroll=false&amp;source=constructor" width="100%" height="100%" frameborder="0"></iframe>
        </div>

document.addEventListener('click', function(e) {
                var map = document.querySelector('#map-wrap iframe')
                if(e.target.id === 'map-wrap') {
                    map.style.pointerEvents = 'all'
                } else {
                    map.style.pointerEvents = 'none'
                }
            })

<button id="run">click me</button>
<div id="block"></div>

.fade-effect.-show {
  animation: fade 0.5s ease;
}

@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1 }
}

const textArr = [ 'OH', 'MY', 'GLOB' ]

const divEl = document.querySelector('#block')
const changeDelay = 2000
const fadeOutDelay = 1000

document.querySelector('#run').addEventListener('click', () => { 
    textArr.map((txt, idx) => {
        setTimeout(() => {
            divEl.className = 'fade-effect -show'
            divEl.innerHTML = txt

            setTimeout(() => {
                divEl.className = ''
            }, !idx ? fadeOutDelay : idx * fadeOutDelay)

        }, idx * changeDelay)
    })
})

const classOf = (object) => Object.prototype.toString.call(object).slice(8, -1)

classOf("test me") // -> String
classOf([1, 2, 3]) // -> Array

<a id="fakelink" data-href="http://google.com">click</a>

document.querySelector('#fakelink').addEventListener('click', function() {
	var link = this.getAttribute('data-href')
	this.setAttribute('href', link)
})