Домой / Сайтостроение / Как создать эффект перелистывания страниц на сайте?

Как создать эффект перелистывания страниц на сайте?

эффект перелистывания
эффект перелистывания

Создаем эффект перелистывания страниц на сайте при помощи jquery!

Здравствуйте, уважаемые друзья и гости блога!


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

Ну, что давайте начнем ...

Эффект перелистывания страниц на сайте

Вот так это выглядит:

ДЕМО

А здесь Вы можете скачать исходники:

СКАЧАТЬ

Ну, что? Вам нравится эффект перелистывания страниц?! Если да, тогда давайте узнаем, как он делается!

Во-первых нужно создать разметку страницы. Делается это примерно вот так:

Но Вы можете изменить все заголовки на свои.

<div id="container" class="container">

    <div class="menu-panel">
        <h3>Table of Contents</h3>
        <ul id="menu-toc" class="menu-toc">
            <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
            <li><a href="#item2">Why we die</a></li>
            <li><a href="#item3">The honeymoon</a></li>
            <li><a href="#item4">A drawing joke</a></li>
            <li><a href="#item5">Commencing practice</a></li>
        </ul>
    </div>

    <div class="bb-custom-wrapper">

        <div id="bb-bookblock" class="bb-bookblock">

            <div class="bb-item" id="item1">
                <div class="content">
                    <div class="scroller">
                        <h2>Self-destruction</h2>
                        <p>...</p>
                    </div>
                </div><!-- /content -->
            </div><!-- /bb-item -->

            <div class="bb-item" id="item2"><!-- ... --></div>

            <div class="bb-item" id="item3"><!-- ... --></div>

            <div class="bb-item" id="item4"><!-- ... --></div>

            <div class="bb-item" id="item5"><!-- ... --></div>

        </div><!-- /bb-bookblock -->

        <nav>
            <a id="bb-nav-prev" href="#">←</a>
            <a id="bb-nav-next" href="#">→</a>
        </nav>

        <span id="tblcontents" class="menu-button">Table of Contents</span>

    </div><!-- /bb-custom-wrapper -->
</div><!-- /container -->

Во-вторых надо добавить стили, чтобы эффект перелистывания выглядел красиво:

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

html { height: 100%; }

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  background: #fff;
  font-weight: 400;
  font-size: 100%;
  color: #333;
  height: 100%;
}

.js body {
  overflow: hidden;
}

a {
  color: #555;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #000;
}

.container,
.bb-custom-wrapper,
.bb-bookblock {
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  left: 0px;
  -webkit-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.slideRight {
  left: 240px;
}

.no-js .container {
  padding-left: 240px;
}

.menu-panel {
  background: #f1103a;
  width: 240px;
  height: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.js .menu-panel {
  position: absolute;
  left: -240px;
}

.menu-panel h3 {
  font-size: 1.8em;
  padding: 20px;
  font-weight: 300;
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
} 

.menu-toc {
  list-style: none;
}

.menu-toc li a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  line-height: 3.5;
  padding: 0 20px;
  cursor: pointer;
  background: #f1103a;
  border-bottom: 1px solid #dd1338;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
  background: #dd1338;
}

.menu-panel div {
  margin-top: 20px;
}

.menu-panel div a {
  text-transform: uppercase;
  font-size: 0.7em;
  line-height: 1;
  padding: 5px 20px;
  display: block;
  border: none;
  color: #bc0b0b;
  letter-spacing: 1px;
  font-weight: 800;
  text-shadow: 0 1px rgba(255,255,255,0.2);
} 

.menu-panel div a:hover {
  background: inherit;
  color: #fff;
  text-shadow: none;
}

.bb-custom-wrapper nav {
  top: 20px;
  left: 60px;
  position: absolute;
  z-index: 1000;
}

.bb-custom-wrapper nav span,
.menu-button {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
  background: #f1103a;
  border-radius: 50%;
  color: #fff;
  line-height: 30px;
  text-align: center;
  speak: none;
  font-weight: bold;
  cursor: pointer;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
  background: #000;
}

.bb-custom-wrapper nav span:last-child {
  left: 40px;
}

.menu-button {
  z-index: 1000;
  left: 20px;
  top: 20px;
  text-indent: -9000px;
}

.menu-button:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 2px;
  background: #fff;
  top: 50%;
  margin-top: -1px;
  left: 25%;
  box-shadow: 0 -4px #fff, 0 4px #fff;
}

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
  display: none;
}

.js .content {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  bottom: 50px;
  overflow: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.scroller {
  padding: 10px 5% 10px 5%;
}

.js .content:before,
.js .content:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 100;
  pointer-events: none;
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.js .content:after {
  top: auto;
  bottom: 0;
  background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.content h2 {
  font-weight: 300;
  font-size: 4em;
  padding: 0 0 10px;
  color: #333;
  margin: 0 1% 40px;
  text-align: left;
  box-shadow: 0 10px 0 rgba(0,0,0,0.02);
  text-shadow: 0 0 2px #fff;
}

.no-js .content h2 {
  padding: 40px 1% 20px;
}

.content p {
  font-size: 1.2em;
  line-height: 1.6;
  font-weight: 300;
  padding: 5px 8%;
  text-align: justify;
}

@media screen and (max-width: 800px){
  .no-js .menu-panel {
    display: none;
  }

  .no-js .container {
    padding: 0;
  }
}
@media screen and (max-width: 400px){
  .menu-panel,
  .content {
    font-size: 75%;
  }
}

Теперь нам просто необходимы JavaScript, которые и сделают эффект перелистывания страниц на сайте осуществимым.

Делайте все поочередно, как в представленных блоках:

Первый блок JavaScript:

var $container = $( '#container' ),

    // элемент, к которому мы применим плагин BookBlock
    $bookBlock = $( '#bb-bookblock' ), 

    // элементы BookBlock (bb-item)
    $items = $bookBlock.children(), 

    // указатель текущего элемента
    current = 0, 

    // инициализируйте BookBlock
    bb = $( '#bb-bookblock' ).bookblock( {
        speed : 800,
        perspective : 2000,
        shadowSides : 0.8,
        shadowFlip  : 0.4,
        // после каждого перелистывания...
        onEndFlip : function(old, page, isLimit) { 

            // обновите текущее значение
            current = page; 

            // обновите выбранный элемент оглавления (TOC)
            updateTOC(); 

            // покажите и/или скройте стрелки-указатели навигации
            updateNavigation( isLimit ); 

            // инициализируйте jScrollPane на div контента для нового элемента
            setJSP( 'init' ); 

            // ликвидируйте jScrollPane на div контента для старого элемента
            setJSP( 'destroy', old ); 

        }
    } ),
    // стрелки-указатели навигации
    $navNext = $( '#bb-nav-next' ),
    $navPrev = $( '#bb-nav-prev' ).hide(), 

    // оглавление элементов
    $menuItems = $container.find( 'ul.menu-toc > li' ), 

    // кнопка для открывания TOC
    $tblcontents = $( '#tblcontents' ), 

    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, 

    // названия события перехода
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')], 
    // проверьте, поддерживаются ли переходы
    supportTransitions = Modernizr.csstransitions;

Второй блок JavaScript:

function init() {

    // инициализируйте jScrollPane на div контента первого элемента
    setJSP( 'init' );
    initEvents();
}

Третий блок JavaScript:

function setJSP( action, idx ) {

    var idx = idx === undefined ? current : idx,
        $content = $items.eq( idx ).children( 'div.content' ),
        apiJSP = $content.data( 'jsp' ); 

    if( action === 'init' &amp;amp;&amp;amp; apiJSP === undefined ) {
        $content.jScrollPane({verticalGutter : 0, hideFocus : true });
    }
    else if( action === 'reinit' &amp;amp;&amp;amp; apiJSP !== undefined ) {
        apiJSP.reinitialise();
    }
    else if( action === 'destroy' &amp;amp;&amp;amp; apiJSP !== undefined ) {
        apiJSP.destroy();
    } 
}

Четвертый блок JavaScript:

function initEvents() {

    // добавьте события навигации
    $navNext.on( 'click', function() {
        bb.next();
        return false;
    } ); 

    $navPrev.on( 'click', function() {
        bb.prev();
        return false;
    } ); 

    // добавьте события перелистывания
    $items.on( {
        'swipeleft'     : function( event ) {
            if( $container.data( 'opened' ) ) {
                return false;
            }
            bb.next();
            return false;
        },
        'swiperight'    : function( event ) {
            if( $container.data( 'opened' ) ) {
                return false;
            }
            bb.prev();
            return false;
        }
    } ); 

    // покажите TOC
    $tblcontents.on( 'click', toggleTOC ); 

    // щелкните элемент меню
    $menuItems.on( 'click', function() { 

        var $el = $( this ),
            idx = $el.index(),
            jump = function() {
                bb.jump( idx + 1 );
            }; 

        current !== idx ? closeTOC( jump ) : closeTOC(); 

        return false; 

    } ); 

    // реинициализируйте jScrollPane при изменении размера окна
    $( window ).on( 'debouncedresize', function() {
        // реинициализируйте jScrollPane на div контента
        setJSP( 'reinit' );
    } ); 
}

Пятый блок JavaScript:

function updateNavigation( isLastPage ) {

    if( current === 0 ) {
        $navNext.show();
        $navPrev.hide();
    }
    else if( isLastPage ) {
        $navNext.hide();
        $navPrev.show();
    }
    else {
        $navNext.show();
        $navPrev.show();
    } 
}

Шестой блок JavaScript:

function toggleTOC() {
    var opened = $container.data( 'opened' );
    opened ? closeTOC() : openTOC();
}

function openTOC() {
    $navNext.hide();
    $navPrev.hide();
    $container.addClass( 'slideRight' ).data( 'opened', true );
} 

function closeTOC( callback ) { 

    $navNext.show();
    $navPrev.show();
    $container.removeClass( 'slideRight' ).data( 'opened', false );
    if( callback ) {
        if( supportTransitions ) {
            $container.on( transEndEventName, function() {
                $( this ).off( transEndEventName );
                callback.call();
            } );
        }
        else {
            callback.call();
        }
    } 

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

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу