Добре дошъл/дошла, Гост. Моля, въведи своето потребителско име или се регистрирай.

Влез с потребителско име, парола и продължителност на сесията

Новини:

Автор Тема: Анимации по време на скрол  (Прочетена 3168 пъти)

Неактивен Bo0by

  • Разбирач
  • *
  • Публикации: 526
  • Репутация: 0
Анимации по време на скрол
« -: 23 Април, 2019, 10:41:01 »
0
Здравейте,

Някой има ли идея как се правят анимациите, които се изпълняват по време на скрол?
Реално скролваш сайта, но си на едно и също място и само част от контента се сменя/анимира и т.н.

Като пример:
https://www.apple.com/mac-pro/ - тук докато скролваш виждаш различните компоненти и реално си на същата позиция в сайта.
https://www.vive.com/eu/cosmos/ - тук е аналогична ситуацията.

Неактивен Михаил Михов

  • Администратор
  • Мега Гуру
  • *
  • Публикации: 3915
  • @Mihail
  • Репутация: +80
    • MyWeb1
Re: Анимации по време на скрол
« Отговор #1 -: 23 Април, 2019, 17:18:34 »
0
Здраво .js  :D
Разгледай изходния код:
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/scrollmagic-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/animation-gsap-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/debug-add-indicators-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/tweenmax-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/snap-svg-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/owl-carousel-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/picturefill-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/odometer-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/jquery-validate-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/jquery-cookie-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/purl.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/lib/jquery-vide-min.js"></script>
  <script defer src="https://www.vive.com/media/filer_public/vive/ces_2019/horus/js/default.js"></script>
myweb1.eu // Български платежни методи за HikaShop

Неактивен Bo0by

  • Разбирач
  • *
  • Публикации: 526
  • Репутация: 0
Re: Анимации по време на скрол
« Отговор #2 -: 23 Април, 2019, 17:40:09 »
0
А няма ли някаква готова функционалност било то модул, плъгин и т.н за Joomla уеб сайтове?


Неактивен Михаил Михов

  • Администратор
  • Мега Гуру
  • *
  • Публикации: 3915
  • @Mihail
  • Репутация: +80
    • MyWeb1
Re: Анимации по време на скрол
« Отговор #3 -: 24 Април, 2019, 09:30:07 »
0
Потърси по-скоро шаблон.
myweb1.eu // Български платежни методи за HikaShop

Неактивен Михаил Михов

  • Администратор
  • Мега Гуру
  • *
  • Публикации: 3915
  • @Mihail
  • Репутация: +80
    • MyWeb1
Re: Анимации по време на скрол
« Отговор #4 -: 24 Април, 2019, 16:57:56 »
0
Има и инструменти за анимация в html5, виж например това:
https://greensock.com/examples-showcases
myweb1.eu // Български платежни методи за HikaShop

Неактивен Bo0by

  • Разбирач
  • *
  • Публикации: 526
  • Репутация: 0
Re: Анимации по време на скрол
« Отговор #5 -: 25 Април, 2019, 17:14:10 »
0
Това намерих аз като разяснение:
https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/

Но не съм професионалист и по - скоро търсих някой модул/плъгин или дори темплейт, който да го предоставя и само да променя информацията в него, но още не мога да намеря нищо конкретно.

Неактивен Михаил Михов

  • Администратор
  • Мега Гуру
  • *
  • Публикации: 3915
  • @Mihail
  • Репутация: +80
    • MyWeb1
Re: Анимации по време на скрол
« Отговор #6 -: 25 Април, 2019, 17:30:08 »
0
Трудно ще намериш нещо, защото това се прави за презентация и тн. и най-много на индекса на сайта, като отделен шаблон или част от дефолтския.

По принцип се иска познание за писане на html5, css3 & .JS на анимацията и после пригаждането и към Джумлата.
Но най важното е, че се почва от графиката и конкретния проект по дизайна. За това трудно ще намериш и нещо готово по темата.
myweb1.eu // Български платежни методи за HikaShop