<body>
<div class="simple-keyboard"><input type="text"></div>
</body>.simple-keyboard {
position: relative;
}
.simple-keyboard input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}makeButtonMagic();
function makeButtonMagic() {
document.querySelector('.simple-keyboard').addEventListener('click', function () {
this.querySelector('input').focus();
})
}
querySelectorAll и IntersectionObserver поочередно создаются массивы из одинаковых по анимации элементов и на них вешается обработчик на событие появления на экране, а дальше либо ручками анимировать, либо использовать AnimeJS, GSAP и тд.
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">user-scalable=no не поглядят
require используется тогда, когда вы хотите подключить библиотеку в окружении Node.js. В браузерном JavaScript require функции нет. Подозреваю, что вы просто не изменили <script src="https://cdnjs.cloudflare.com/ajax/libs/approvejs/[version]/approve.min.js"></script>const item = document.querySelector('.item');
item.style.opacity = '0';
item.addEventListener('transitionend', function() {this.remove()});const target = document.querySelector('.target') // забираешь див через его класс (target) в HTML
target.addEventListener('click', () => { // отслеживаешь событие клика на диве (target)
target.classList.add('styles') // и применяешь стили (styles) к таргету
})const header = document.querySelector('.test') // вместо test класс твоего хэдера
window.addEventListener('scroll', () => {
if (pageYOffset > 0) {
header.classList.add('header_active') // твой класс для прозрачности, но можно и header.style.opacity = 0.5;
} else {
header.classList.remove('header_active')
}
})document.addEventListener('fullscreenchange', e => {
if (document.fullscreenElement) {
console.log('Fullscreen')
} else {
console.log("Not Fullscreen")
}
})