Witam, Pytanie jak w temacie. Jak zrobić napis,by sie drukował. Kopiuję sckrypty na notatnika++ i nie odpala. Dałem biblioteki obsługujące typewrite, skopiowałem z https://paulund.co.uk/create-typing-effect. Ba Nie dość że nie wypisuje to usuwami mi inne
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat+Brush|Gravitas+One|Rock+Salt|Special+Elite|Squada+One" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/typed.js"></script>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.tickertype.js"></script>
</HEAD>
<BODY>
<div class="main">
<div class="foto"><img src="darek.png" style="widht:19vh; height:12.4vh;"></div>
<div class="symbol"><img src="programming.png" style="widht: 8vh; height:8vh; position:relative; top:2.2vh; left:2.5vh;"> </div>
<div class="text">DARIUSZ HOZER </div>
</div>
<div class="centrum">
<div class="straight"></div>
<div class="straight1"></div>
<div class="straight2"></div>
<div class="describe">Project</div>
<div class="describe1">WEBMASTER</div>
<div class="triangle"></div>
<div class="element"></div>
</div>
<div class="down"></div>
</BODY>
</HTML>
JavaScript:
$(document).ready(function(){
$(".foto").each(function(){
$(".foto").show(700);
});
});
$(document).ready(function(){
$(".describe").each(function(){
var div = $(".describe");
div.animate({fontSize: '4em'}, "slow");
div.animate({fontSize: '6em'}, "slow");
});
});
$(document).ready(function(){
$(".describe1").each(function(){
var div = $(".describe1");
div.animate({fontSize: '6em'}, "slow");
});
});
$(document).ready(function(){
$(".straight").each(function(){
$(".straight").animate({width: 450}, 1500);
$('.straight').show(1000)
$('.straight1').show(1600);
$('.straight2').show(2000);
});
});
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
CSS:
body{
margin:0px;
width:100%;
}
.main{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
width:100%;
height:12.7vh;
background-repeat:no-repeat;
background-color:black;
background-size: 100% 100%;
z-index:2;
}
.text{
position:absolute;
right:12vh;
top:1.5vh;
color:white;
font-family: 'PT Sans Caption', sans-serif;
text-align:center;
font-size:2.5vh;
}
.centrum{
width:100%;
height:350vh;
background-repeat:no-repeat;
background-color:white;
background-size:100% 100%;
}
.describe{
position:relative;
width:40%;
height:40vh;
top:19vh;
left:3vh;
margin:0px;
font-size:12vh ;
font-family: 'Quicksand', sans-serif;
z-index:2;
text-align:left;
}
.describe1 {
position:relative;
width:40%;
height:30vh;
letter-spacing:0.6vh;
top:-8.1vh;
left:27vh;
font-size:2.5vh;
font-family: 'Caveat Brush', cursive;
font-family: 'Rock Salt', cursive;
font-family: 'Gravitas One', cursive;
font-family: 'Special Elite', cursive;
font-family: 'Squada One', cursive;
z-index:1;
text-align:left;
}
.straight{
width:0em;
height:0.1vh;
border:0.1vh solid black;
background-color:black;
position:relative;
margin:0px;
top:46vh;
left:27.8vh;
}
.straight1 {
width:19em;
height:0.1vh;
border:0.1vh solid black;
background-color:black;
position:relative;
margin:0px;
top:62.25vh;
left:75.3vh;
transform:rotate(60deg);
display:none;
}
.straight2 {
width:30em;
height:0.1vh;
border:0.1vh solid black;
background-color:black;
position:relative;
margin:0px;
top:78.7vh;
left:104.3vh;
display:none;
}
.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid black;
position:relative;
top:8.25vh;
left:164.5vh;
}
.foto {
float:right;
margin:0px;
display:none;
}
.down {
width:100%;
height:19vh;
background-color:black;
background-size: 100% 100%;
background-repeat:no repeat;
}