• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Javascripte funtionieren nicht - egal ob Atom/Visualstudio Code (Umgeschrieben)

nookije

Neues Mitglied
Hallo Leute

Ich habe mein Thread mal umgeschrieben. Es scheint, als würde mein html/css mein js nicht akzeptieren.
Ich denke, ich habe alles richtig verlinkt? Ich bin erst seit 3 Tagen in dem ganzen Frontend Zeugs und bitte um Eure Hilfe. Bin gerade dabei mein eigenes Portfolio zu schreiben.

Ich habe meine .js Datein alle schön in einem js-Ordner abgelegt und dort raus angesprochen. jquery Bibliothek habe ich ebenfalls über dem eigenen .js platziert. Ich arbeite mit einem Liveserver und dort werden mir die "Animationen" nicht angezeigt. Woran könnte das liegen?

<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="utf-8">
<title>Sascha Danielzik | Graphic and Digital Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sascha Danielzik | Graphic and Digital Design">
<meta name="keywords" content="Sascha, Danielzik, Polygraf, Basel, Interaktion">


<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.5.1.min.js"></script>
</head>


<body>
<header>
<h1>Sascha Angelo Danielzik</h1>

<nav>
<a href="about.html">About</a>
</nav>
</header>


<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item portrait">
<img src="content/01/01_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/02/02_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/03/03_bild_avatar.jpg">
</div>

<div class="grid-item portrait">
<img src="content/04/04_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/05/05_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/06/06_bild_avatar.jpg">
</div>

<div class="grid-item portrait">
<img src="content/07/07_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/08/08_bild_avatar.jpg">
</div>

<div class="grid-item landscape">
<img src="content/09/09_bild_avatar.jpg">
</div>
</div>

<script src="js/scroll.js"></script>
</body>

</html>

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
height: 100%;
}





/*_____________________________ style.css beginnt hier_____________________________ */


@font-face {
font-family: "Bandeins";
src: url("/fonts/BandeinsStrangeVariable.ttf") format("truetype-variations");
}
header{
font-size: 50px;
font-family: Bandeins;
position:fixed;
background-color: red;
}

nav a{
color: black;
text-decoration: none;
font-variation-settings: "wght" 100, "wdth" 100;
transition: font-variation-settings 0.2s;
}

a:hover {
font-variation-settings: "wght" 900, "wdth" 200;
}

body{
margin: 2em;
}

// pick the h1 Tags
const h1 = document.querySelector("h1")

//and when i scroll, calculate how big the font size should be
window.addEventListener("scroll", function(){
const pixels = window.pageYOffset

const fontWeight = pixels * 0.4 +100
const fontSize = pixels * 0.1 + 100



//font-size -> fontSize
//font-variation-settings -> fontVariationSettings
h1.style.fontVariationSettings = '"wght" ${fontWeight}, "wdth" ${fontWidth}'

})



Besten Dank für Eure Antwort.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben