Du bist hier: Seitenreport    Forum    Web-Entwicklung    Webdesign    Wie wird das gemacht?

Wie wird das gemacht?

Verfasst am: 12. 12. 2009 [00:13]
lwulfe
Dabei seit: 02.10.2009
Themenersteller

807 Beiträge
Beitrag hilfreich?

Hallo,

auf der Seite
http://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


 
Verfasst am: 12. 12. 2009 [00:27]
Raptor
Dabei seit: 10.05.2009

1159 Beiträge
Beitrag hilfreich?

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)?

 
Verfasst am: 12. 12. 2009 [00:33]
lwulfe
Dabei seit: 02.10.2009
Themenersteller

807 Beiträge
Beitrag hilfreich?

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! wink.gif

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 12.12.2009 um 00:45.]

 
Verfasst am: 12. 12. 2009 [00:46]
gerard
Dabei seit: 12.05.2009

1276 Beiträge
Beitrag hilfreich?

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

 
Verfasst am: 12. 12. 2009 [00:52]
seitenreport
Dabei seit: 28.03.2009

Matthias Gläßner
Premium-Mitglied

1792 Beiträge
Beitrag hilfreich?

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? icon_wink.gif


TYPO3 Freelancer | Gründer und Betreiber von Seitenreport
TYPO3 Anfragen: info@matthias-glaessner.de | XING-Profil
 
Verfasst am: 12. 12. 2009 [01:05]
gerard
Dabei seit: 12.05.2009

1276 Beiträge
Beitrag hilfreich?

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? icon_wink.gif

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

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 12.12.2009 um 01:08.]

 
Verfasst am: 12. 12. 2009 [01:58]
seitenreport
Dabei seit: 28.03.2009

Matthias Gläßner
Premium-Mitglied

1792 Beiträge
Beitrag hilfreich?

Dann stand ich auf dem Schlauch. Danke. icon_wink.gif

Die Animation links funktioniert bei mir auch.

Ich habe da mal schnell etwas vergleichbares realisiert:

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

Code (frei verwendbar):

PHP
<div id="box" style="background:#008800;position:absolute;display:none"></div>
 
<script type="text/javascript">
// ===========================
// (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>


TYPO3 Freelancer | Gründer und Betreiber von Seitenreport
TYPO3 Anfragen: info@matthias-glaessner.de | XING-Profil
 
Verfasst am: 12. 12. 2009 [10:04]
der_booker
Dabei seit: 11.06.2009

2887 Beiträge
Beitrag hilfreich?

seitenreport schrieb:

Dann stand ich auf dem Schlauch. Danke. icon_wink.gif

Die Animation links funktioniert bei mir auch.

Ich habe da mal schnell etwas vergleichbares realisiert:

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

Code (frei verwendbar):

PHP
<div id="box" style="background:#008800;position:absolute;display:none"></div>
 
<script type="text/javascript">
// ===========================
// (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 & webdesign
http://www.phw-jendreck.de
http://www.seo-labor.com
 
Verfasst am: 12. 12. 2009 [10:06]
der_booker
Dabei seit: 11.06.2009

2887 Beiträge
Beitrag hilfreich?

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

Heiko Jendreck
personal helpdesk & webdesign
http://www.phw-jendreck.de
http://www.seo-labor.com
 
Verfasst am: 12. 12. 2009 [11:14]
lwulfe
Dabei seit: 02.10.2009
Themenersteller

807 Beiträge
Beitrag hilfreich?

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!

 




Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:



9 Mitglieder waren innerhalb der letzten 15 Minuten online (279 heute gesamt):
Athanassios, ComZuRueb, Deep_Thought, HundeschuleFlöchen, kermit767, sasmedia, Thpbedarf, x-f, xart

Administratoren und Moderatoren:
[keine]

Seitenreport hat 18159 registrierte Mitglieder, 3005 Themen und 29116 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 13 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 7 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Partnerprogramm

12% Lifetime Provision auf alle Buchungen von Dir geworbener Mitglieder sowie 0,50 € für jede Registrierung. Eines der besten deutschen Partnerprogramme laut den appCharts von 100partnerprogramme.de. Nimm jetzt teil am Seitenreport Partnerprogramm und verdiene gutes Geld dabei!

* = Partnerlinks