Dzień dobry.
Piszę do Was z prośbą o pomoc. Mianowicie chcę stworzyć stronę internetową, która zapyta nowych użytkowników o język, którym się posługują i w zależności od wyboru przekieruje ich na odpowiednią podstronę. Każde przejście na nową stronę, lub przeładowanie strony poprzedzone jest animacją. Problem polega na tym, że content strony wczytuje się przed odpowiednią funkcją js, która wywołuje animację, oraz ustawia czas jej trwania. Odświeżenie strony wygląda tak, że wczytuje się animacja pulsującego logo i jednocześnie zdjęcie header'a, którego nie powinno tam być, po upływie niecałej sekundy znika, jednak jest to mało profesjonalne i słabo wygląda. Problem również jest w przypadku, w którym strona wykryje, że użytkownik, który próbuję przejść do podstrony w danym języku np. domena.pl/pl/home.html językiem, a nie wybrał go wcześniej to zadanie funkcji location.href = "../index.html"wykonuje się po wczytaniu części strony, pomimo, że jest ona wywoływana na samym początku.
Ciężko jest mi to szczegółowo opisać, dlatego też udostępnię link do strony, na której widoczne są poszczególne problemy w trakcie przejść pomiędzy stronami oraz przy przeładowaniu strony. Z problemem zmagam się już, któryś dzień i nie potrafię go samodzielnie rozwiązać. Liczę na Waszą pomoc!
Link do strony: https://www.rszczepanski.pl/np
Kod:
INDEX (strona dla nowych użytkowników):
<!DOCTYPE html>
<head lang="pl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
window.onload = function() {
welcomePage();
}
</script>
<!-- ABOUT WEBSITE -->
<title>Strona główna</title>
<meta name="description" content="This is description about this page.">
<meta name="keywords" content="Website, template, bootstrap">
<meta name="author" content="Radosław Szczepański">
<!-- CSS FILES -->
<link href="assets/css/welcome.css" rel="stylesheet" type="text/css" />
<link href="assets/css/animations.css" rel="stylesheet" type="text/css" />
<!-- JS FILES -->
<script src="assets/js/welcome.js"></script>
<!-- BOOTSTRAP -->
<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<div class="loading-screen">
<div class="container">
<div id="img-screen">
<img src="assets/imgs/logo.jpg" alt="logo" id="img-padding">
</div>
<div id="lang-screen" class="text-center text-white">
<p class="scale-up-center">WYBIERZ JĘZYK</p>
<div class="line ml-auto mr-auto my-4"></div>
<p class="scale-up-center mb-5">CHOOSE YOUR LANGUAGE</p>
<button onclick="plLang();" class="button btn-corners">PL</button>
<span class="mx-4"></span>
<button onclick="enLang();" class="button btn-corners">EN</button>
</div>
</div>
</div>
</body>
<!-- Bootstrap JS & JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="assets/bootstrap/bootstrap.min.js" type="text/javascript"></script>
</html>
HOME (strona dla osób, które wybrały język Polski, skrypt zapamiętuje wybór i za każdym razem automatycznie przenosi do tej pod strony):
<!DOCTYPE html>
<head lang="pl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
window.onload = function() {
loadPage();
}
</script>
<!-- ABOUT WEBSITE -->
<title>Strona główna</title>
<meta name="description" content="This is description about this page.">
<meta name="keywords" content="Website, template, bootstrap">
<meta name="author" content="Radosław Szczepański">
<!-- CSS FILES -->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/animations.css" rel="stylesheet" type="text/css" />
<!-- JS FILES -->
<script src="../assets/js/loadPage.js"></script>
<!-- BOOTSTRAP -->
<link href="../assets/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<div id="loadingScreen">
<div class="wrapper">
<div class="container fade-in">
<img src="../assets/imgs/logo.jpg" class="heartbeat" alt="">
</div>
</div>
</div>
</div>
<div id="web-content">
<header id="main">
<div class="bg-content"></div>
<div class="container" style="padding-top: 25vh;">
<div class="row justify-content-center">
<div class="header-left col-md-4 my-auto">
<h1>Radosław Szczepański</h1>
<p>RS Web Developer</p>
<p2>Nowoczesny system kanału sprzedaży i promocji w internecie!</p2>
<div class="mt-4"><button class="button btn-corners">Sprawdź teraz!</button></div>
</div>
<div class="header-right col-md-8">
<img src="../assets/imgs/header-img.png" width="100%">
</div>
</div>
</div>
</header>
</div>
</body>
<!-- Bootstrap JS & JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="../assets/bootstrap/bootstrap.min.js" type="text/javascript"></script>
</html>
JAVASCRIPT (dla index.html):
function welcomePage() {
if (localStorage.getItem('userSession') == undefined) {
localStorage.setItem('userSession', 0);
loadWelcomePage();
} else if (localStorage.getItem('userSession') == 0) {
loadWelcomePage();
} else if (localStorage.getItem('userSession') == 1) {
location.href = "pl/home.html";
} else if (locationStorage.getItem('userSession') == 2) {
location.href = "en/home.html";
}
}
function loadWelcomePage() {
var logo = document.getElementById('img-screen');
var lang = document.getElementById('lang-screen');
logo.classList.add("fade-in");
setTimeout(function() {
logo.className = "fade-out";
loadWelcomeText();
}, 3000);
function loadWelcomeText() {
lang.classList.add("focus-in-contract");
setTimeout(function() {
document.getElementById('img-padding').style.padding = '0';
lang.style.display = "inline";
}, 1000);
}
}
function plLang() {
localStorage.setItem('userSession', 1);
location.href = "pl/home.html";
}
function enLang() {
localStorage.setItem('userSession', 2);
location.href = "en/home.html";
}
JS (dla home.html):
function loadPage() {
var page = window.location.href;
if (localStorage.getItem('userSession') == undefined) {
localStorage.setItem('userSession', 0);
location.href = "https://rszczepanski.pl/np/index.html";
} else if (localStorage.getItem('userSession') == 0) {
location.href = "../index.html";
} else if (localStorage.getItem('userSession') == 1) {
if (page != "https://rszczepanski.pl/np/pl/home.html") {
location.href = "https://rszczepanski.pl/np/pl/home.html";
} else if (page == "https://rszczepanski.pl/np/pl/home.html") {
loadingScreen();
}
} else if (location.Storage.getItem('userSession') == 2) {
if (page != "en/home.html") {
location.href = "../en/home.html";
} else if (page == "/en/home.html") {
loadingScreen();
}
}
}
function loadingScreen() {
var welcomeScreen = document.getElementById('loadingScreen');
var webContent = document.getElementById('web-content');
webContent.style.display = "none";
welcomeScreen.style.display = "block";
setTimeout(function() {
welcomeScreen.classList.add("fade-out");
webContent.classList.add("fade-in");
}, 2000);
setTimeout(function() {
webContent.style.display = "block";
welcomeScreen.style.display = "none";
}, 3000);
}
CSS (dla index.html)
* {
scroll-behavior: smooth !important;
font-family: 'Roboto', sans-serif;
}
::-webkit-scrollbar {
display: none !important;
}
.loading-screen {
text-align: center;
height: 100vh;
background-color: #000033 !important;
overflow: hidden;
}
#img-padding {
padding-top: 25vh;
}
#lang-screen {
display: none;
}
#lang-screen p {
font-size: 36px;
font-weight: 300;
opacity: 0.8;
}
.line {
width: 120px;
height: 3px;
background-color: rgb(185, 65, 255);
opacity: 0.6;
}
.button {
position: relative;
padding: 0.8em 1.2em;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
text-shadow: 0px 0px 6px rgba(153, 0, 232, 0.4);
}
.button.btn-corners {
color: #c490ff;
}
.button.btn-corners.btn-corners::after,
.button.btn-corners.btn-corners::before {
content: "";
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 2px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.button.btn-corners.btn-corners::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #ab61ff;
border-right-color: #ab61ff;
}
.button.btn-corners.btn-corners::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #ab61ff;
border-left-color: #ab61ff;
}
.button.btn-corners.btn-corners:hover:after,
.button.btn-corners.btn-corners:hover:before {
width: 100%;
height: 100%;
}
#loading-bg img {
width: 30%;
height: 30%
}
#loading-bg {
width: 100% !important;
height: 100%;
z-index: 99;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
}
CSS (dla home.html):
::-webkit-scrollbar {
display: none !important;
}
.wrapper {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#loadingScreen {
height: 100vh;
background-color: #000033 !important;
overflow: hidden;
width: 100%;
}
#loadingScreen .container {
padding-top: 33vh;
}
#loadingScreen img {
width: 25vh;
}
* {
scroll-behavior: smooth !important;
font-family: 'Roboto', sans-serif;
}
::-webkit-scrollbar {
display: none !important;
}
#main {
background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
height: 100vh;
overflow: hidden;
}
.header-left h1 {
font-size: 58px;
color: white;
font-weight: 300;
}
.header-left p {
color: #c490ff;
opacity: 0.6;
font-weight: 700;
}
.header-left p2 {
font-size: 24px;
color: white;
font-weight: 300;
}
.bg-content::before {
content: "";
position: absolute;
top: 0;
right: 0;
height: 85vh;
border-bottom-left-radius: 250px;
width: calc(90vh - 140px);
background-image: url(../imgs/onbg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* btn header */
.button {
position: relative;
padding: 0.8em 1.2em;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
text-shadow: 0px 0px 6px rgba(153, 0, 232, 0.4);
}
.button.btn-corners {
color: #c490ff;
}
.button.btn-corners.btn-corners::after,
.button.btn-corners.btn-corners::before {
content: "";
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 2px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.button.btn-corners.btn-corners::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #ab61ff;
border-right-color: #ab61ff;
}
.button.btn-corners.btn-corners::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #ab61ff;
border-left-color: #ab61ff;
}
.button.btn-corners.btn-corners:hover:after,
.button.btn-corners.btn-corners:hover:before {
width: 100%;
height: 100%;
}
#loading-bg img {
width: 30%;
height: 30%
}
#loading-bg {
width: 100% !important;
height: 100%;
z-index: 99;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
}