x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-04-20 03:20:26 +03:00 committed by GitHub
parent d53ba8b152
commit 7bd53ba3c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/58-cloud-translate-banner-js/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
100_projects/58-cloud-translate-banner-js/cloud1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

BIN
100_projects/58-cloud-translate-banner-js/cloud2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

BIN
100_projects/58-cloud-translate-banner-js/cloud3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

BIN
100_projects/58-cloud-translate-banner-js/cloud4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 KiB

BIN
100_projects/58-cloud-translate-banner-js/cloud5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

34
100_projects/58-cloud-translate-banner-js/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="header">
<h2 id="text">Heaven</h2>
<div class="clouds">
<img src="cloud1.png" style="--i:1;" alt="cloud">
<img src="cloud2.png" style="--i:2;" alt="cloud">
<img src="cloud3.png" style="--i:3;" alt="cloud">
<img src="cloud4.png" style="--i:4;" alt="cloud">
<img src="cloud5.png" style="--i:5;" alt="cloud">
<img src="cloud1.png" style="--i:10;" alt="cloud">
<img src="cloud2.png" style="--i:9;" alt="cloud">
<img src="cloud3.png" style="--i:8;" alt="cloud">
<img src="cloud4.png" style="--i:7;" alt="cloud">
<img src="cloud5.png" style="--i:6;" alt="cloud">
</div>
</div>
<section>
<h2>Realistic</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error debitis officia quia a laboriosam, reprehenderit soluta natus vel corrupti repudiandae ipsum illo quaerat. Earum reiciendis, mollitia eaque impedit quisquam aperiam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, quis officia quisquam iure omnis dolores, eveniet libero molestias incidunt aut laudantium consectetur facilis voluptate aspernatur suscipit minima. Unde, quidem ad.
</p>
</section>
<script src="main.js"></script>
</body>
</html>

5
100_projects/58-cloud-translate-banner-js/main.js Normal file
View File

@ -0,0 +1,5 @@
let text = document.getElementById('text');
window.addEventListener('scroll', function(){
let value = window.scrollY;
text.style.marginBottom = value * 2 + '2px';
});

63
100_projects/58-cloud-translate-banner-js/style.css Normal file
View File

@ -0,0 +1,63 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
position: relative;
width: 100%;
height: 80vh;
background: url(bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.header #text{
position: relative;
font-size: 12em;
color: #fff;
transition: .3s;
}
@media(max-width:767px){
.header #text{
font-size: 6em;
}
}
.header .clouds{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.header .clouds img{
position: absolute;
bottom: 0;
max-width: 100%;
animation: animate calc(10s * var(--i)) linear infinite;
}
@keyframes animate{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
section{
position: relative;
padding: 75px 100px
}
section h2{
position: relative;
font-size: 2.5em;
margin-bottom: 20px;
}