Как добавить полный переход страницы? (Смотри описание)

0

Я создаю веб-сайт с HTML5 и CSS3, и я думал о том, что на первой странице есть только фоновое изображение и возможность войти на сайт со стрелкой или кнопкой "войти на сайт".

Но вместо нажатия кнопки и перехода к другому html файлу/новому сайту (как при щелчке ссылки в стандартной навигации) я хочу, чтобы он затухал снизу - как опция "выцветать снизу" здесь http://tympanus.net/Development/PageTransitions/ - на новую страницу (обычную страницу) внутри одного и того же html-документа, поэтому посетителю не нужно загружать новую страницу.

Кто угодно?

(PS. Я попробовал функцию в ссылке выше, но не смог заставить ее работать)

  • 1
    Прежде чем пытаться развить это, действительно подумайте над этим. Действительно ли полезно иметь кнопку «Войти на этот сайт»? Тебе это нужно? Большую часть времени вам не нужны такие вещи.
  • 1
    Если вы попробовали это, что именно не работает? Вы можете поместить свой код в jsfiddle или codepen?
Теги:
transition

1 ответ

1

вам нужны Modernizr, pagetransitions.js и animations.css, чтобы получить тот же самый эффект, если вам нужно только "угасать снизу", вы можете использовать этот измененный pagetransitions.js

var PageTransitions = (function() {

    var $main = $( '#pt-main' ),
            $pages = $main.children( 'div.pt-page' ),
            $iterate = $( '#iterateEffects' ),
            animcursor = 1,
            pagesCount = $pages.length,
            current = 0,
            isAnimating = false,
            endCurrPage = false,
            endNextPage = false,
            animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
            },
            animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
            // support css animations
            support = Modernizr.cssanimations;

    function init() {
            $pages.each( function() {
                    var $page = $( this );
                    $page.data( 'originalClassList', $page.attr( 'class' ) );
            } );
            $pages.eq( current ).addClass( 'pt-page-current' );
            $iterate.on( 'click', function() {
                    if( isAnimating ) {
                            return false;
                    }
                    nextPage( animcursor );
                    ++animcursor;
            } );
    }

    function nextPage(options ) {
            var animation = (options.animation) ? options.animation : options;
            if( isAnimating ) {
                    return false;
            }
            isAnimating = true;
            var $currPage = $pages.eq( current );
            if(options.showPage){
                    if( options.showPage < pagesCount - 1 ) {
                            current = options.showPage;
                    }
                    else {
                        return false;
                    }
            }
            else{
                    if( current < pagesCount - 1 ) {
                            ++current;
                    }
                    else {
                         return false;
                    }
            }
            var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
                    outClass = '', inClass = '';
              outClass = 'pt-page-fade';
              inClass = 'pt-page-moveFromBottom pt-page-ontop';
            $currPage.addClass( outClass ).on( animEndEventName, function() {
                    $currPage.off( animEndEventName );
                    endCurrPage = true;
                    if( endNextPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            $nextPage.addClass( inClass ).on( animEndEventName, function() {
                    $nextPage.off( animEndEventName );
                    endNextPage = true;
                    if( endCurrPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            if( !support ) {
                    onEndAnimation( $currPage, $nextPage );
            }

    }

    function onEndAnimation( $outpage, $inpage ) {
            endCurrPage = false;
            endNextPage = false;
            resetPage( $outpage, $inpage );
            isAnimating = false;
    }

    function resetPage( $outpage, $inpage ) {
            $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
            $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }
    init();
    return { 
            init : init,
            nextPage : nextPage,
    };

})();

CSS

/* move from / to  */
.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    -moz-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}
/* fade */
.pt-page-fade {
    -webkit-animation: fade .7s ease both;
    -moz-animation: fade .7s ease both;
    animation: fade .7s ease both;
}

/* move from / to  */
@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
    from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { transform: translateY(100%); }
}

/* fade */

@-webkit-keyframes fade {
    to { opacity: 0.3; }
}
@-moz-keyframes fade {
    to { opacity: 0.3; }
}
@keyframes fade {
    to { opacity: 0.3; }
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #fff;
    background: #333;
    overflow: hidden;
}
html, body { height: 100%; }
.pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

.no-js body {
    overflow: auto;
}

.pt-page-ontop {
    z-index: 999;
}

.pt-page-1 {
    background: #0ac2d2;
}

.pt-page-2 {
    background: #7bb7fa;
}

.no-js .pt-triggers {
    display: none;
}

HTML

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1">     
         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
         <div class="pt-triggers">
             <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>                      
         </div>
    </div>
    <div class="pt-page pt-page-2">
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
    </div>
</div>

http://jsfiddle.net/7tjgy/

Поделиться
  • 0
    Спасибо за ответ .. Кажется, он работает в вашем jsfiddle - но как-то это не будет работать для меня? Вот мой: jsfiddle.net/userx007/n9gBJ Он просто отображает серый фон? Почему? Также возможно ли стилизовать кнопку, которая генерирует переход? возможно, замените его на изображение или, вернее, значок, используя ex. fontawesome?
  • 0
    вам нужно добавить Modernizr, у меня есть содержимое modernizr.custom.js в jsfiddle, и да, есть возможность стилизовать кнопку или заменить ее другим элементом в jsfiddle. Я просто скопирую кнопку с https://github.com/ трески / PageTransitions и удалить лишние CSS
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню