0

Вот сайт:

https://style-plitka.ru

В работе использовал wow.js + animate.css Добавлял к элементам и блокам эффект появления при скролинге. На десктопной версии всё в порядке, но при адаптации возникла проблема. Вот видео, в каких то местах происходят "прыжки вверх":

Видео

Подключение animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Подключение wow.js

<script src="js/wow.min.js"></script>

Честно не знаю какой код привести в пример, в подключении ничего трудного нет и все отрабатывает. наверное вопрос к тем, кто с этим сталкивался. Ну вот к примеру код с формой которая точно прыгает:

<section class="stock">     <!-- Скидочка и заявка -->
    <img src="img/image-background/background_three.png" alt="layout" class="image-background image-background_stock">
    <div class="container">
        <div class="stock__grid">
            <div class="form form_stock wow animate__animated animate__fadeInLeft">
                <h2 class="title title_fz45 title_fz45_white form__title">
                    ЗАЯВКА
                </h2>
                <div class="title title_fz22 form__subtitle">
                    Оставьте заявку прямо сейчас
                </div>
                <form action="mailer/smart.php" class="form__wrapper">      <!-- Заявка -->
                    <div class="form__select">      <!-- Услуга -->
                        <select name="service" id="service" class="title title_fz15 title_fz15_black">
                            <option>Ремонт ванных</option>
                            <option>Укладка плитки</option>
                            <option>Фотоплитка</option>
                        </select>
                        <label for="service" class="title title_fz14 title_fz14_montserrat">Услуга</label>
                    </div>
                    <div class="form__input">   <!-- Площадь + Арес -->
                        <div class="form__block">
                            <input name="address" type="text" class="title title_fz15 title_fz15_black" placeholder="г. Москва, ул. Перовская, д.1, к.2">
                            <label for="address" class="title title_fz14 title_fz14_montserrat">Адрес</label>
                        </div>
                        <div class="form__block form__block_width">
                            <input name="square" type="number" class="title title_fz15 title_fz15_black" placeholder="15 м&#178;">
                            <label for="square" class="title title_fz14 title_fz14_montserrat">Площадь</label>
                        </div>
                    </div>
                    <div class="form__input">       <!-- Имя + Емаил -->
                        <div class="form__block">
                            <input name="email" type="email" class="title title_fz15 title_fz15_black" placeholder="example@inbox.ru">
                            <label for="email" class="title title_fz14 title_fz14_montserrat">Ваша почта</label>
                        </div>
                        <div class="form__block form__block_width">
                            <input name="name" type="text" class="title title_fz15 title_fz15_black" placeholder="Иван">
                            <label for="name" class="title title_fz14 title_fz14_montserrat">Ваше имя</label>
                        </div>
                    </div>
                    <div class="form__input">   <!-- Телефон + Кнопка -->
                        <div class="form__block">
                            <input name="phone" class="title title_fz15 title_fz15_black" required placeholder="+7 999 999-99-99">
                            <label for="phone" class="title title_fz14 title_fz14_montserrat">Ваш телефон</label>
                        </div>
                        <button type="submit" class="button button_form title title_fz15 title_fz15_font">
                            Отправить
                        </button>
                    </div>
                    <div class="form__input">
                        <input name="check" type="checkbox" checked required>
                        <div class="title title_fz15 title_fz15_font title_fz15_unset form__check">Согласие на обработку <a href="confidentiality.html">персональных данных</a></div>
                    </div>
                </form>
            </div>
            <div class="stock__block">      <!-- Скидка -->
                <div class="stock__wrapper">
                    <h2 class="title title_black title_fz80 title_fz80_media stock__title">
                        СКИДКА
                    </h2>
                    <div class="title title_gradient title_fz120 stock__procent">
                        10%
                    </div>
                </div>
                <div class="titile title_gradient title_fz30 title_fz30_media stock__subtitle wow animate__animated animate__fadeInRight">
                    При заказе с сайта
                </div>
            </div>
        </div>
    </div>
</section>

Пока искал решение, наткнулся на одну историю: Если прописать overflow-x: hidden; для всех элементов

* {overflow-x: hidden;}

То скролл получается плавным, все работает как надо, прыжков нет, но появляются полосы прокрутки в тех блоках/элементах, где происходят прыжки. Это наталкивает меня на мысли что дело в ширине, но как применить эту находку, я не знаю. Честно, очень хочу вникнуть и разобраться почему так происходит.

1 ответ 1

0

Решением оказалось, создать div с классом

Классу дать свойство overflow со значением hidden

И элемент/блок у которых прописана анимация оборачивать в этот div

В общем манипуляции с этой обёрткой принесли результат, анимация теперь практически везде плавная. Пока пытался сделать заметил, что прыжки происходят только там, где анимация подразумевает сдвиг вправо/влево. Видимо для четкой анимации без прыжков wow.js и animate.css требуется блок с определенной шириной/высотой

Надеюсь это решение кому то поможет, а то реально сутки был в ступоре.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.