ローディングバー付きのページからフェードする

Question

最近この種の効果が見られています。私はそれが好きです！

検索するのが簡単なように見えますが、私が探している答えが見つからないものは見つかりません。私は誰かが私にそれを修正することができると確信しています。

基本的には、（内部の）ナビゲーション/ページリンクがクリックされると、ページがフェードアウトし、ユーザーが指示されたページに戻ります。

ここにはというものがありますが、新しいページが作成されるまでブラウザの上部にローディングバーが表示されます。私は後だより簡単な、優雅な効果を

1. https://grainandmortar.com

2. http://www.hochburg.net/de

最初はおそらくです：

私は効果の例をいくつか見つけました。

誰かがこれを手伝ってくれることを願っています。私が見つけたすべてのサンプル/チュートリアルは、ちょっと複雑すぎたり、狂ったエフェクトが追加されているようです。

Answer 1

アニメーションテンプレートを使用できます。あなたは「デモ」と「ダウンロードリンクここhttp://git.blivesta.com/animsition/を見つけるCAND。

Answer 2

私は間違った方法にいるなら、私を修正して、リンクのクリックイベントで

、デフォルトの機能を妨げる使用するjavascript関数を添付し、

デフォルトでは、ページごとに不透明度0を追加し、bodyタグにイベントを添付します。「ロードされたコンテンツ」では、手動で設定します。不透明度が1に近づき、ファンキーなファジーとして機能します。

これは、私は他の誰に重宝で包み、私は私の解決策でこれを更新しようと思いましたのみ

Answer 3

原則あなたが本当のJavaScriptコードに興味があれば私に戻って取得

幸運です。

pace.jsプラグインを使用することにしました。このプラグインは、バーのロードに非常に便利です。また、ページがロードされた後に、ボディエレメントに.pace-doneというクラスを追加します。 Paceは、ページの上部に2つのdivを自動的に追加します。このdivは、進行状況バーとしてスタイルを設定できます。

私は基本的に divにラップされたコンテンツにopacity: 0;という値を設定しました。ページが読み込まれるまでコンテンツがフェードインするように、opacity: 1;を設定します。また、javascriptが読み込まれないとスタイリングが上書きされ、コンテンツは常に表示され、不透明にならないようにします。

ここではCSSですが、私はペースを含めます。jsローディングバーのスタイリング：

/** 
* When pace.js is running we add `opacity` to the `body` element so we can fade 
* the page in with a transition once it's loaded. 
*/ 

.page { 
    opacity: 0; 

    .pace-done & { 
     opacity: 1; 
     transition: opacity .5s ease; 
    } 

    .no-js & { 
     opacity: 1 !important; 
    } 
} 


/** 
* Progress bar styles. 
*/ 

.pace { 
    pointer-events: none; 
    user-select: none; 
} 

.pace-inactive { 
    display: none; 
} 

.pace .pace-progress { 
    background: $color-primary; 
    height: 4px; 
    position: fixed; 
    top: 0; 
    right: 100%; 
    width: 100%; 
    z-index: 2000; 
} 

これはすごく効果があり、本当にうまくいきます。それは大事に重要ではありませんが、リダイレクトされる前にページを少し消してしまうと思っていましたが、これにはjavascriptを使う必要がありました。ここで私が使用するコードは次のとおりです。

$(document).ready(function() { 

    //$('body').css('display', 'none'); 
    //$('body').fadeIn(200); 

    $('a:not(.page-head__toggle)').click(function() { 
     event.preventDefault(); 
     newLocation = this.href; 
     $('body').fadeOut(150, newpage); 
    }); 

    function newpage() { 
     window.location = newLocation; 
    } 
}); 

これは私のナビゲーションメニューのトグルを除くページのすべてのリンクをターゲットとしません。あなたが1000のリンクを持っているならば、それほど素晴らしいものではないかもしれません。いつでもクラスを指定し、そのクラスが追加されたリンクのみをターゲットにすることができます。

これは他の人に役立つことを願っています！ :)