paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation-proto

Browse Source
This commit is contained in:
Paul Martin
2023-11-08 18:32:42 +01:00
parent 3b6dff9045
commit 6efacd8ddb
6 changed files with 156 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
blob-animation.js
View File

@ -0,0 +1,21 @@
$(document).ready(function () {
var height1 = $("#eins").height ();
$(window).scroll(function () {
if (pos+600 >= height1){
$("#blobs").css ({
'top': '1000px',
'right': '1000px',
/*'animation': 'move-down-1 5s'*/
})
$("blobs").animate ({'top': '1000px', 'right': '1000px'}, 5000)
} else {
$("#blobs").css ({
'top': '0px',
'right': '0px',
})
$("blobs").animate ({'top': '0px', 'right': '0px'}, 5000)
}
}
)
}
)

13
home.html
View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>DAIALECT</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="blob-animation.js"></script>
</head>
<body>
<div class="main-title">
<h1>DAIA<br>LECT</h1>
</div>
</body>
</html>

30
index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>DAIALECT</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script>
</head>
<body>
<div class="start">
<div class="main-title">
<h1>DAIA<br>LECT</h1>
</div>
<div id="blobs">
<div class="blue blob"></div>
<div class="red blob"></div>
<div class="green blob"></div>
</div>
</div>
<div id="eins">
<div class="text-rechts">
<h2>DIE ERSTE</h2>
<h2>DIALEKT -</h2>
<h2>ERKENNUNG</h2>
<h2>DER WELT</h2>
<p>*die in Grötzingen entwickelt wurde</p>
</div>
</div>
</body>
</html>

2
jquery-3.7.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
readme.md Normal file
View File

@ -0,0 +1,5 @@
# Website-Entwurf
## für die Vorlesung Web-Engineering I
### Paul Martin, TINF22B3, für Prof. Jürgen Röthig
---

103
style.css
View File

@ -1,22 +1,62 @@
body body
{ {
background-color: #FFE49F; background-color: #FFE49F;
color: #E07A31; color: #E07A31;
font-family: "League Spartan";
}
.start {
display: flex;
}
#eins {
display: flex;
justify-content: right;
}
.text-rechts {
width: 46%;
margin-right: 100px;
}
#eins h2 {
font-weight: bold;
font-size: 150px;
position: relative;
text-align: justify;
text-align-last: justify;
display: flex;
line-height: 0.3;
}
p {
position: relative;
font-size: 20px;
text-align: right;
z-index: 60;
} }
.main-title .main-title
{ {
font-family: "League Spartan Black"; font-family: "League Spartan Black";
font-size: 200px; font-size: 170px;
display: flex; display: flex;
text-align: center; text-align: center;
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 60%; width: 60%;
height: 200%; height: 100%;
z-index: 100; z-index: 100;
position: relative; position: relative;
flex-direction: column;
opacity: 90%;
animation: raise 0.5s ease-in;
}
@keyframes raise {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
} }
body::before, body::before,
@ -28,7 +68,7 @@ body::after {
width: 2048px; width: 2048px;
height: 2048px; height: 2048px;
z-index: 50; z-index: 50;
opacity:100%; opacity: 80%;
} }
body::before { body::before {
@ -37,5 +77,58 @@ body::before {
} }
#blobs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -2;
height: 100%;
width: 40%;
position: relative;
}
.blob {
border-radius: 200px;
filter: blur(60px);
width: 400px;
height: 350px;
top: 250px;
}
.blue {
background-color: rgb(80, 80, 244);
position: relative;
right: 200px;
animation: appear 0.4s 0s ease-in;
}
.green {
background-color: rgb(48, 227, 48);
position: relative;
top: -200px;
right: 150px;
animation: appear 0.4s -0.075s ease-in;
}
.red {
background-color: rgb(255, 63, 63);
position: relative;
left: 60px;
top: -45px;
animation: appear 0.4s -0.15s ease-in;
}
@keyframes appear {
0% {transform: scale(0); opacity: 0%;}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%;}
100% {transform: scale(1)}
}
@keyframes move-down-1 {
0% {top: 0px; right: 0px}
100% {top: 1000px; right: 1000px}
}