✔ Bilder Slide-show mit Bilder bewegung wie bei gucci

Status
Nicht offen für weitere Antworten.
S

socke999

Erfahrenes Mitglied
Hallo, ich wollte mal fragen ob einer weißm,
wie man so eine Bilderslide show macht, wo sich dann auch noch das Bild in seinem Fixen Container bewegt ...
Ist ein bisschen schwer zu erklären,
deshalb hier mal einen link wo so etwas gemacht wurde was ich meine:
http://www.gucci.com/de/index2.html

Also, da auf der Gucci seite bewegen sich ja so die "hauptbilder" von links nach rechts oder umgekehrt, nun möchte ich auch so etwas ähnlichen basteln,nur wie?

Kann mir da einer weiter helfen?
ich sehe schon das das mit Javascript Frameworks gemacht worden ist, wie prototype moetools script.aculos.us usw.

nur welche funktionen konnte ich noch nicht herausfinden, da ich mich nicht wirklich so richtig mit den JS Frameworks auskenne....

Vielleicht hat auch da einer eine Idee?
 
versuch´s mal mit "Microsoft Photo Story". es ist freeware, einfach mal googeln

ich hoffe ich konnte dir helfen

greetings

// EDIT

ups, sorry! hätte erstmal zu ende lesen sollen :mad:. hab nach der seitenbesichtigung zu schnell geantwortet.

das tool erstellt videodateien die kamerafahrten über bilder macht, aber fürs web werden die sicher zu groß
 
Als mit den sogenanneten Frameworks kann man ja verschiedene Effekte basteln...

Nur hab ich keine Ahnung wie man so ein Bild anspricht bzw. bewegt ohne das sich der rest verschiebt.

Ein Div box z.b. weiß ich schon wie ich die von A nach B verschieben kann mit einem Effekt- Animation, aber nicht so wie da bei Gucci...

Kann da keiner weiter helfen?
 
Ich hab dies mal mit einem Panorama Bild gemacht also 360 Grad Rundumschau , der Trick ist so simpel wie einfach. Man bindet es als Hintergrundbild ein und verschiebt es einfach über Background Position und fertig.

Code: 
<html>
    <head>
        <style type="text/css">
            .irgendwas {
                background:url(meinbild.jpg);
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                var layer = document.getElementById('irgendwas');
                    layer.style.backgroundPosition = "xposi px yposi px";
            }
        </script>
    </head>
    <body>
        <div class="irgendwas" id="irgendwas">
        </div>
    </body>
</html>

Man bräuchte halt ein Interval , oder eine Funktion die sich Rekursiv aufruft bis die gewünschte Position vorhanden ist.
 
@socke999: Bitte unterlasse hier zukünftig das Pushen eines Threads.

socke999 hat gesagt.:
hat da gar keiner einen Plan?
nicht mal einen Ansatz?
Zum Vergrößern anklicken....
socke999 hat gesagt.:
Niemand?
Nicht einmal einen ANSATZ oder so?
Zum Vergrößern anklicken....
Siehe hierzu den Punkt 12 unserer Netiquette:

Bitte erstelle keine Doppel-/Mehrfach-/Pushpostings. Dazu zählen insbesondere das Erstellen identischer Themen in mehreren unterschiedlichen Unterforen, das mehrfache oder erneute Einstellen eines bereits vorhandenen Themas, und das Posten von Beiträgen, die einzig und allein dem Zweck dienen, das entsprechende Thema in der Themenauflistung wieder weiter oben zu platzieren (sog. „Thread Pushing“). Derartige Beiträge werden restlos gelöscht. Sollte der Eindruck bei unseren Moderatoren entstehen, dass wissentlich gegen diesen Punkt verstoßen wurde, hat dies die unbegrenzte Sperrung des Accounts zur Folge.
Zum Vergrößern anklicken....
 
Entschuldigung, soll nicht wieder vorkommen ...

Vielen Dank,Fips,

ich habs jetzt versucht so zu machen:



HTML: 
<script language="JavaScript" src="js/slider.js"></script>
<div class="slider" id="slider"></div>


slide.js
Code: 
function moverechtsunten(x,y)
{	
	
	var maxx=(965 - 1200); // x Länge bild - x Länge .slider
	var maxy=(500-900); // y Länge bild - y Länge .slider
	
	var slider = document.getElementById('slider');
	x--;
	y--;
	alert("hier " + x+" "+y);
	if (x>maxx && y>maxy)
	{	
		slider.style.background-position = x+"px "+y+"px";	
		window.setTimeout("moverechtsunten("+x+","+y+")",200);
	}
	
}


window.onload=moverechtsunten(0,0);

Jedoch ist ein etwas kompischer Fehler mit document.getElementById('slider');
var slider = document.getElementById('slider');

die variabel slider ist immer null und ich habe keine Ahnung wieso ....
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück