Задать вопрос

Михаил Талалаев

Ответы пользователя по тегу HTML

  • Как сделать такой эффект у слайдера?

    @Talalaev
    Для такого эффекта нужно использовать css свойство `transform: scale(1);`
    описать процесс анимации в css файле, примерно так
    @keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}

    теперь задать время выполнения анимации, эффекты и т.д.
    .myScale {
  animation: scale 3s linear;
  animation-fill-mode: forwards;
}

    И в конце остается написать код который будет ставить и удалять класс `.myScale` на элемент который нужно увеличивать. Для этих целей можете посмотреть плагин https://github.com/Talalaev/Jazzy. Он помогает устанавливать и убирать класс анимации, легко делать задержки, обрывать анимацию и т.д.
    так же генерирует события в js в процессе выполнения анимации. можно использовать с любой готовой анимацией например с https://daneden.github.io/animate.css/
    Ответ написан
    Комментировать
    Комментировать

  • Как делается эффект такого скроллинга?

    @Talalaev
    Вот вам плагин как раз для этих целей: https://github.com/Talalaev/scrollingAnchors
    Как делал Petr Tichy, ссылку на сайт которого вы привели , предполагать не возьмусь. Общий алгоритм используя плагин будет такой. Создаем страничку с якорями. Якорь это любой тег с идентификатором. Например, <div id="achor_1"></div>. Просто пустой тег без текста. И начинаем их располагать на странице один за другим. Вот так
    <div id="some_anchor" class="anchor"></div>
<div id="some_anchor" class="anchor"></div>
...

    Между ними делаем отступы, например так .anchor {margin: 100px 0;}. И того, если создать 10 якорей у нас будет белая страница выстой 2000px. Кстати у Petr Tichy высота равна 38200px. Так мы получили нашу заготовку.

    Теперь делаем блок в котором будет отображаться видимая часть. <div id="viewer"></div> которому прописываем стили.
    #viewer {
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    ...
}

    Итого он накрывает наши и без того невидимые якоря и внутри <div id="viewer"></div> мы можем творить нашу магию, двигать что угодно куда угодно, анимировать и перемещать.

    Остается вопрос отлавливать порядок действий при прокрутке. Для этого как раз нам и нужен будет плагин scrollingAnchors. Он позволяет описать действия которые должны быть выполнены для каждого anchor, когда на последнем произойдет одно из возможных событий. Допустим первый anchor появился на экране - произошло событие onTheScreen, значит нам нужно выполнить первую анимацию.

    Весь список событий для anchor можно на странице плагина https://github.com/Talalaev/scrollingAnchors
    там же есть пример. Плюс плагин реализует не только anchor но и range т.е. это тот же anchor только анкор однопиксельный, а range имеет свою ширину и значит может частично помещаться на экран. Так же определяется направление откуда подъезжает anchor снизу или сверху. Небольшая заметка по плагину www.talalaev.com.ua/2016/04/scrolling-anchor.html
    Ответ написан
    Комментировать
    Комментировать