mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:04 Benutzername: Passwort: Auto-Login

Thema: Objekte bewegen sich mit jedem Klick - ohne Flash vom 03.08.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Objekte bewegen sich mit jedem Klick - ohne Flash
Autor Nachricht
AR_Wocom
Threadersteller

Dabei seit: 03.08.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 03.08.2011 12:17
Titel

Objekte bewegen sich mit jedem Klick - ohne Flash

Antworten mit Zitat Zum Seitenanfang

Hallo Community,

wie im ersten Thread schon erwähnt habe ich zwei Probleme. Hier ist also Nummero 2:

Ich habe ein Layout bekommen und soll das nun umsetzen. Generell kein Problem - abgesehen davon dass ich PRINT bin und NONprint nur selber irgendwie angeeignet habe. Ich stecke also nicht so tief drinnen um wirklich alles zu können.

Jetzt sieht das Layout, welche ich mal als grobe Grafik anhänge, eine Aktion vor. Wenn ich klicke, dann sollen zwei Wörter, die im Head neben dem Logo stehen, sich permanent näher zum Logo hin bewegen. Das ganze geht nur vorwärts, es ist nicht vorgesehen dass die Wörter einmal vom Logo wegwandern. Das ganze soll den Weg zur Lösung, also dem Kunden darstellen. Fragt nicht, das habe ich mir nicht ausgedacht *zwinker*

Im Flash hätte ich das noch mit einem Zähler hinbekommen, aber wie mache ich das ohne Flash? Auch hier wäre ich wieder sehr dankbar für jeden Denkanstoß den ihr so habt. Gibt es da vielleicht auch eine Art zähler die ich einbauen kann?

Vielen lieben Dank!

Und hier die Grafik

  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Mi 03.08.2011 16:25
Titel

Antworten mit Zitat Zum Seitenanfang

Mit einem Klick auf was? das Logo? Naja ist ja auch ehr zweitrangig.

Du könntest das ganze zb mit Hilfe von jQuery machen. Als erstes setzt du ein click Event auf den entsprechenden Selector.. Dann animierst du jeweils die 2 Wörter mit Hilfe von animate.

Am besten setzt du die Wörter absolut innerhalb deines Header Bereiches und animierst dann nur die left/right Werte entsprechend.

Einfach fragen, wenn du mehr Hilfe brauchst.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
AR_Wocom
Threadersteller

Dabei seit: 03.08.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 04.08.2011 08:35
Titel

Antworten mit Zitat Zum Seitenanfang

choise hat geschrieben:
Mit einem Klick auf was? das Logo? Naja ist ja auch ehr zweitrangig.

Du könntest das ganze zb mit Hilfe von jQuery machen. Als erstes setzt du ein click Event auf den entsprechenden Selector.. Dann animierst du jeweils die 2 Wörter mit Hilfe von animate.

Am besten setzt du die Wörter absolut innerhalb deines Header Bereiches und animierst dann nur die left/right Werte entsprechend.

Einfach fragen, wenn du mehr Hilfe brauchst.


Ja, das Logo *zwinker* Das eine Wort wandert also nach links, das andere nach rechts. Und der Grafiker der froh ist eine normale HTML-Seite zu erstellen oder minimal was mit Flash kann soll's richten. Okay, andere Geschichte.

Der Clickevent ist allerdings die ganze Seite. Geht das so einfach? Finde das Konzept eh etwas albern, aber wenn man meint die sollen sich bei jedem Klick bewegen, dann werde ich da erstmal noch nicht gegenschwimmen.

Danke aber schon mal für die bisherigen Infos, ich lese mich da mal ein Grins
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Do 04.08.2011 20:59
Titel

Antworten mit Zitat Zum Seitenanfang

na wollen wir mal nich so sein: http://jsfiddle.net/AUmCw/2/

Code:

<div id="header">
    <span id="text_left">Hallo</span>
    <div id="logo">My Company</div>
    <span id="text_right">Welt</span>
</div>

<div id="content">
    some sample content
    some sample content
    some sample content
    some sample content
    some sample content
    some sample content
</div>


Code:

#header { position: relative; }
#logo {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

#text_left, #text_right {
    position: absolute;
    left: 10px;
    top: 18px;
}

#text_right {
    left: auto;
    right: 10px;
}

#header, #content {
    width: 300px;
    background-color: #CCC;
    margin: 0 auto 15px;
    padding: 15px 20px;
}


Code:

$(function() {
   
    var clicked = false;
    $('body').click(function(){
        if(clicked) return;
        clicked = true;
        var $left = $('#text_left');
        var $right = $('#text_right');
        $left.animate({left: '70px'}, 500);
        $right.animate({right: '70px'}, 500);
    });
   
});


Zuletzt bearbeitet von choise am Do 04.08.2011 21:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
AR_Wocom
Threadersteller

Dabei seit: 03.08.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 05.08.2011 11:31
Titel

Antworten mit Zitat Zum Seitenanfang

Domo Arigato! Wird schnellstmöglich getestet Grins
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Sa 06.08.2011 13:40
Titel

Antworten mit Zitat Zum Seitenanfang

jquery einbinden nicht vergessen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Flash MX: Movieclip mit Maus bewegen
FLASH text an pfad entlang bewegen
[flash] movieclip mittels tween-klasse bewegen
Flash Grafik per Mouseover nach links oder rechts bewegen
Flash 8 - Wechselbanner per Klick.
[Solved] // [Flash/AS] Klick auf Bühne
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.