 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht: 
|
Verfasst Mo 14.11.2011 15:45
Titel Unterschiedliche Scrollgeschwindigkeiten |
  |
|
Hallo,
ich bastel momentan an einer FH Bewerbungsmappe, die ich am 21. einreichen muss. Da ich überhaupt nicht der Bastler bin möchte ich die Mappe gerne online erstellen, bzw. auf einer CD einreichen. Das ist legitimiert und wird ebenfalls als eine "Arbeit" der Mappe angesehen. Hier brauche ich jetzt zu zwei Fragen hilfe:
1. Ich möchte die Seite zur besseren Präsentation horizontal gestalten! Damit das ganze als eine "flüssige" Erfahrung wahrgenommen wird, möchte ich gerne, dass ich, wenn ich hoch- und runterscrolle, die Seite nach rechts und links scrollt. Hier finde ich bei Google nichts, außer das invertieren vom Scrollen!
2. (siehe edit) Möchte ich, dass der Hintergrund langsamer scrollt als der eigentliche Content. Wie kann ich verschiedenen Hintergrundbildern (wahrscheinlich in <div>'s ) verschiedene Scrollgeschwindigkeiten zuordnen? BEISPIEL! Vermutlich mit Javascript oder?
Ich freue mich über Antworten jeglicher Art!
Viele Grüße,
Soy.
//edit: Manchmal sucht und sucht man, und dann findet mans kurz nach einem Threadbeitrag: Parallax ist das Zauberwort. Damit habe ich schonmal einen Ansatz! Wenn jemand damit erfahren ist, freue ich mich hier trotzem über Tipps! Problem 1 bleibt bestehen!
Zuletzt bearbeitet von soy am Mo 14.11.2011 16:03, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 16:22
Titel
|
|
|
Hallo,
mein "Punkt 2" ist jetzt in der Realisierung etwas klarer, aber ich habe noch einen fehlenden Punkt. Ich habe eine wunderbare Anleitung zu diesem Thema gefunden. Anschließend habe ich das Script und jQuery 1.7 eingebunden.
Jetzt stecke ich beim folgenden Schritt:
| Zitat: | Using the parallax for a background image is incredibly easy. Simply include the javascript files for jQuery and the plugin, then call the scrolling parallax with the path to your image:
| Code: | | $.scrollingParallax('img/background-parallax.jpg'); |
|
Ich kann zwar Englisch, bin aber ein Javascript-Amateur. Wo füge ich diesen Code ein und wie? In den HTML Code, den DIV mit dem Hintergrundbild, für welches ich den Effekt nutzen will, oder wo?
Ich wäre dankbar für jede Hilfe!
|
|
| |
|
|
|
Anzeige
|
|
|
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 16:27
Titel
|
|
|
das kommt in den head bereich deiner html datei.
nachdem du jquery eingefügt hast.
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
});
</script>
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 16:50
Titel
|
|
|
Hi,
danke für die schnelle Antwort! Das funktioniert auf Anhieb und das Bild wird angezeigt!
Leider ist es jetzt so, dass ich ein Bild mit weißem Hintergrund genommen habe. Dieses Bild legt sich ÜBER meinen Content! Ich möchte ja gerne, dass das ganze im Hintergrund funktioniert! Im Notfall kann ich natürlich das Bild mit einem transparenten Hintergrund verwenden, aber das klingt für mich nach einer Bauernlösung!
Bei Bedarf poste ich hier gerne meinen Code:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery1.7.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<!-- Parallax -->
<script type="text/javascript">
$(document).ready(function() {
$.scrollingParallax('img/background-parallax.jpg', {
enableHorizontal : true,
bgWidth : '300%',
bgHeight : '100%',
bgRepeat : true,
staticSpeedX : .5,
});
});
</script>
<!-- ENDE Parallax -->
</head>
<body>
<!-- SEITENSTART HORIZONTAL -->
<div id="content">
<ul id="sliderhorizont">
<li>Testasduahls duagsd </li>
<li>Test2 öoiashda öosidh</li>
</ul>
</div>
<!-- SEITENENDE HORIZONTAL -->
</body>
</html> |
Der ul sliderhorizont ist natürlich noch mit CSS formatiert, die Seite hat eine länge von 5000 pixeln!
Vielen vielen Dank, es funktioniert immerhin schon! (:
Liebe Grüße,
Soy.
|
|
| |
|
|
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht:
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 17:26
Titel
|
|
|
Wie kann ich denn einen z-index für das Script setzen? In den DIVs via CSS ist mir klar! index 1 ist immer hinter 2 oder?!
Hier mein Link: http://soyludico.de/mappe/
Zuletzt bearbeitet von soy am Mo 14.11.2011 17:27, insgesamt 1-mal bearbeitet
|
|
| |
|
|
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 17:42
Titel
|
|
|
jap, z-index:1 ist hinter dem div mit z-index:2
ich muss gestehen, dass ich auch keine große leuchte in javascript bin. ich denke du musst in diesem teil des quelltexts:
$(document).ready(function() {
$.scrollingParallax('img/background-parallax.png', {
enableHorizontal : true,
bgWidth : '250%',
bgHeight : '100%',
bgRepeat : true,
staticSpeedX : .2,
});
});
das hier einfügen:
z-index : '-1',
irgendwie muss es so gehen, sicher bin ich mir aber nicht;)
wenn du per firebug den z-index negativ setzt, dann ist das png im hintergrund.
liebe grüße
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Mo 14.11.2011 20:36
Titel
|
|
|
Hallo,
wenn ich das so in den Code setze, dann fehlt der Hintergrund komplett und Dreamweaver sagt mir, dass ein Syntaxfehler vorläge:
| Code: | <script type="text/javascript">
$(document).ready(function() {
$.scrollingParallax('img/background-parallax.png', {
enableHorizontal : true,
bgWidth : '250%',
bgHeight : '100%',
bgRepeat : true,
staticSpeedX : .2,
z-index : '-1',
});
});
</script> |
Wenn ich es via Firebug einsetze funktioniert der Hintergrund zwar noch, aber befindet sich nach wie vor im Vordergrund!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Unterschiedliche Darstellung bei ie und ff
Unterschiedliche Darstellung im FF & I.E. ?
[PS] Unterschiedliche Werkzeuge in RGB und CMYK.
CSS - unterschiedliche Darstellung der Schrift
Unterschiedliche Darstellung im IE und Firefox!
Unterschiedliche Kantenglättung der Schrift im Web / PS
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
