Анимация страницы - Прокрутка текста

Question

Я хочу создать эффект, подобный следующей ссылке на сайт, где текст отображается в текстовом поле фиксированного размера, которое затем можно прокручивать, однако я хочу использовать такой же стиль графического дизайна, как в примере, в отличие от использования стандартного HTMLполоса прокрутки для этого.

Я также хочу, чтобы страница не нуждалась в обновлении, например, когда вы нажимаете на другой заголовок меню, он просто изменяет отображаемое содержимое и не требует перезагрузки страницы.Я знаю, что эту часть можно выполнить с помощью Javascript, и у меня есть четкое представление о том, как это сделать, но я не знаю, с чего начать в первой части.

Пример сайта использует Flash для всей анимации.Тем не менее, я хочу придерживаться серверных / клиентских языков, например, HTML / HTML5, Javascript / jquery, PHP

Пример сайта:

http://www.theoceancollective.com/main.html

Answer 1

1. вы можете использовать div, чтобы сохранить весь ваш текстовый контент и задать фиксированную высоту и переполнение: автоматически в вашем стиле, вы получите автоматическую прокрутку в соответствии с высотой вашего текстового контента и использовать некоторый скрипт для применения / создания необычной полосы прокрутки. .

2. Jquery - лучший вариант для загрузки контента без загрузки / обновления страницы. При каждом щелчке ссылки в заголовке используйте Jquery.load для загрузки содержимого другой страницы и загрузки основного содержимого / содержимого div

Answer 2

Хорошим началом для анимации, Ajax и Javascript является использование библиотеки, подобной jQuery .Вы все еще можете использовать меню с реальными URL-адресами, которые переходят на правильный URL-адрес по причинам SEO.Но когда пользователь нажимает эту кнопку, Javascript отменяет реальный запрос и использует Ajax-вызов для получения контента.Небольшой пример использования jQuery:

$(function(){
    $("#menu li a").click(function(e){
        e.preventDefault(); // Cancel the page change
        var _this = $(this);
        $.ajax({
            url : "/urltogetpagecontent.php",
            success : function(result)
            {
                // Put result in #content div
                $("#content").html(result);
                // Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
                _this.parent().addClass("selected").siblings().removeClass("selected")
            }
        });
    });
});

Таким образом, вы все еще можете использовать исходную навигацию, но отменить обмен страницами.Это будет вызвано при готовности документа и будет привязано к событию click из #menu li a.Если вы хотите иметь контент с фиксированной высотой, вы можете поместить свой CSS как #content следующим образом:

#content
{
    height: 600px;
    overflow: auto; /* Makes scrollbar when needed */
}

Если вы хотите, чтобы ваш контент скользил.Вы должны окружить DIV, который будет добавлен к вам #content.Таким образом, структура будет выглядеть примерно так:

<div id="content">
    <div class="page">
        // Default page
    </div>
    <div class="page">
        // Second page loaded
    </div>
</div>

И функция успеха будет выглядеть примерно так:

success : function(result)
        {
            // Put result in #content div
            var result = $(result).hide();
            $("#content").append(result);
            $("#content page").slideUp(); // Slide old content up
            result.stop(true, false).slideDown(); // Slide new content down

            // Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
            _this.parent().addClass("selected").siblings().removeClass("selected")
        }

Приведенный выше пример использует (некоторые материалы для чтения):

1. jQuery.ajax
2. jQuery.siblings
3. jQuery.addClass / jQuery.removeClass
4. jQuery.slideDown / jQuery.slideUp

Возможные улучшения:Этот код не использует никакого кэширования, поэтому при повторном нажатии на ссылку он выполняет еще один Ajax-запрос.Вы можете улучшить это, дав классам .page идентификатор, связанный с #menu li a.