lwulfe
Avatar lwulfe
Themenersteller
Consultant
Content Halbgott (743 Beiträge)

Wie wird das gemacht?

am 12.12.2009, 00:13 Uhr eröffnete lwulfe folgenden Thread
Webdesign    3002 mal gelesen    10 Antwort(en).

Hallo,

auf der Seite

www.european-job-center.com


habe ich so einen tollen Twitter-Vogel gesehen.

Weiß jemand, wie sich sich so etwas realisieren lässt?
Auch, dass der Vogel die Position beim Scrollen bei behält.

Gruß Lutz


Raptor
Avatar Raptor
IT-Student
Content Gott (1013 Beiträge)
am 12.12.2009, 00:27 Uhr schrieb Raptor

Das mit dem Position halten ist einfaches CSS:
{ position: fixed; right: 0; top: 0; }

Du hast "auch" geschrieben.. Was ist das zweite (bzw. das erste)?


Meine Developer-Website mit den Web-Entwickler-Tools.
Meine Web-Entwicklungs-Dienstleistungen

[url="http://www.seitenreport.de/forum/beitraege/seitenreport_verlosungen/wichtig_neue_regel

lwulfe
Avatar lwulfe
Consultant
Content Halbgott (743 Beiträge)
am 12.12.2009, 00:33 Uhr schrieb lwulfe

Mit "auch" habe ich die Position gemeint.
Ist allerdings meine Typo3-Denke, die die fixe Position für mich eher schwierig macht.

Diesen Vogel so nett animiert darzustellen hätte mich noch interessiert.
OK, dumme Frage, vergiss sie einfach!


gerard
Content Gott (1271 Beiträge)
am 12.12.2009, 00:46 Uhr schrieb gerard

lwulfe schrieb:

Mit "auch" habe ich die Position gemeint.
Diesen Vogel so nett animiert darzustellen hätte mich noch interessiert.


Javascript, dass je nach Mausaktion das Bild wechselt und anderes macht. Gibt es fertig im Netz. Du kannst es auch aus dem Quelltext analysieren.

Gérard


http://bretagne-virtuell.de

seitenreport
Avatar seitenreport
Inhaber
TYPO3 Senior Developer
Content Gott (1772 Beiträge)
am 12.12.2009, 00:52 Uhr schrieb seitenreport

gerard schrieb:

lwulfe schrieb:

Mit "auch" habe ich die Position gemeint.
Diesen Vogel so nett animiert darzustellen hätte mich noch interessiert.


Javascript, dass je nach Mausaktion das Bild wechselt und anderes macht. Gibt es fertig im Netz. Du kannst es auch aus dem Quelltext analysieren.

Gérard


Das Skript hat allerdings offenbar einen Bug. Bei mir bewegt sich der Vogel nicht. (FF 3.5.5 / Ubuntu 9.10). Im Konqueror auch nicht. Ihr meint doch den Twitter-Vogel rechts oben, oder stehe ich auf dem Schlauch und ihr meint etwas anderes? :wink:


SEO Analyse und Website-Check mit Seitenreport

gerard
Content Gott (1271 Beiträge)
am 12.12.2009, 01:05 Uhr schrieb gerard

seitenreport schrieb:

Das Skript hat allerdings offenbar einen Bug. Bei mir bewegt sich der Vogel nicht. (FF 3.5.5 / Ubuntu 9.10). Im Konqueror auch nicht. Ihr meint doch den Twitter-Vogel rechts oben, oder stehe ich auf dem Schlauch und ihr meint etwas anderes? :wink:


Ich dachte, es geht um den "Button" links, der stehen bleibt, wenn man scrollt.
Der Vogel rechts oben bleibt natürlich auch stehen (gleich Lösung wie schon gesagt), aber da gibt es kein Script - ist nur ein einfacher Link.

Gérard


http://bretagne-virtuell.de

seitenreport
Avatar seitenreport
Inhaber
TYPO3 Senior Developer
Content Gott (1772 Beiträge)
am 12.12.2009, 01:58 Uhr schrieb seitenreport

Dann stand ich auf dem Schlauch. Danke. :wink:

Die Animation links funktioniert bei mir auch.

Ich habe da mal schnell etwas vergleichbares realisiert:

In Aktion: www.seitenreport.de/ani.html



Code (frei verwendbar):




<script>
// ===========================
// (C) 2009 Matthias Glaessner
// ===========================

var v = 1; // speed
var maxpos = 100; // Max scrolling Pos X
var btop = 200; // BOX Position Y
var bheight = 160; // BOX Height
var isRUNNING = 0; // Running and direction
var tm; // Timeout

function create() {
var b = document.getElementById("box").style;
b.left = -maxpos + "px";
b.width = (maxpos+v) + "px";
b.top = btop + "px";
b.height = bheight + "px";
b.display = "block";
}

function mm(e) {
e = e || window.event;

if (e.pageX <= maxpos) { if (isRUNNING!=1) {isRUNNING=1; animate(); } }
else { if (isRUNNING!=-1) {isRUNNING=-1; animate(); } }
}

function animate() {
var cx = parseInt(document.getElementById("box").style.left) + v * isRUNNING;
if (cx<=0 && cx>=-maxpos) {
document.getElementById("box").style.left = cx + "px";
tm = window.setTimeout("animate()",10);
} else {
window.clearTimeout(tm);
isRUNNING = 0;
}
}

create();
document.onmousemove = mm;
</script>


SEO Analyse und Website-Check mit Seitenreport

der_booker
Foren Moderator
selbständig
(2762 Beiträge)
am 12.12.2009, 10:04 Uhr schrieb der_booker

seitenreport schrieb:

Dann stand ich auf dem Schlauch. Danke. :wink:

Die Animation links funktioniert bei mir auch.

Ich habe da mal schnell etwas vergleichbares realisiert:

In Aktion: www.seitenreport.de/ani.html



Code (frei verwendbar):




<script>
// ===========================
// (C) 2009 Matthias Glaessner
// ===========================

var v = 1; // speed
var maxpos = 100; // Max scrolling Pos X
var btop = 200; // BOX Position Y
var bheight = 160; // BOX Height
var isRUNNING = 0; // Running and direction
var tm; // Timeout

function create() {
var b = document.getElementById("box").style;
b.left = -maxpos + "px";
b.width = (maxpos+v) + "px";
b.top = btop + "px";
b.height = bheight + "px";
b.display = "block";
}

function mm(e) {
e = e || window.event;

if (e.pageX <= maxpos) { if (isRUNNING!=1) {isRUNNING=1; animate(); } }
else { if (isRUNNING!=-1) {isRUNNING=-1; animate(); } }
}

function animate() {
var cx = parseInt(document.getElementById("box").style.left) + v * isRUNNING;
if (cx<=0 && cx>=-maxpos) {
document.getElementById("box").style.left = cx + "px";
tm = window.setTimeout("animate()",10);
} else {
window.clearTimeout(tm);
isRUNNING = 0;
}
}

create();
document.onmousemove = mm;
</script>




Schönes Script, ich dacht aber auch, dass sich der Vogel bewegt. So hatte ich Lutz zumindest verstanden.


Heiko Jendreck
personal helpdesk
http://www.phw-jendreck.de
http://www.seo-labor.com

der_booker
Foren Moderator
selbständig
(2762 Beiträge)
am 12.12.2009, 10:06 Uhr schrieb der_booker

Nachtrag zum Script von Matthias. Das funktioniert aber nicht mit dem IE.
FF funktioniert, ebenso der Safari


Heiko Jendreck
personal helpdesk
http://www.phw-jendreck.de
http://www.seo-labor.com

lwulfe
Avatar lwulfe
Consultant
Content Halbgott (743 Beiträge)
am 12.12.2009, 11:14 Uhr schrieb lwulfe

Moin!

Ich bin wohl der, der auf dem Schlauch steht.
Der Vogel ist natürlich nicht animiert. Hatte schräg auf ein anderes Notebook gesehen,
da erschien das so ...
Obwohl eine Animation das Tüpfelchen auf dem i wäre!

Vielen Dank für eure Antworten!


der_booker
Foren Moderator
selbständig
(2762 Beiträge)
am 12.12.2009, 14:00 Uhr schrieb der_booker

lwulfe schrieb:

Moin!

Ich bin wohl der, der auf dem Schlauch steht.
Der Vogel ist natürlich nicht animiert. Hatte schräg auf ein anderes Notebook gesehen,
da erschien das so ...
Obwohl eine Animation das Tüpfelchen auf dem i wäre!

Vielen Dank für eure Antworten!



Hehe, dachte ich es mir doch. Mit einem *.gif, könnte man das allerding rasch hinbekommen.


Heiko Jendreck
personal helpdesk
http://www.phw-jendreck.de
http://www.seo-labor.com

  • 1


« zurück zu: Webdesign

Das Seitenreport Forum hat aktuell 5276 Themen und 36111 Beiträge.
Insgesamt sind 48364 Mitglieder registriert.