Как сделать переход между страницами

Question

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

Если вы знаете, скажите мне, что это такое или как я могу это сделать, или даже оба: D, пожалуйста, дайте мне ответ ниже. Спасибо большое.

Answer 1

Если вы посмотрите на исходный код страницы, вы увидите, что все необходимые страницы уже загружены в DOM. (Одна структура страницы, я думаю, или, возможно, загрузка Asychronoumus).

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

Вы можете выбрать эффект затухания (который используется на странице, которую вы нам показываете), или даже некоторые другие интересные эффекты с подпрыгиванием, или даже если вы знаете, как использовать CSS с помощью jQuery, тогда ваша собственная анимация/переход слишком. Вот ссылка на API jQuery fadeIn и fadeOut .

Я хотел бы сделать это следующим образом:

$(function(){ 
 
    // Setup your Variables first 
 
    var nav = $('.navigation ul li'); 
 
    var all_pages = $('.pages .page'); 
 
    var active = 'active'; 
 
    var target, page; 
 
    
 
    
 
    // On Click do the stuff to get some transition 
 
    nav.on('click', function(){ 
 
    // Get the Target 
 
    target = $(this).attr('data-target'); 
 
    page = $('.page[data-page='+target+']'); 
 
    
 
    // Hide all pages here (maybe it would be a better idea to target .page.active) 
 
    all_pages.fadeOut('slow').removeClass(active); 
 

 
    // FadeIn the target Page 
 
    page.fadeIn('slow').addClass(active); 
 
    
 
    }); 
 
    
 
    
 
    // fallback to first page when the target is not set on page load 
 
    if(!target)  nav.first().trigger('click'); 
 
});

.main { position:relative; width:100%; height:100%; font-family:'Verdana'; font-size:13px; } 
 

 
.navigation { border:0px solid red; width:150px; position:absolute; left:0px; top:0px; bottom:0px; } 
 
.navigation ul { list-style:none; width:auto; margin:0px; padding:0px; } 
 
.navigation ul li { display:block; height:30px; border:0px solid green; line-height:30px; white-space:nowrap; cursor:pointer; padding:0px 20px; } 
 

 
.pages { position:absolute; left:150px; right:0px; top:0px; bottom:0px; border:0px solid blue; } 
 
.page { position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; min-height:500px; } 
 

 
.page.active { } 
 

 
.page:nth-child(1), 
 
.navigation ul li:nth-child(1) { background:lightgreen; } 
 
.page:nth-child(2), 
 
.navigation ul li:nth-child(2) { background:maroon; } 
 
.page:nth-child(3), 
 
.navigation ul li:nth-child(3) { background:wheat; } 
 
.page:nth-child(4), 
 
.navigation ul li:nth-child(4) { background:cyan; } 
 
.page:nth-child(5), 
 
.navigation ul li:nth-child(5) { background:salmon; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<div class='main'> 
 
    <div class='navigation'> 
 
    <ul> 
 
    <li data-target='1'>First Link</li> 
 
    <li data-target='2'>Second Page</li> 
 
    <li data-target='who'>Who I am</li> 
 
    <li data-target='location'>Location</li> 
 
    <li data-target='5'>Oter Stuff</li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div class='pages'> 
 
    <div class='page' data-page='1'> Here is the first page ... </div> 
 
    <div class='page' data-page='2'> here is the seocnd one</div> 
 
    <div class='page' data-page='who'> Who I am?</div> 
 
    <div class='page' data-page='location'> Location </div>  
 
    <div class='page' data-page='5'> Oter Stuff </div> 
 
    </div> 
 
</div>

Я надеюсь, что вы получите идею кодекса, чтобы получить результат, который вы хотите :) Кстати, я сделал это быстро HTML Markup чтобы получить аналогичный эффект для переходов. Вам нужно будет добавить еще несколько анимационных материалов для навигации, чтобы получить «на мыши над слайдами имена и т. Д.» - пропозиционально легко сделать с помощью синтаксиса CSS для наведения.

Надеюсь, что это поможет, ps. это мой первый пост, у меня могут быть некоторые ошибки. И да, на данный момент должен быть улучшенный HTML-сборник, как это делает мой фрагмент.

рассматривает Gkiokan