• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Установить переход объекта для прокрутки в CSS (Как установить высоту перехода объекта для прокрутки вниз)
Установить переход объекта для прокрутки в CSS
Kosten
Дата: Суббота, 2019-04-06, 22:34 | Сообщение 1
Администраторы
Сообщений:22338
Награды: 56


С помощью CSS3 можно добиться фиксации объекта в верхней части веб-страницы даже при прокрутке вниз. Будь то текст, изображение, видео или какой-либо другой объект, когда вы хотите, чтобы объект оставался в определенной позиции, несмотря на то, что пользователь перемещался по странице. Есть несколько причин, почему это может быть уместно, и нет необходимости использовать навязчивое всплывающее окно для достижения эффекта.

Высота объекта определяет его положение на странице, но не обеспечивает прокрутку вверх или вниз. Здесь максимальная высота вступает в игру для перехода. Давайте посмотрим на код ниже для списка, который должен переходить с прокруткой. Это не обязательно может быть решением, но это удобный обходной путь в котором все же может дать желаемый эффект.

Первый вариант:

HTML

Код
<div id="nsicreat-eansition">
    <a>Наведите меня</a>
    <ul id="atunas">
        <li>Категорий сайта №1</li>
        <li>Категорий сайта №2</li>
        <li>Категорий сайта №3</li>
        <li>Категорий сайта №4</li>
        <li>Категорий сайта №5</li>
    </ul>
</div>


CSS

Код
#nsicreat-eansition #atunas {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: #f5f5f5;
}
#nsicreat-eansition:hover #atunas {
max-height: 500px;
transition: max-height 0.25s ease-in;
}


Время может быть изменено, как требуется для более плавного перехода. Помните, что этот эффект также может быть достигнут с помощью JavaScript в зависимости от индивидуальных предпочтений.

Демонстрация

Альтернативный код

Другой способ решения этой проблемы - использовать ScaleY. Он будет хорошо работать в браузерах с поддержкой CSS3, но может не работать в версиях Internet Explorer до IE9.



Код CSS3 выглядит следующим образом:

HTML

Код
<div id="sakitu-pesaven">
    <h1>Наведите меня</h1>
    <div id="pasumu-koaching">
        Категорий сайта

        Категорий сайта

        Категорий сайта

        Категорий сайта

        Категорий сайта

        Категорий сайта

    </div>
</div>


CSS

Код
#pasumu-koaching {
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);

    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    overflow: hidden;
    background-color: #dedede;

    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}

#sakitu-pesaven:hover #pasumu-koaching {
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}


Однако такой подход не идеален, так как преобразованный объект ведет себя как относительно позиционированный элемент. Тем не менее, стоит рассмотреть в качестве альтернативы.

Демонстрация
Прикрепления: 6746248.png(9.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Установить переход объекта для прокрутки в CSS (Как установить высоту перехода объекта для прокрутки вниз)
  • Страница 1 из 1
  • 1
Поиск: