Parallax Перемещение между разделами

Click here to see live demo.Parallax Перемещение между разделами

Я хочу, чтобы перемещаться между разделами с хорошей анимацией. Каждая «страница» в дизайне параллакса делится на <section>. Детали моего кода показаны ниже.

<div id="sliding"> 
     1 
     2 
     3 
     4 
     5 
     </div> 
    <section data-type="background" data-speed="20" style="background: url('http://media.vogue.com/files/2012/08/15/img-4vogue120erdemjpg_133133774497.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1000px;"> 
     bla bla 
    </section> 
    <section data-type="background" data-speed="10" style="background: url('http://media.vogue.com/files/2013/01/15/storm-troupers-02_191346273703.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1000px;"> 
     bla bla bla 
    </section>

источник

2013-03-17 Vemund Eldegard

-1: Итак, в чем вопрос? Что вы пробовали? –

Как я могу это сделать? Это мой вопрос. Я мог бы использовать, например, , но «страницы» разделены на разделы. @TiesonT –

Дайте секции уникальных идентификаторов, превратить ваши точки разбивки на страницах в гиперссылка с мишенью, которая соответствует этим идентификаторам, и использовать localScroll, чтобы дать вам хорошую анимацию.

Подробнее и скачать: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

Вы бы сделать что-то подобное в вашем HTML:

<!-- snip --> 

<head> 
    <!-- this loads the scripts in the correct order --> 
    <script type="text/javascript" src="js/jQuery.min.js"> 
    <script type="text/javascript" src="js/scrollTo.min.js"> 
    <script type="text/javascript" src="js/localScroll.min.js"> 
</head> 

<!-- snip --> 

<div id="sliding"> 
    <a href="#section1">1</a> 
    <a href="#section2">2</a> 
    <a href="#section3">3</a> 
    <a href="#section4">4</a> 
    <a href="#section5">5</a> 
</div> 
<section id="section1" ... etc.

Затем в JavaScript:

$('a').localScroll();

Вот оно! Вы увидите гладкую анимацию прокрутки, когда вы нажимаете на одну из ссылок раздела (без localScroll, она будет просто перейти непосредственно к этому разделу).

источник

2013-03-17 18:21:12 jdiaz5513

Это не работает. Посмотрите на тест http://inmyownview.com/pagan/test.php @ jdiaz5513 –

Это плагин jQuery, поэтому сначала необходимо загрузить jQuery. Перемещайте теги скриптов. Файл, который вы включили (scroll.js), является плагином scrollTo, вам также необходимо включить localScroll.js (localScroll зависит от scrollTo). Обновленный ответ, чтобы проиллюстрировать, как загрузить зависимости в правильном порядке. – jdiaz5513

Все еще не работает @ jdiaz5513 –

Parallax Перемещение между разделами

ответ

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