0
このプロジェクトは、GitHubのChinhododoによるPersona 5 Fusion Calculatorのフォークです。その目的は私のWeb UI開発スキルの練習を手助けすることです。視差のあるWebページ内の要素を異なるビューポートに配置するにはどうすればよいですか？
現在のプロジェクトには2つの背景イメージがあります。最初のイメージはcity.pngで、ページが読み込まれたときに最初に表示されるイメージです。
ユーザーがスクロールダウンすると、2番目の画像がビューポートに表示されます。この画像はAkira.pngです。
また、ユーザーがスクロールすると、「Test Text」というテキストのあるdivがあります。このdivをページの右側に配置しようとしています。これは背景の黒い側面です。現在、divは左上に表示され、ウェブページのナビゲーションバーに表示されます。
この要素に注意を引くために、私はAOS Javascriptライブラリを使用しています。
私はこのanswerの指示に従おうとしましたが、その結果、視差効果が損なわれました。
私は、w3schoolsでParallax Webページを作成する方法に関するチュートリアルに従っています。ここで
は、私は私の問題への解決策を見つけた私のproject on GitHub
CSS
.testDiv{
width: 5%;
height: 5%;
left: 50%; //Notice how this does not move the div left 50%
background-color: white;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Guillotine</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="earwig_factory.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="arrowBounce.css" type="text/css">
<link rel="stylesheet" type="text/css" href="GuillotineStyle.css">
<script>
$(document).ready(function() {
AOS.init();
AOS.refreshHard(); //optional
});
$(window).scroll(function(){
if($(document).scrollTop() > 25){
$('.arrow').fadeOut("fast");
}
if($(document).scrollTop() < 25){
$('.arrow').fadeIn("fast");
}
});
</script>
</head>
<body class="scrollbar-6">
<div>
<nav class="header-nav">
<ul class="inline-list">
<a href="GuillotineIndex.html" title="Persona" style=" font-size: 24px; font-family: earwig_factoryletters;">Persona</a>
%nbsp
<a href="GuillotineIndex.html" title="Skills" style=" font-size: 24px;font-family: earwig_factoryletters">Skills </a>
%nbsp
<a href="GuillotineIndex.html" title="Settings" style=" font-size: 24px;font-family: earwig_factoryletters">Settings</a>
</ul>
</nav>
</div>
<div class="parallax">
</div>
<div class="caption">
<span class="border">Scroll Down</span>
<div class="arrow bounce"></div>
</div>
<div class="parallax bgimg">
<div class="testDiv" data-aos="fade-right">
<p style="font-family: earwig_factoryregular; color: black">Test Text</p>
</div>
</div>
</body>
</html>