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

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

Ответы

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

    @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/
    Ответ написан
    Комментировать
    Комментировать

  • Стоит ли использовать js в Angular4?

    @Talalaev
    Сам Angular как и TypeScript направлен на разработку крупных энтерпрайз приложений. Проще говоря на то, чтоб все написанное добро было единообразно по стилю, легко можно было разобраться человеку "со стороны" т.е. новому фронт-енду или бэку на С# или Java. К чему я это все! А к тому, что хоть это и фреймворк где из коробки дается много, без дополнительных модулей вам не обойтись как и без чтения документации.
    Итого на js и Angular 2/4/else будет проблема с доками и дополнительными модулями. в общем будете бороться не только с angular но и с выше сказанными пунктами :)

    В общем я бы не стал использовать js в Angular 4. ;)

    P.S.
    как бы не хотелось, но js и ts разные вещи. если вы некогда не писали на типизированных языках то столкнетесь с некоторыми сложностями по началу. так как много конструкций в ts которые нужно знать и использовать, чтоб понимать чужой код и чтоб писать свой ts хорошо, а не просто с расширением ts в конце.
    Ответ написан
    Комментировать
    Комментировать

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

    @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
    Ответ написан
    Комментировать
    Комментировать