Javascript Page Wipe Transition with Superscrollorama

То, что я пытаюсь сделать, состоит в том, чтобы развернуть части страницы и закрыть предыдущую часть. Я нашел то, что хотел сделать в http://johnpolacek.github.com/superscrollorama/, в частности, часть «Wipe It». Я попытался скопировать часть кода и включить те же файлы javascript.Javascript Page Wipe Transition with Superscrollorama

В Firefox он работает. Тем не менее, в Chrome и IE, когда я пытаюсь прокрутить вниз, полоса прокрутки дрожит и привязывается к верхней части страницы.

У меня нет его на сайте, но у меня есть файлы, которые я использую: http://www.mediafire.com/?h28etrbr5t24qyw

Любая помощь (или более практичные варианты) было бы весьма признателен.

источник

2012-07-04 Rosencruez

Да, это выглядит довольно круто. Я бы просто создал код с нуля, чтобы вы могли получить его именно так, как хотите. Я просто создал что-то реальное. Синий главный div с красным div, который стирает. Очевидно, что вы можете положить все, что вы хотите на обоих дивы .. Heres код:

<!doctype html> 
<html> 
    <head> 
    <style type='text/css'> 
     body{ 
     margin: 0px; 
     } 
     #wipeScreen{ 
     position: fixed; 
     width: 100%;     
     background-color: red; 
     } 

     #mainScreen{ 
     position: absolute; 
     background-color: blue; 
     height: 200%; 
     width: 100%; 
     } 
    </style> 
    <script type='text/javascript'> 
     var visHeight; 
     function loadConstants(){ 
     visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2); 
     var wipeScreen = document.getElementById("wipeScreen"); 
     wipeScreen.style.height = visHeight+"px"; 
     wipeScreen.style.top = -visHeight+"px"; 
     window.onscroll = runScroller; 
     } 
     function runScroller(){ 
     document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px"; 
     }  
    </script>   
    </head> 
    <body onload='loadConstants()'> 
    <div id='mainScreen'></div> 
    <div id='wipeScreen'></div> 
    </body> 
</html>

Скопируйте и вставьте его в HTML-документ, и вы увидите, что я имею в виду

источник

2012-07-04 05:34:58 dano

Выглядит здорово! Однако он по-прежнему не работает в Google Chrome (версия 20, последний раз, когда я проверил). Как ни странно, он работает на IE9, но, конечно, не IE7 или IE8 ... – Rosencruez

да, я просто проверил его на firefox, а затем IE9, но lemme посмотрел, что происходит с хромом – dano

Хорошо, я обновил код, теперь буду работать с хром, Я вычислил высоту и смещение после нагрузки, поэтому у нее нет разрывов. Не знаю много о механизме рендеринга в стиле Chromes, но это работает сейчас. Yea IE - это кошмар, если не сказать больше, особенно старые версии – dano

Javascript Page Wipe Transition with Superscrollorama

ответ

Смежные вопросы