• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić drukowany napis

VPS Starter Arubacloud
–2 głosów
262 wizyt
pytanie zadane 23 września 2016 w JavaScript przez DariuszH Gaduła (3,100 p.)
edycja 23 września 2016 przez ScriptyChris

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;
}

 

1
komentarz 23 września 2016 przez niezalogowany
Ciężko pomóc przy takim opisie problemu
komentarz 23 września 2016 przez Lid$ Mądrala (6,300 p.)

Nie wiem o co tobie chodzi "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" Łamiesz regulamin:

II. Zasady korzystania z Serwisu i Chatu

1.Wypowiadając się w Serwisie lub na Chacie, Pasjonat zobowiązany jest do przestrzegania następujących zasad:

​​G. należy unikać błędów językowych i dbać o poprawność, klarowność oraz sens wypowiedzi.

2.Zadając pytanie Pasjonat zobowiązany jest do przestrzegania następujących zasad:

D. w treści pytania należy dokładnie opisać swój problem i podać jak najwięcej szczegółów,

 

komentarz 23 września 2016 przez DariuszH Gaduła (3,100 p.)
Pisałem szybko więc nie zwracałem uwagi na błędy za co bardzo przepraszam :) Wkleiłem kod html a w nim skrypty Jquery i css. Myślałem, że to wystarczy :)
komentarz 23 września 2016 przez Lid$ Mądrala (6,300 p.)
No, nie jestem wstanie ci pomóc na podstawie tego opisu problemu.. a nie chce mi się studiować specjalnie dla ciebie kodu, tylko po to, aby się dowiedzieć, co ty w ogóle tworzysz.. popraw
komentarz 23 września 2016 przez ScriptyChris Mędrzec (190,190 p.)

@DariuszH, edytowałem Twój post - rozdzieliłem kod z jednego bloczka (umieściłeś go jako CSS) na HTML, CSS i JavaScript. Usunąłem też puste linie. Mam nadzieję, że nic nie popsułem.

Na przyszłość proszę umieszczać lepiej sformatowany kod (odstępy, "entery") i rozdzielać go na HTML/CSS/JavaScript (jeśli w adekwatnych działach zakładasz temat).

komentarz 23 września 2016 przez DariuszH Gaduła (3,100 p.)
Dziękuję :) Jestem wzruszony :)

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 610 wizyt
pytanie zadane 2 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
1 odpowiedź 773 wizyt
pytanie zadane 9 maja 2016 w HTML i CSS przez barteku12 Obywatel (1,340 p.)
0 głosów
3 odpowiedzi 571 wizyt
pytanie zadane 3 lutego 2016 w HTML i CSS przez Mavimix Dyskutant (8,390 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...