Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag05.02.2012 um 12:10 (UTC)    
Titel: 3D-Effekt beim Scrollen

Hi Leute,

mir ist ein toller Effekt auf http://www.xperiastudio.com/ aufgefallen. Wenn man nach unten scrollt, bewegt sich auch die Hintergrundgrafik unten, allerdings nicht so schnell wie der content und der ganze vordere Bereich. So entsteht ein 3D Effekt. Ist so etwas im HPBK auch möglich?

Würde mich über jede Antwort freuen,

mfG stopfermaxi
Beitrag05.02.2012 um 12:33 (UTC)    
Titel:

Ja klar, so etwas kannst du dir mit JavaScript zusammenbauen.
Folgende Funktion ist dabei ganz hilfreich: http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag05.02.2012 um 13:06 (UTC)    
Titel:

Danke für den Link!
Allerdings weis ich nicht ganz, was ich damit anfangen soll, ich arbeite bloß hobbymäßig mit javascript, ohne die Sprache je professionell erlernt zu haben Very Happy Kann man diesen Code etwa so umschreiben, dass das Hintergrundbild langsamer scrollt, als der content?
Beitrag06.02.2012 um 00:16 (UTC)    
Titel:

Hallo,

du brauchst das nicht umschreiben, du kannst es aber nutzen um dir die entsprechende Funktion zu programmieren. Alleine mit dieser Methode kommst du aber auch nicht weit.

Ich glaube nicht, dass du dir es selbst erstellen möchtest. Deshalb verschiebe ich mal nach ich suche, vielleicht macht es dir jemand.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag06.02.2012 um 17:18 (UTC)    
Titel:

Code:
<script language="JavaScript">
<!--
document.body.style.backgroundImage = 'url(HIER_DIE_URL_ZUM_BILD)';
window.onscroll = function ()
{
    document.body.style.backgroundPosition = "0px "+window.pageYOffset/2+"px";
}
//-->
</script>

HIER_DIE_URL_ZUM_BILD durch deine Bild-URL ersetzen, oder falls deine Homepage ein Hintergrundbild hat, welches für den body-Tag gilt, einfach die Zeile entfernen.

Wenn man den Scrollbalken langsam zieht, sieht der Effekt recht flüssig aus, nutzt man aber das Scrollroad, so wird es schnell sehr eckig. Zumindest ist das bei mir der Fall. Wenn man es also wirklich flüssig haben will würde ich den Hintergrund unabhängig vom Scrollen verschieben. Also so, dass der Hintergrund Zeit hat, zur aktuellen Scrollposition nachzurutschen, um so das Zittern abzufangen.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 06.02.2012, 18:55, insgesamt 2-mal bearbeitet
Beitrag06.02.2012 um 18:54 (UTC)    
Titel:

Also auf jeden Fall erst einmal vielen Dank für die Mühe mit dem Skripten Very Happy Aber leider ist es eben ziemlich rucklig Sad Auf der Xperia-Seite muss also wohl ein etwas anderes Mittel eingesetzt worden sein. Kennt das vielleicht jemand?
Beitrag06.02.2012 um 22:22 (UTC)    
Titel:

Also ich bin ja auch nur hobby-Baster was JavaScript angeht, aber du hättest dich ruhig auch mal einlesen können. Von nichts kommt nichts. Wink

Die von mir angesprochene zweite Variante ist schon etwas aufwendiger. Sie entfernt sich zwar etwas von dem 3D-Effekt, da der Hintergrund nicht mehr exakt identisch mitfährt (zeitlich) sondern leicht versetzt, dafür wird das ganze viel weicher.

Code:
<script language="JavaScript">
<!--
document.body.style.backgroundImage = 'url(HIER_DIE_URL_ZUM_BILD)';
var speed = 10;

var destination_global = 0;
var backgroundPosition = 0;
window.onscroll = function ()
{
    destination_global = window.pageYOffset/2;
    setTimeout("scroll_smoth("+window.pageYOffset/2+")",5);
}
function scroll_smoth(destination)
{   
   if(destination_global==destination && backgroundPosition!=destination)
   {
      if (backgroundPosition-destination>10)
      {
         setScrollPosition(backgroundPosition-speed);
      }
      else if (backgroundPosition>destination)
      {
         setScrollPosition(backgroundPosition-1);
      }
      if (destination-backgroundPosition>10)
      {
         setScrollPosition(backgroundPosition+speed);
      }
      else if (backgroundPosition<destination)
      {
         setScrollPosition(backgroundPosition+1);
      }
      setTimeout("scroll_smoth("+destination+")",5);
   }
}
function setScrollPosition(pixel)
{
   backgroundPosition = pixel;
   document.body.style.backgroundPosition = "0px "+pixel+"px";
}
//-->
</script>

Hier musst du ebenfalls HIER_DIE_URL_ZUM_BILD wieder durch deine Bild-URL ersetzen.

Mit dem Standartwert von 10 bewegt sich das Hintergrundbild mit maximal 10px pro 5ms. Das ist noc recht schnell und wirkt daher auch noch etwas eckig. Wenn du den wert beispielsweise auf 3 reduzierst, dann hat der Besucher zwar schon fertig gescrollt, währen das Hintergrundbild noch aufhohlt, dafür ist das ganze viel weicher unterwegs. Ich finde nicht, dass das dem "3D-Effekt" schadet.
Bearbeiten müsstest du dazu die Zeile: var speed = 10;
Einen höheren Wert als 10 brauchst du nicht versuchen, denn dann kannst du auch gleich wieder das ganz kurze Script verwenden. (Zudem würde das Script in eine endlose Schleife geraten, wenn du nicht auch noch die IF-Bedingungen anpasst.) Alles unter 10 kannst du selbst ausloten, wie es dir gefällt.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag07.02.2012 um 14:19 (UTC)    
Titel:

Vielen Dank, freefunstuff Very Happy Hättest dir doch nicht so einen Aufwand zumuten müssen Wink
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de