Блог Валерия Бородина

Как создать блог на wordpress и заработать в интернете

Главная » Сайтостроение

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

Опубликовано: Сайтостроение
эффект перелистывания

Создаем эффект перелистывания страниц на сайте при помощи 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. И конечно же, оставьте свой комментарий ниже :)

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

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

Вы будете первым, кто поставит оценку!
0 3 043
Понравилась статья? Поделиться с друзьями:
Вам также может быть интересно
poddomen eto chto
Сайтостроение 0 1 658
Поддомен Это Что? Зачем Он Вам? И Что с Ним Делать?
Когда его стоит настроить субдомен и поддомен это что? Здравствуйте, уважаемые друзья и гости
lottie v wordpress
Сайтостроение 0 2 986
Lottie в WordPress: Сделай свой Сайт Лучшим!
Как использовать анимацию Lottie в WordPress Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! А
forum wordpress
Сайтостроение 0 4 143
Форум WordPress: (100)% Руководство Эффективного Управления
Как форум WordPress на сайте разместить и им эффективно управлять? Здравствуйте, уважаемые друзья и
sertifikat bezopasnosti ssl
Сайтостроение 0 5 753
Сертификат Безопасности SSL: Позаботьтесь о Своем Сайте Сегодня!
«Предупреждение, страница незащищена!» Отсутствует сертификат безопасности SSL. Так что же произойдет, если Вы не
Добавить комментарий

Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.