2015-05-17 2 views
-5

http://brightmedia.pl/?lang=en&site=introКакая технология используется на этом веб-сайте?

Какие технологии используются для отображения белой строки на экране при прокрутке страницы?

Это те же навыки, которые используются в http://www.flyacts.com/multi-channel-app/, поскольку линия медленно спускается по мере прокрутки?

+0

В jquery у вас есть атрибут '.scrollTop()'. Я думаю, что они используют что-то вроде этого, чтобы обнаружить позицию пользователя на сайте и, например, оживить предмет для этого раздела сайта – Vinc199789

+0

'parallax.js' или' skrollr.js'. – odedta

+0

Я добавил дополнительную информацию в свой ответ, пожалуйста, проверьте! –

ответ

1

Используется главным образом элемент холста! Если вы внимательно изучили следующие разделы HTML, вы узнаете.

<head>...</head> 
<body id="page" class="bodyEnableScroll"> 
<div id="bg" class="" style="width: 100%; height: 7738px;"> 
    <canvas id="mainBgC" height="438" width="1440" style="width: 1440px; height: 438px;"></canvas> 
    <canvas id="shinesBgC" height="438" width="1440" style="width: 1440px; height: 438px;"></canvas> 
    <canvas id="animationC" height="438" width="1440" style="width: 1440px; height: 438px;"></canvas> 
</div> 

Так есть mainBgC, shinesBgC, animationC прекрасно используется, чтобы сделать анимацию и добавить динамический блестит по всему веб-сайт всякий раз, когда веб-страницы прокручивается вверх и вниз.

И все содержание текста для каждой из секций были добавлены с помощью textContainer0 ... 4 дивы

А также они использовали следующие JS скрипты для каждого из объектов, который показывает в между секциями при прокрутке вверх/вниз: crown.js, heart.js, rose.js, tech.js

а также они использовали продукты из следующего website, как я должен знать, когда я копал в частности, следующие библиотеки:

  1. TimelineLite - Для создания Tweens проверьте его самостоятельно, используя Demo на этой странице.
  2. TweenLite - Для подростков из четырех объектов, Корона, Роза, Сердце и Технология.
  3. Поэтому в основном то, что я могу сказать, они могли бы использовать больше плагинов, упомянутых в данном веб-сайте по Greensock

Это все, что я мог бы дать вам в данный момент, как я смог найти. Лучше следовать по пути.

Надеюсь, это было полезно для вас!

Cheers!

1
These are some library files that are used to achieve that Kind of effect in above Sites. 

    TweenLite 
    TimelineLite 
    ScrollToPlugin 
    EasePack 

You Can See the documentation and download from below:- 

http://modernizr.com  
http://greensock.com/get-started-js 
https://greensock.com/ScrollToPlugin 
https://greensock.com/tweenmax 
You Could Use the Some Animation that are provided by jquery 
such as easeIn our easeOut to achieve the Smooth Scrolling Effect. 
You could use this library Which I use For Achieving the Same purpose as shown in the Site 

http://janpaepke.github.io/ScrollMagic/ 
Смежные вопросы