This project is a fork of the Persona 5 Fusion Calculator by Chinhododo on GitHub. Its purpose is to help me practice my web UI development skills.
The current project has two background images. The first image is city.png and is the first thing that is seen when the page is loaded.
When the user scrolls down the second image will appear in the viewport. This image is Akira.png.
Also when the user scrolls there is a div with the text "Test Text". I am trying to position this div to the right side of the page. This is the black side of the background. Currently the div appears in the top left and ends up in the navigation bar of the webpage.
To draw attention to this element I am using the AOS Javascript Library.
I tried to follow the instructions in this answer but the result ended up ruining the parallax effect.
I followed the tutorial on how to create Parallax webpages on w3schools.
Here is my 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="http://ift.tt/2nYZfvi"></script>
<script src="http://ift.tt/2rRxI0L"></script>
<link href="http://ift.tt/2qyqevs" 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>
Aucun commentaire:
Enregistrer un commentaire