<div style="width: 100%; background-color: #fff;">
<button style="width: 100%;height: 50px;">
Зарегистрироваться
<div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
</button>
</div>
var options = {
root: null, // Не указываем = следим за областью вьюпорта.
rootMargin: '0px', // отступы вокруг root
threshold: 1.0
}
var callback = function(entries, observer) {
// Открываем модалку
};
var observer = new IntersectionObserver(callback, options);
/* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */
var target = document.querySelector('#popup'); // элемент, за которым будем следить.
observer.observe(target);
:target
htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.:target
, то есть если нужно подсветить цель ссылки:#one {
color: blue;
background-color: transparent;
}
#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд.
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
animation: blur 10s ease-in-out ... ;
}
@keyframes blur {
// другие ключевые кадры
50% {
color: red;
background-color: yellow;
}
}
<div class="post"></div>
.post{
width: 400px; // ограничит ширину блоков на отметке в 400 пикселей. (Но каждый блок будет всё равно начинаться с новой строки.)
}
var playerInfo = document.querySelector('.win').textContent.trim(); // AZE KING, 47 уровень
var playerName = playerInfo.slice(0, playerInfo.indexOf(',')) // AZE KING;
var url = "site.com/add.php?name=" + playerName;
var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
// И сделать это массивом. Удобно, если дальше нужно так же что-то делать с уровнем или будут ещё другие параметры игрока через запятую.
var playerInfo = document.querySelector('.win').textContent.trim().split(','); // ['AZE KING', '47 уровень']
var playerName = playerInfo[0] // AZE KING;
var url = "site.com/add.php?name=" + playerName;
var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);