Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: очень плавная прокрутка страницы js
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » очень плавная прокрутка страницы js

Страниц (1): [1]
 

1. DlTA - 04 Августа, 2013 - 18:21:35 - перейти к сообщению
делаю что то вроде читалки
открваеш нажимаешь и текст/страничка медленно скролится, а ты только читаешь

скорость скролинга задается и вопрос синхронизации читателя и скорость скролинга не рассматривается

дык проблема в том что не зависимо от скорости пролистывания/шага и размера шрифта
все это выглядит очень страшно, прирывисто

читать тажело, может есть какие то хитрости?
2. EuGen - 04 Августа, 2013 - 18:24:47 - перейти к сообщению
Sample
?
3. DlTA - 04 Августа, 2013 - 18:32:49 - перейти к сообщению
не, этот пример скролит очень быстро,
у меня же проблема в том что скролить нужно не только медленно но и настолько плавно чтоб при этом это было читабельно.
4. EuGen - 04 Августа, 2013 - 18:40:22 - перейти к сообщению
Так это не готовый код, а пример. Может, что-то подобное подойдёт: http://stackoverflow[dot]com/questio[dot][dot][dot]ooth-slow-scroll ?
5. DlTA - 04 Августа, 2013 - 18:47:03 - перейти к сообщению
вот мой пример который я использую
CODE (javascript):
скопировать код в буфер обмена
  1. function setTop(block, top){
  2.         if(block==undefined)
  3.                 return;
  4.         if(block.style.top==undefined)
  5.                 return;
  6.         block.style.top=top;
  7. }
  8.  
  9. var soundPos; // переменная меняющаяся во времени и от которой зависит скрол
  10.  
  11. var scrolStep = 10;
  12. var scrolPos = 0;
  13. var textBlock = document.getElementById('text');
  14. var textStep = 973/2000;
  15.        
  16. var intScrol = setInterval(function(){
  17.         scrolPos = soundPos*textStep;
  18.         setTop(textBlock, -scrolPos );
  19. }, scrolStep);
  20.  

вопрос не в том как скролить, а в том как плавно скролить , без дерганья
6. tuareg - 04 Августа, 2013 - 19:42:32 - перейти к сообщению
С разметкой и css выложи где-нибудь, например, http://jsfiddle[dot]net/ Проще будет смотреть.
7. nerv - 04 Августа, 2013 - 20:01:05 - перейти к сообщению
DlTA пишет:
вопрос не в том как скролить, а в том как плавно скролить , без дерганья

анимировать Закатив глазки

http://javascript[dot]ru/blog/Andrej[dot][dot][dot]macii-JavaScript
http://learn[dot]javascript[dot]ru/js-animation
8. DlTA - 04 Августа, 2013 - 20:05:30 - перейти к сообщению
http://jsfiddle[dot]net/MZQmS/1/
(Добавление)
nerv пишет:
анимировать
нет, именно в том чтобы ПЛАВНО
9. Panoptik - 04 Августа, 2013 - 20:09:58 - перейти к сообщению
я думаю это из за слишком большого количества элементов DOM
нужно оптимизировать код так чтобы эти ваши элементы после отработки сразу же удалялись или заиметь просто 2 контейнера. один из них с красным выделением а другой с текущими символами и по одному символу выдергивать из второго контейнера и добавлять в конец первого
10. DlTA - 04 Августа, 2013 - 20:17:35 - перейти к сообщению
Panoptik
уже пробывал, результат тотже
11. nerv - 04 Августа, 2013 - 20:17:55 - перейти к сообщению
- использовать один таймер вместо двух (для начала)
- убрать спаны
- делать выделение так http://learn[dot]javascript[dot]ru/vydel[dot][dot][dot]ange-i-selection
12. tuareg - 04 Августа, 2013 - 20:26:19 - перейти к сообщению
Вот "наваял" http://jsfiddle[dot]net/tuareg/zrKqy/ .
P.s там стандартная ф-я jQuery animate Если не хочется использовать, можно исходники глянуть. Можно у javascript.ru посмотреть, там в учебнике есть примеры анимации.
13. Panoptik - 04 Августа, 2013 - 20:42:12 - перейти к сообщению
вот смержил труды tuareg и чуть добавил.
как по мне довольно вменяемо

http://jsfiddle[dot]net/xHKsa/1/
14. IllusionMH - 05 Августа, 2013 - 01:45:19 - перейти к сообщению
DlTA, плавность можно достичь через CSS Transforms translateY. Советую вам копнуть в этом направлении.
15. DeepVarvar - 05 Августа, 2013 - 01:55:06 - перейти к сообщению
CODE (javascript):
скопировать код в буфер обмена
  1. var i = 0, scrollable = document.getElementById("scrollable");
  2. function scroll() {
  3.   setTimeout(function(){
  4.     i--;
  5.     scrollable.style.marginTop = i + "px";
  6.     scroll();
  7.   }, 120);
  8. }
  9. scroll();
?

 

Powered by ExBB FM 1.0 RC1