kristalljunge
Mitglied
Hey,
ich würd den Hintergrund meiner Seite gerne einen kleinen Farbverlauf geben. Dies schaffe ich mit folgendem Code im Headbereich "erstmal" gut hin.
------
Im Body siehts bei mir dann so aus:
Auf den ersten Blick sieht es auch "gut" aus, sobald ich aber runterscrolle, übernimmt #fading aber die die komplette Breite und Höhe, und wird in diesem Beispiel von grün zu weiß, ohne dass irgendwas an den darinliegenden DIV's zu sehen ist. Weiß jemand ne andere Lösung oder weiß was ich falsch mache?
ich würd den Hintergrund meiner Seite gerne einen kleinen Farbverlauf geben. Dies schaffe ich mit folgendem Code im Headbereich "erstmal" gut hin.
HTML:
<script type="text/javascript" src="[URL]http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js[/URL]"> </script>
<script type="text/javascript">
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=800 // 800px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
$('#fading').css('opacity',opacity);
$('#fading').html(opacity);
});
</script>------
Im Body siehts bei mir dann so aus:
HTML:
<body>
<div id="fading" style="background:#0af211;">
<?php include('header.php'); ?>
// RESTLICHER INHALT //
</div>
</body>Auf den ersten Blick sieht es auch "gut" aus, sobald ich aber runterscrolle, übernimmt #fading aber die die komplette Breite und Höhe, und wird in diesem Beispiel von grün zu weiß, ohne dass irgendwas an den darinliegenden DIV's zu sehen ist. Weiß jemand ne andere Lösung oder weiß was ich falsch mache?
