0
私はページ遷移にアプローチする方法が不思議です。CSSのページ遷移
私はcodropsにこのデモで使用されるこれらのうちランダムなトランジションを追加したいと思います：https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/
事は、私はすべてちょうど1の.htmlファイルを使用している、ユーチューブで見てきたチュートリアルです。私の構造は幾分異なり、複数の.htmlファイル（連絡先、ギャラリーなど）と1つのCSSスタイル
私のHTMLファイルです。私はコドラップの手順に従ってみましたが、白い画面が表示されました。誰でもこれについて何か経験がありますか？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Index.html">Domov</a>
<a href="Gallery.html">Galéria</a>
<a href="Contact.html">Kontakt</a>
<a href="Aboutme.html">O mne</a>
</div>
<script>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div id="first">
<ul>
<li><a href="#" id="up" onClick="openNav()" >Menu</a></li>
</ul>
<div id="block">
<h2>Filip Ducký</h2>
<p id="desc">Portfoilo</p>
<br><br><br><br><br><br><br>
<a href="#" class="tlacitko">Moje Práce</a>
</div>
</div>
<div id="second">
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Grafik</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Webové stránky</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>3D</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
</div>
<div id="third">
<div class="am1">
<img src="Img/Info_dark.png" class="am2" alt="">
<h3 id="omne">O mne</h3>
<p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</div>
<br><br><br>
<a href="#" class="tlacitko2">Kontakt</a>
<br><br><br><br>
</div>
<footer>
<div id="left">
<p id="fot"> © 2017</p>
</div>
<div id="right"><a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a></div>
</footer>
</body>
</html>
私はページ間でトランジションを行いたいと思います。ホーム - ギャラリー、ギャラリー - 連絡先など。これは投稿からはっきりしない場合は私の謝罪。
複数のhtml-のファイル間で移行することはできません。両方のコンテナを同じhtmlファイルに入れてください。高度なモード：ajaxで新しいページを読み込んで、現在のページのコンテナに挿入することができます。 – Thomas
ああ、私に知らせてくれてありがとう。 – Filip5
Wilこれはオプションですか？ ...可能な複製http://stackoverflow.com/questions/16289964/how-to-add-transition-when-loading-a-web-page – LGSon