Ответы пользователя по тегу HTML
  • Как сделать такой эффект у слайдера?

    Для такого эффекта нужно использовать 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/
    Ответ написан
    Комментировать
  • Как делается эффект такого скроллинга?

    Вот вам плагин как раз для этих целей: 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
    Ответ написан
    Комментировать