Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно. Эта методика была внедрена и ее пояснил Джейк Арчибальд в своей статье «Анимированное рисования линий в SVG», а также изучены исполнителем Brian Suda в своей статье «Анимация векторов с SVG для 24Ways». Для наших экспериментов мы используем его код для анимации штрихов дорожки.
Итак, какие понятия мы исследуем?
- Первая линия рисования анимации, который исчезает в “реальные” изображения или иллюстрации после того, как соответствующий показатель в области просмотра. Это может быть интересный эффект для любого вида иллюстрации на сайте.
- Вторая концепция рассматривает использование SVG линии рисования анимации для имитации загрузки сайта: детали сайта представляют собой плоские чертежи с инсультом, который начинает двигаться и после того, как законченный, элементы показаны.
Сама техника реализуется в статическом путь, где мы используем SVG для каждого блока элементов, которые исчезают.
Первая демо-это линия, рисунок анимации с иллюстрацией:
Вторая демо-это линия, рисунок анимация с сайта исчезают:
И третье демо похож на демо 2, только, что анимация и плавное появление элементов происходит последовательно, но со случайной скоростью:
Надеемся, что вам понравятся эффекты!
Материал взят из зарубежного источника - tympanus.net/codrops/2013/12/30/svg-drawing-animation и представлен исключительно в ознакомительных целях.
