0

Как реализовать на сайте такую страницу на которой будет идти информация снизу вверх, точно также как титры в конце фильма? Есть одно условия - не использовать Flash, только HTML, CSS, JS.

2 ответа 2

6

Вот еще вариант:

var pos = 0;
height = $(document).height();

var intervalID = setInterval(function() {
    if(pos <= height)    
        $('#myDiv').css('bottom', pos += 3);
    else 
        clearInterval(intervalID);
}, 50)
body {
    background-color: #333333;
}
#myDiv {
    bottom:0;
    position:fixed;    
    height: 0px;    
    color: #bbbbbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id='myDiv'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit sollicitudin tellus, ac eleifend velit dictum eu. Duis sit amet eleifend mi. Phasellus aliquam massa ipsum. Integer quis finibus tellus, id lacinia sapien. Quisque ligula elit, tincidunt nec pellentesque vel, bibendum eget turpis. Suspendisse potenti. Morbi non ex rhoncus, pulvinar elit ut, posuere elit. Aliquam a sapien egestas, bibendum risus et, dictum orci. Nunc ac hendrerit elit. Aenean fermentum lacinia neque ac sagittis. Fusce pharetra viverra metus, vel sodales purus pharetra vitae.

Morbi id condimentum mi, ac scelerisque orci. Fusce ut commodo urna, sit amet imperdiet felis. In vel tortor tellus. Suspendisse bibendum odio et ultrices ullamcorper. Cras eget maximus enim. Etiam id volutpat velit, eu tincidunt turpis. In sed vestibulum ipsum. Donec consequat semper libero at tempor.
</div>

8
  • @DreamChild Cпасибо, почти то, что нужно. Но как сделать, чтобы текст заезжал за вернюю область видимости экрана, а не останавливался, как в примере на jsfiddle?
    – spoilt
    23 апр 2014 в 9:40
  • @eprivalov1 ну поиграйтесь с переменными в JS
    – DreamChild
    23 апр 2014 в 9:44
  • jsfiddle.net/Ugt3d чуток изменил
    – knes
    23 апр 2014 в 10:05
  • pos += 1 и красота получается =) а вот так jsfiddle.net/wLrQP/9 то вообще полноценные титры получаются
    – mountpoint
    23 апр 2014 в 14:37
  • @mountpoint ну тогда уж лучше ++pos, нежели pos += 1)
    – DreamChild
    23 апр 2014 в 15:00
3

Вот вариант:

var div = $('#myDiv');
var height = div.height();
$('html,body').scrollTop(height);
$('html,body').animate({
  scrollTop: 0
}, {
  duration: height / 50 * 1000,
  specialEasing: 'linear'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id='myDiv' style='width: 100px;'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit sollicitudin tellus, ac eleifend velit dictum eu. Duis sit amet eleifend mi. Phasellus aliquam massa ipsum. Integer quis finibus tellus, id lacinia sapien. Quisque ligula elit, tincidunt nec pellentesque vel, bibendum eget turpis. Suspendisse potenti. Morbi non ex rhoncus, pulvinar elit ut, posuere elit. Aliquam a sapien egestas, bibendum risus et, dictum orci. Nunc ac hendrerit elit. Aenean fermentum lacinia neque ac sagittis. Fusce pharetra viverra metus, vel sodales purus pharetra vitae.

Morbi id condimentum mi, ac scelerisque orci. Fusce ut commodo urna, sit amet imperdiet felis. In vel tortor tellus. Suspendisse bibendum odio et ultrices ullamcorper. Cras eget maximus enim. Etiam id volutpat velit, eu tincidunt turpis. In sed vestibulum ipsum. Donec consequat semper libero at tempor.
</div>

2
  • @sanic888 То что нужно, только я бы сделал, чтобы текст ехал снизу вверх...
    – spoilt
    23 апр 2014 в 10:02
  • спешил))))))
    – sanic888
    23 апр 2014 в 14:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.