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

try now

Browse Source
This commit is contained in:
Paul Martin
2023-11-16 15:54:03 +01:00
parent 1c53436675
commit ff1916adca
5 changed files with 146 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
blob-animation.js → animations.js
View File

@ -1,14 +1,17 @@
var stage = 0
$(document).ready(function () {
var up = document.getElementById("upload")
if (up != null) {up.addEventListener ("click", ButtonPress)}
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
if (height1 < 300) {height1 += 550};
console.log (height1, height2);
$(window).scroll(function () {
var pos = $(this).scrollTop ();
if (stage ==1 && pos-200 >= height2) { console.log ( moveBlobs (2050, 600, 2))}
if (stage ==1 && pos-200 >= height2) { moveBlobs (2050, 600, 2)}
else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
else if (stage == 1 && pos < height1-450){ moveBlobs (0,0,0) }
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
})
}
)
@ -53,4 +56,27 @@ function moveBlobs (t, r, to) {
$("#red").css ({ 'animation': '' })
stage = to;
}, (dur*1000)-1)
}
}
function ButtonPress () {
document.body.style.cursor = "progress"
$("#upload").css ({
'cursor': 'not-allowed',
'animation': 'text-in-out 1s'
})
setTimeout (function () {
document.getElementById("upload").textContent = "Verarbeite..."
$("#upload").css ({
'padding-right': '140px',
'padding-left': '139px',
'padding-top': '80px',
'padding-bottom': '57px',
})
}, 500)
setTimeout (function() {
$("#upload").css ({
'animation': 'border-in-out 2s infinite'
})
}, 1000)
}

6
index.html
View File

@ -4,7 +4,7 @@
<title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script>
<script type="text/javascript" src="animations.js"></script>
</head>
<body>
@ -22,7 +22,7 @@
</div>
</div>
<div class="start">
<div class="main-title">
<div class="title">
<h1>DAIA<br>LECT</h1>
</div>
<div id="blobs">
@ -57,6 +57,6 @@
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

16
noise-texture.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 997 B

73
style.css
View File

@ -4,6 +4,7 @@
body
{
background-color: #FFE49F;
background-image: url("noise-texture.svg");
color: #E07A31;
font-family: "League Spartan";
}
@ -126,7 +127,7 @@ p {
z-index: 60;
}
.main-title
.title
{
font-family: "League Spartan Black";
font-size: 170px;
@ -143,30 +144,48 @@ p {
animation: raise 0.5s ease-in;
}
.title h2{
font-size: 150px;
text-align: right;
text-align-last: right;
padding-right: 140px;
padding-top: 150px;
font-family: "League Spartan";
}
.button-rechts {
height: 1000px;
position: relative;
top: 275px;
width: 46%;
margin-right: 100px;
justify-content: center;
display: block;
}
button {
background-color: transparent;
border-style: dotted;
border-color: #E07A31;
border-width: 10px;
border-radius: 32px;
color: #E07A31;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
padding-bottom: 20px;
text-decoration: none;
font-family: "League Spartan Black";
font-size: 100px;
cursor: pointer;
}
@keyframes raise {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
}
body::before,
body::after {
position: absolute;
left: 0;
top: 0;
content: '';
width: 2048px;
height: 2048px;
z-index: 50;
opacity: 80%;
}
body::before {
background: url("noise-texture.svg");
mix-blend-mode: soft-light;
}
#blobs {
display: flex;
flex-direction: column;
@ -210,6 +229,22 @@ body::before {
animation: appear 0.4s -0.15s ease-in;
}
@keyframes text-in-out {
0% {color: inherit}
40% {color: transparent}
60% {color: transparent}
100% {color: inherit}
}
@keyframes border-in-out {
0% {border-radius: 32px}
10%{border-radius: 32px}
40% {border-radius: 125px}
60% {border-radius: 125px}
90%{border-radius: 32px}
100% {border-radius: 32px}
}
@keyframes float-in {
0% {transform: translateY(-100px); opacity: 0%}
100% {transform: translateY(0px); opacity: 90%;}

53
try.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="animations.js"></script>
</head>
<body>
<div id="navbar-top">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">API Pricing</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
<div class="start">
<div class="title">
<h2>Jetzt Audiodatei hochladen und selbst testen!</h2>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>
<div id="red" class="blob"></div>
<div id="green" class="blob"></div>
</div>
</div>
<div id="eins">
<div class="button-rechts">
<button id="upload">AUDIO HOCHLADEN!</button>
</div>
</div>
<div id="navbar-bottom">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">API Pricing</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
</body>
</html>