Hallo,
ich hab erst vor 3 Tagen mit html angefangen, also entschuldigt bitte (mögliche) dumme Fragen oder Ausdrucksweisen
Also, meine Überschrift (h1) befindet sich in der Mitte der Seite und 150px von "oben" entfernt. Jetzt will ich, dass sie sich verkleinert und auf die linke seite wandert, sobald die Website auf 150px (also auf die höhe der Überschrift) runtergescrollt wurde, und dort "fixiert" wird. Dass sie dann nach links verschoben wird und auch da bleibt, hab ich schon geschafft, ich scheitere nur gerade daran, dass sie "rübergleitet" und nicht mit einem mal da ist.
Wäre schön, wenn mir jemand helfen, könnte, weil im Internet habe ich zwar einiges gefunden, aber nichts, was wirklich funktioniert.
Ich poste mal noch den jetzigen Code, vielleicht muss man ja nur noch ein bisschen was abändern :)
Vielen Dank schonmal für jede Hilfe ;)
H4ck3r
ich hab erst vor 3 Tagen mit html angefangen, also entschuldigt bitte (mögliche) dumme Fragen oder Ausdrucksweisen
Also, meine Überschrift (h1) befindet sich in der Mitte der Seite und 150px von "oben" entfernt. Jetzt will ich, dass sie sich verkleinert und auf die linke seite wandert, sobald die Website auf 150px (also auf die höhe der Überschrift) runtergescrollt wurde, und dort "fixiert" wird. Dass sie dann nach links verschoben wird und auch da bleibt, hab ich schon geschafft, ich scheitere nur gerade daran, dass sie "rübergleitet" und nicht mit einem mal da ist.
Wäre schön, wenn mir jemand helfen, könnte, weil im Internet habe ich zwar einiges gefunden, aber nichts, was wirklich funktioniert.
Ich poste mal noch den jetzigen Code, vielleicht muss man ja nur noch ein bisschen was abändern :)
Code:
<!DOCTYPE html>
<html>
<head>
<title>default</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<style>
body{
background-color: #DFDDDD;
}
h1{
font-size: 90px;
font-weight: bold;
font-family: 'Fjalla One', sans-serif;
text-align: center;
margin-top: 180px;
color: #DADADA;
}
h2{
font-size: 30px;
font-family: 'Slabo 27px', serif;
text-align: center;
margin-top: -30px;
color: #FFFFFF;
}
ul{
text-align: center;
padding: 20px;
background: #DFDDDD;
}
li{
display: inline;
padding: 0 30px 0 30px;
}
img{
}
.header{
background-image: url(http://fs5.directupload.net/images/161016/97oj98mi.png);
background-position: center;
height: 500px;
}
.logo{
text-align: left;
position: relative;
font-size: 50px;
}
</style>
</head>
<body>
<div class="header">
<h1 id="logo">Area51</h1>
<h2>die Stadt der Aliens</h2>
</div>
<ul>
<li><img src="http://fs5.directupload.net/images/161016/jl4lnpln.png" height="200"/></li>
<li><img src="http://fs5.directupload.net/images/161016/wvdcnoou.png" height="200"/></li>
<li><img src="http://fs5.directupload.net/images/161016/68ccuub7.png" height="200"/></li>
<li><img src="http://fs5.directupload.net/images/161016/qicixd4c.png" height="200"/></li>
</ul>
<div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 180 || document.documentElement.scrollTop > 180) {
//document.getElementById("logo").className = "logo";
moveLeft();
} else {
document.getElementById("logo").className = "";
}
}
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('logo');
//imgObj.style.position= 'fixed';
}
function moveLeft(){
if (imgObj.style.position.left >= 10 + 'px') {
clearTimeout(animate);
imgObj.style.left = parseInt(imgObj.style.left) - 10 + 'px';
animate = setTimeout(moveLeft, 10);
}
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
</script>
</body>
</html>Vielen Dank schonmal für jede Hilfe ;)
H4ck3r