Joomla! България

Joomla! - Общи теми => Компоненти => K2 => Темата е започната от: Bo0by в 23 Април, 2019, 10:41:01

Титла: Анимации по време на скрол
Публикувано от: Bo0by в 23 Април, 2019, 10:41:01

Здравейте,

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

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

Титла: Re: Анимации по време на скрол
Публикувано от: Михаил Михов в 23 Април, 2019, 17:18:34

Здраво .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>


Титла: Re: Анимации по време на скрол
Публикувано от: Bo0by в 23 Април, 2019, 17:40:09

А няма ли някаква готова функционалност било то модул, плъгин и т.н за Joomla уеб сайтове?

Титла: Re: Анимации по време на скрол
Публикувано от: Михаил Михов в 24 Април, 2019, 09:30:07

Потърси по-скоро шаблон.

Титла: Re: Анимации по време на скрол
Публикувано от: Михаил Михов в 24 Април, 2019, 16:57:56

Има и инструменти за анимация в html5, виж например това:
https://greensock.com/examples-showcases

Титла: Re: Анимации по време на скрол
Публикувано от: Bo0by в 25 Април, 2019, 17:14:10

Това намерих аз като разяснение:
https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/

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

Титла: Re: Анимации по време на скрол
Публикувано от: Михаил Михов в 25 Април, 2019, 17:30:08

Трудно ще намериш нещо, защото това се прави за презентация и тн. и най-много на индекса на сайта, като отделен шаблон или част от дефолтския.

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