starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-08-29 04:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: jquery removal and formatting

Browse Source
This commit is contained in:
MoskalykA
2022-12-22 16:10:08 +01:00
parent 89d35947c7
commit d9ad6d9d53
3 changed files with 95 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[esx]/esx_loadingscreen/css/index.css
+68 -64
View File
@@ -12,102 +12,106 @@
* This copyright should appear in every part of the project code
*/
html,body {
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
overflow: hidden;
html,
body {
margin: 0;
padding: 0;
font-family: "Quicksand", sans-serif;
overflow: hidden;
}
#esx_intro {
z-index: 2;
z-index: 2;
}
#esx_loop {
z-index: 1;
z-index: 1;
}
#loading_txt {
bottom: 5%;
left: 50%;
margin-left: -80px;
position: absolute;
z-index: 999;
bottom: 5%;
left: 50%;
margin-left: -80px;
position: absolute;
z-index: 999;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-ms-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-ms-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
p {
color: white;
font-size: 32px;
color: white;
font-size: 32px;
}
.text_thing:after {
content: ' .';
animation: dots 2s steps(5, end) infinite;
content: " .";
animation: dots 2s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% {
color: rgba(0,0,0,0);
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);
}
40% {
color: white;
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);
}
60% {
text-shadow:
.25em 0 0 white,
.5em 0 0 rgba(0,0,0,0);
}
80%, 100% {
text-shadow:
.25em 0 0 white,
.5em 0 0 white;
}
0%,
20% {
color: rgba(0, 0, 0, 0);
text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
}
40% {
color: white;
text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
}
60% {
text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
}
80%,
100% {
text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
}
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[esx]/esx_loadingscreen/index.html
+18 -21
View File
@@ -1,28 +1,25 @@
<html lang="en">
<head>
<head>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
rel="stylesheet"
/>
<script src="./js/index.js" type="text/javascript"></script>
</head>
<body>
</head>
<body>
<div id="wrapper">
<div id="loading_txt">
<p class="text_thing">Loading</p>
</div>
<div id="loading_txt">
<p class="text_thing">Loading</p>
</div>
<video id="esx_intro" width="100%" autoplay>
<source src="vid/esx_intro.mp4" type="video/webm">
</video>
<video id="esx_loop" width="100%" loop>
<source src="vid/esx_loop.mp4" type="video/webm">
</video>
<video id="esx_intro" width="100%" autoplay>
<source src="vid/esx_intro.mp4" type="video/webm" />
</video>
<video id="esx_loop" width="100%" loop>
<source src="vid/esx_loop.mp4" type="video/webm" />
</video>
</div>
</body>
</html>
</body>
</html>
[esx]/esx_loadingscreen/js/index.js
+9 -9
View File
@@ -10,13 +10,13 @@
// If you redistribute this software, you must link to ORIGINAL repository at https://github.com/esx-framework/esx-reborn
// This copyright should appear in every part of the project code
$(document).ready(function(){
const introTag = document.getElementById('esx_intro');
const loopTag = document.getElementById('esx_loop');
document.addEventListener("DOMContentLoaded", () => {
const introTag = document.getElementById("esx_intro");
const loopTag = document.getElementById("esx_loop");
introTag.onended = (event) => {
introTag.style.display = "none";
loopTag.loop = true; // true
loopTag.play()
};
})
introTag.onended = () => {
introTag.style.display = "none";
loopTag.loop = true; // true
loopTag.play();
};
});