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-12 01:41:29 +03:00 committed by GitHub
parent ac00396004
commit 9af941ac5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
100_projects/50-‏line-through-effect/inedx.html Normal file
View File

@ -0,0 +1,18 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="line"></div>
<h1 id="text">
I Love You So Much &lt;3
</h1>
<script src="main.js"></script>
</body>
</html>

13
100_projects/50-‏line-through-effect/main.js Normal file
View File

@ -0,0 +1,13 @@
const text = document.getElementById('text');
const textArr = text.innerText.split('');
const newEl = document.createElement('h1');
newEl.innerHTML = `${textArr.map(letter => `<span class="letter" style="${randomVisibility()}">${letter}</span>`).join('')}`;
newEl.classList.add('overlay');
document.body.appendChild(newEl);
function randomVisibility() {
return Math.random() < 0.5 ? 'visibility: hidden' : 'visibility: visible';
}

41
100_projects/50-‏line-through-effect/style.css Normal file
View File

@ -0,0 +1,41 @@
* {
box-sizing: border-box;
}
body {
background-color: #FA8072;
font-family: 'Muli', sans-serif;
height: 100vh;
overflow: hidden;
}
h1 {
font-size: 8vw;
font-weight: bold;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
width: 100%;
}
.overlay {
z-index: 2;
}
.line {
background-color: #fff;
border-radius: 50px;
position: absolute;
top: 50%;
left: -1vw;
transform: translateY(-50%);
height: 2vw;
width: 0;
animation: grow 3s linear forwards;
z-index: 2;
}
@keyframes grow {
to {
width: 85vw;
}
}