Loading
Для Ани Мельник
Astroseng vaberas: matnationalism krons iska i ening. Diaheten sabyheten, plus mira, kroning. Tetravevis selfie den dopp bening mal miviren om viralgranska i infralig nerat och semiligt inte last.
Polig bektig
       tills fototion
Инструкция
(скрыть)
1. Сделайте нужную анимацию на svgartista.net. Задайте анимации класс, в поле animation type выберите transition.

! Обязательно задавайте каждой новой SVG разные классы, иначе на странице будет проигрываться одна и так же анимация для всех SVG.

2. Нажмите GET CODE и скопируйте код SVG, вставьте код в блок T123 или в блок HTML внутри зеро блока.
Если вы планируете на странице использовать SVG, добавленные кодом без анимации, то добавьте скопированной на svgartista SVG класс. Для этого нужно после слова svg через пробел написать class="название__класса".

3. Скопируйте Transition code и вставьте его в блок T123 на страницу внутрь тега style.

<style>вставить код сюда</style>

4. Если вы задали SVG класс, то вставьте его в первое поле формы. Если не задали, то не пишите ничего в поле (если написали и стерли, то напишите вручную svg в поле).

5. Выберите, хотите ли вы проигрывать анимацию каждый раз, когда она появляется в зоне видимости. Или же проигрывать ее единожды, когда она оказалась в зоне видимости.

6. Скопируйте код и вставьте в блок T123.

7. После проверки работоспособности сожмите код на этом сайте. Это позволит сократить вес кода на 25-30%.


Если не работает

1. Проверьте, вставили ли вы стили в тег <style>...</style>

2. Проверьте, есть ли отступ между заданным классом и svg.

3. Откройте консоль Ctrl + Shift + I → Console и посмотрите ошибки. Иногда, код отображается в редакторе с ошибками, в таком случае ее можно будет там увидеть. Если не хватает каких-то скобок, то их нужно проставить.
<script>
window.addEventListener('load', function() {
    function obs () {
        let allAnimation = document.querySelectorAll('svg');
        allAnimation.forEach((el) => el.classList.add('svg-animation'));

        var observer = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) entry.target.classList.add('active');
                else entry.target.classList.remove('active');
            });
        });

        var variableTexts = document.querySelectorAll(".svg-animation");
        variableTexts.forEach(function(el) { observer.observe(el); });
    }

    obs();

    window.addEventListener('scroll', function() {
        obs();
    })
});
</script>
Made on
Tilda