rantanplan2000
Mitglied
Hallo, leider weis ich nicht genau wie man sowas nennt und im Codes aus Seiten kopieren bin ich noch nicht sonderlich begabt bzw geübt.
Ich möchte diesen Scrolleffekt haben, wie auch auf den Beispielen zu sehen. Dass eben ein Hintergrundbild fixiert ist und dann eben Inhalt. Beim Scrollen bleibt das Bild immer gleich. Am beisten wohl mit Beispiel, daher:
http://misafesolutions.com.au/
Bei:
ABOUT US
... In Australia, MiSAFE Solutions has earned a ...
und
http://www.liquid-screw.com/
direkt am Anfang mit den Solikonflaschen.
Ich habe einfach mal experimentiert, aber so ganz den gewünschten Effekt schaffe ich nicht. Hier mein Code:
p.s. wie groß bzw wie breit sollte ein Bild denn für sowas sein? gibt ja doch recht viele, sehr große bildschirme. aber ich glaube das macht man dann mit zoom auch?
Wenn ich mein test mal Zoome, sieht es so aus:
da kachelt er das bild. wenn ich dass bei der demo anschaue, zoomt er es und passt es an:
Ich möchte diesen Scrolleffekt haben, wie auch auf den Beispielen zu sehen. Dass eben ein Hintergrundbild fixiert ist und dann eben Inhalt. Beim Scrollen bleibt das Bild immer gleich. Am beisten wohl mit Beispiel, daher:
http://misafesolutions.com.au/
Bei:
ABOUT US
... In Australia, MiSAFE Solutions has earned a ...
und
http://www.liquid-screw.com/
direkt am Anfang mit den Solikonflaschen.
Ich habe einfach mal experimentiert, aber so ganz den gewünschten Effekt schaffe ich nicht. Hier mein Code:
p.s. wie groß bzw wie breit sollte ein Bild denn für sowas sein? gibt ja doch recht viele, sehr große bildschirme. aber ich glaube das macht man dann mit zoom auch?
Wenn ich mein test mal Zoome, sieht es so aus:
da kachelt er das bild. wenn ich dass bei der demo anschaue, zoomt er es und passt es an:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container{
max-width:700px;
background: #fff;
margin-left: auto;
margin-right: auto;
}
.full-screen{
max-width:100%;
background-image: url(http://www.desktopwallpaperhd.net/wallpapers/18/3/japan-windows-theme-desktop-themes-hokkaido-sunrise-oakan-lake-183539.jpg);
background-attachment:fixed;"
margin-left: auto;
margin-right: auto;
}
.full-screen-container{
max-width:700px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div>
<h1>Hallo Welt</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p>
</div>
<div>
<h1>Hallo Welt</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p>
</div>
</div><!-- End Container -->
<div class="full-screen">
<div class="full-screen-container">
<div>
<h1>heeh hui</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia qui vero, culpa fugiat, sit vel dolorem ullam et recusandae quo voluptatem cumque harum, corporis eaque! Temporibus doloribus voluptatum quod quisquam.
<h1>heeh hui</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia qui vero, culpa fugiat, sit vel dolorem ullam et recusandae quo voluptatem cumque harum, corporis eaque! Temporibus doloribus voluptatum quod quisquam.
<h1>heeh hui</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia qui vero, culpa fugiat, sit vel dolorem ullam et recusandae quo voluptatem cumque harum, corporis eaque! Temporibus doloribus voluptatum quod quisquam.
<h1>heeh hui</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia qui vero, culpa fugiat, sit vel dolorem ullam et recusandae quo voluptatem cumque harum, corporis eaque! Temporibus doloribus voluptatum quod quisquam.
</div>
</div>
</div>
<div class="container">
<div>
<h1>Hallo Welt</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p>
</div>
<div>
<h1>Hallo Welt</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sed ex molestias enim repellat temporibus laboriosam iste nam accusantium. Voluptatibus, assumenda. Impedit tempora mollitia libero, sapiente quia exercitationem placeat eos.</p>
</div>
</div><!-- End Container -->
</body>
</html>
Zuletzt bearbeitet:
danke! :-)