nicht angemeldet
Hi,
der grundlegende Effekt funktioniert, was nicht funktioniert, ist die Positionierung. Ich verstehe schon gar nicht, wie man das richtig positioniert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jInvertScroll Demo Page</title>
<style type="text/css">
html,
body
{
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
overflow-x: hidden;
background: url('../images/bg.jpg') repeat top left;
}
h1
{
font-size: 20px;
font-weight: normal;
color: #2e6e80;
}
/**
* important: keep position fixed, you can however use top:0 instead of bottom:0
* if you want to make it stick to the top of the browser
*/
.scroll
{
position: fixed;
bottom: 0;
left: 0;
}
/**
* z-index ordering of the different layers, do this for your layers,
* also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
*/
.horizon
{
z-index: 1;
width: 3000px;
}
.middle
{
z-index: 500;
width: 4000px;
}
.front
{
z-index: 1000;
width: 6000px;
}
</style>
</head>
<body>
<h1>jInvertScroll Example</h1>
<div class="horizon scroll">
<img src="images/bus.jpg" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
$(document).ready(function(){
$('html, body').animate({scrollTop: 0}, 20);
});
</script>
</body>
</html>
Mit diesem Script: http://www.pixxelfactory.net/jInvertScroll/
Der Bus fährt schön am unteren oder oberen Bildrand, aber sobald es in die Positionierung (sprich die Einbindung in die Seite) geht, ist's vorbei mit der Herrlichkeit. Ich habe den Eindruck, dass die ganzen relativen, absoluten und fixen Positionierungen ad absurdum geführt werden.
Gunnar Bittersmann
Der Martin
Matthias Apsel