Stworzyłem swoją pierwszą stronę al'a wizytówkę, ale mam problem którego nie mogę od kilku dni rozwiązać, zawsze sięgam do każdych dostępnych źródeł i udaje mi się rozwiązywać problemy, ale te dwa są zbyt ciężkie jak dla mnie dlatego zwracam się do was!
1. Tekst/divy na stronie głównej w elementach dziwnie skaczą podczas najeżdżania na nich kursorem, czym jest to spowodowane i jak to naprawić?
2. Jeśli na chwilę zmienisz obecną kartę mojej strony na inną i wrócisz po minucie w miejscu pod logiem gdzie pojawiają się cytaty pojawi się spam losowych znaków, jak temu zapobiec?
Do 1
HTML
<html lang="pl">
<head>
<meta charset="utf-8">
<title> </title>
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One|Indie+Flower" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="themes/edition-winter.css">
<script src="sfx/mobile.js"></script>
<script src="sfx/flybuttons.js"></script>
<script src="sfx/randomback.js"></script>
<script src="sfx/write.js"></script>
<script type="text/javascript">
function start(){
mobiledetect();
navf(1);
backlos();
logos();
startwriting();
}
function clicklogo(){
window.open("index.html","_self");
}
</script>
</head>
<body onload="start()" id="body">
<div id="all" >
<div id="logo" class="logostop logocolor" onclick="clicklogo()" ><div id="logocont" class="txt logofont"></div></div>
<div id="cytat" class="cytatstop"><div id="cytatcon" class="txt"></div></div>
<div id="nav1" onclick="opennav1()" class="fit fittext fitop refitcolor"> <div class="txt fontf">O szakalu!</div> </div>
<div id="nav2" onclick="opennav2()" class="fitx fittext fitop refitcolor"> <div class="txt fontf">Projekty </div> </div>
<div id="nav3" onclick="opennav3()" class="fit fittext fitop refitcolor"> <div class="txt fontf">Bogowie </div> </div>
<div id="nav4" onclick="opennav4()" class="fitx fittext fitop refitcolor"> <div class="txt fontf">Nakarm szakala! </div> </div>
<div id="nav5" onclick="opennav5()" class="fit fittext fitop refitcolor"> <div class="txt fontf">Sklepik </div> </div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body
{
text-align: center;
font-size:60px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.back1{
background-image: url("img/back1.jpeg");
}
.back2{
background-image: url("img/back2.jpeg");
}
.back3{
background-image: url("img/back3.jpeg");
}
.back1m{
background-image: url("img/back1m.jpeg");
}
.back2m{
background-image: url("img/back2m.jpeg");
}
.back3m{
background-image: url("img/back3m.jpeg");
}
.txt{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width:100%;
}
.fontf{
font-family: 'Indie Flower', cursive;
}
.logofont{
font-family: 'Fredoka One', cursive;
}
#all{
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top: 50%;
height:95%;
width: 95%;
}
#logo{
position: absolute;
top: 0%;
cursor:pointer;
border-radius: 20px;
transition: 1.5s;
}
#cytat{
position: absolute;
top: 16%;
font-size:28px;
background-color:#cccccc;
border-radius: 23px;
transition: 0.45s;
}
.cytatstop{
height:5%;
width: 0%;
left: 50%;
opacity: 0.12;
}
.cytatstart{
height:5%;
width: 80%;
left: 10%;
opacity: 0.70;
}
#logo:hover{
position: absolute;
top: 0%;
border-radius: 20px;
transition: 1.5s;
}
#logocont{
opacity: 1;
}
.logostop{
left: 50%;
height:0%;
width: 0%;
opacity: 0.1;
}
.logostart{
left: 5%;
width: 90%;
height:15%;
opacity: 0.75;
}
.fittext{
font-size:0px;
color:orange;
}
.refittext{
font-size: 50px;
color:black;
}
.fit{
width: 0%;
left: 50%;
opacity: 0;
height:0%;
transform: translate(100%,500%);
border-radius: 20px;
}
.fitx{
width: 0%;
left: 50%;
opacity: 0;
height:0%;
transform: translate(-100%,500%);
border-radius: 20px;
}
.refit{
width: 60%;
left: 20%;
height:10%;
border-radius: 20px;
opacity: 0.9;
}
.refit:hover{
width: 55%;
left: 22.5%;
height:10%;
cursor:pointer;
border-radius: 35px;
color:#333333;
opacity: 1;
}
.refit:active{
width: 50%;
left: 25%;
height:10%;
cursor:pointer;
border-radius: 35px;
color:#333333;
opacity: 1;
}
.fitop{
transition: 0.4s;
}
.refitop{
transition: 0.4s;
}
#nav1{
position: absolute;
top: 25%;
}
#nav2{
position: absolute;
top: 37%;
}
#nav3{
position: absolute;
top: 49%;
}
#nav4{
position: absolute;
top: 61%;
}
#nav5{
position: absolute;
top: 73%;
}
Do 2
JS pisania cytatów/logo
const textlogo=["X","e","v","J","a","c","k",".","c","o","m"," ","=",")","*"];
const cytaty=["t1","S", "z", "a", "k", "a", "l", "e", " ", "ż", "y", "w", "i", "ą", " ", "s", "i", "ę", " ", "t", "a", "k", "ż", "e", " ", "r", "o", "ś", "l", "i", "n", "a", "m", "i","*","t2","S", "z", "a", "k", "a", "l", "e", " ", "w", "y", "s", "t", "ę", "p", "o", "w", "a", "ł", "y", " ", "k", "i", "e", "d", "y", "ś", " ", "n", "a", " ", "t", "e", "r", "e", "n", "i", "e", " ", "P", "o", "l", "s", "k", "i","*","t3","S", "z", "a", "k", "a", "l", "e", " ", "ż", "y", "j", "ą", " ", "ś", "r", "e", "d", "n", "i", "o", " ", "1", "0", " ", "l", "a", "t","*","t4","S", "a", "m", "i", "c", "e", " ", "s", "z", "a", "k", "a", "l", "i", " ", "ł", "ą", "c", "z", "ą", " ", "s", "i", "ę", " ", "n", "a", " ", "c", "a", "ł", "e", " ", "ż", "y", "c", "i", "e", " ", "t", "y", "l", "k", "o", " ", "z", " ", "j", "e", "d", "n", "y", "m", " ", "p", "a", "r", "t", "n", "e", "r", "e", "m","*","t5","S", "z", "a", "k", "a", "l", "e", " ", "w", " ", "s", "t", "a", "d", "a", "c", "h", " ", "p", "o", "t", "r", "a", "f", "i", "ą", " ", "a", "d", "o", "p", "t", "o", "w", "a", "ć", " ", "i", "n", "n", "e", " ", "m", "ł", "o", "d", "e","*","t6","R", "o", "k", " ", "2", "0", "1", "9", " ", "j", "e", "s", "t", " ", "r", "o", "k", "i", "e", "m", " ", "w", " ", "k", "t", "ó", "r", "y", "m", " ", "p", "o", "p", "u", "l", "a", "c", "j", "a", " ", "s", "z", "a", "k", "a", "l", "i", " ", "w", " ", "P", "o", "l", "s", "c", "e", " ", "z", "n", "a", "c", "z", "n", "i", "e", " ", "w", "z", "r", "o", "ś", "n", "i", "e","*","t7","S", "z", "a", "k", "a", "l", "e", " ", "p", "r", "ę", "g", "o", "w", "a", "n", "e", " ", "l", "u", "b", "i", "ą", " ", "l", "u", "d", "z", "k", "i", "e", " ", "t", "o", "w", "a", "r", "z", "y", "s", "t", "w", "o", " ", "i", " ", "ł", "a", "t", "w", "o", " ", "s", "i", "ę", " ", "o", "s", "w", "a", "j", "a", "j", "ą","*","t8","S", "z", "a", "k", "a", "l", "e", " ", "z", "a", "c", "h", "o", "w", "a", "n", "i", "e", "m", " ", "p", "r", "z", "y", "p", "o", "m", "i", "n", "a", "j", "ą", " ", "p", "s", "a", " ", "d", "o", "m", "o", "w", "e", "g", "o","*","t9","S", "z", "a", "k", "a", "l", "e", " ", "p", "o", "c", "h", "o", "d", "z", "ą", " ", "z", " ", "r", "o", "d", "z", "a", "j", "u", " ", "w", "i", "l", "k", "ó", "w", ",", " ", "a", "l", "e", " ", "p", "r", "z", "y", "p", "o", "m", "i", "n", "a", "j", "ą", " ", "b", "a", "r", "d", "z", "i", "e", "j", " ", "k", "o", "j", "o", "t", "y","*","t10","S", "z", "a", "k", "a", "l", "e", " ", "s", "ą", " ", "b", "a", "r", "d", "z", "o", " ", "g", "ł", "o", "d", "n", "e", "!","*","t11","A", "w", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o", "o","*","t12","S", "z", "a", "k", "a", "l", "e", " ", "s", "ą", " ", "ł", "a", "d", "n", "e", "!", " ", "p", "r", "z", "y", "n", "a", "j", "m", "n", "i", "e", "j", " ", "s", "z", "a", "k", "a", "l", "e", " ", "t", "a", "k", " ", "u", "w", "a", "ż", "a", "j", "ą","*","t13","X", "e", "v", "r", "r", "e", "r", " ", "p", "o", "s", "i", "a", "d", "a", " ", "d", "u", "ż", "y", " ", "b", "ł", "ę", "k", "i", "t", "n", "y", " ", "o", "g", "o", "n", ",", " ", "k", "t", "ó", "r", "e", "g", "o", " ", "n", "i", "e", " ", "m", "o", "ż", "e", "s", "z", " ", "d", "o", "t", "k", "n", "ą", "ć","*","t14","S", "z", "a", "k", "a", "l", " ", "z", "j", "e", " ", "w", "s", "z", "y", "s", "t", "k", "o", " ", "c", "o", " ", "m", "u", " ", "d", "a", "s", "z", "!","*","t15","Z", " ", "t", "y", "m", " ", "s", "z", "a", "k", "a", "l", "e", "m", " ", "m", "o", "ż", "e", "s", "z", " ", "s", "i", "ę", " ", "z", "a", "p", "r", "z", "y", "j", "a", "ź", "n", "i", "ć","*","*","*"]
var losglob = Math.floor((Math.random() * 15) + 1);
function startwriting(){
setTimeout(piszlogo,500,1);
setTimeout(piszcytat,1900);
setTimeout(cytatback,1600);
setTimeout(cytatstart,11000);
}
function cytatstart(){
document.getElementById("cytatcon").innerHTML="";
setTimeout(cytatback2,1);
setTimeout(cytatback,450);
setTimeout(cytatstartnext,752);
}
function cytatstartnext(){
setTimeout(piszcytat,1);
setTimeout(cytatstart,11000);
}
function cytatback(){
document.getElementById("cytat").classList.remove('cytatstop');
document.getElementById("cytat").classList.add('cytatstart');
}
function cytatback2(){
document.getElementById("cytat").classList.remove('cytatstart');
document.getElementById("cytat").classList.add('cytatstop');
}
function piszlogo(x){
var losx = Math.floor((Math.random() * 50) + 220);
document.getElementById("logocont").innerHTML+=textlogo[x-1];
if(textlogo[x]!="*"){setTimeout(piszlogo,losx,x+1);}
}
function piszcytat(){
losglob = Math.floor((Math.random() * 15) + 1);
var read=0;
var start="t"+losglob;
var stop=0;
for(i=0;stop!=1;i++){
if (cytaty[i]==start){stop=1;read=i;}}
setTimeout(piszcytatnext,10,read);
}
function piszcytatnext(x){
var losowo = Math.floor((Math.random() * 19) + 77);
if(cytaty[x+1]!="*"){
document.getElementById("cytatcon").innerHTML+=cytaty[x+1];
setTimeout(piszcytatnext,losowo,x+1);}
}
To jest bardzo wazne dla mnie dlatego liczę na waszą pomoc, będę naprawdę wdzięczny <3
