[Flash/AS] Wörter im Kreis drehen lassen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von big-show, 9. Juni 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 9. Juni 2009
    Wörter im Kreis drehen lassen

    Moin!
    Also, vielleicht is der titel n bissl blöd, aber ich weiß nicht, wie ich es sonst beschreiben sollte ^^

    folgendes:
    ich möchte auf einer internetseite etwas in flash(vllt auch ajax/jquery) einbauen, dass sich oben im header logos/text etc im kreis dreht. als beispiel -> Uhren und Schmuck Online von Thomas Sabo bis Tissot (oben rechts im header)

    die hinteren objekte sollen sich auch wie im beispiele hinten ausblenden...
    ich denke mal sowas sollte nich allzu schwierig sein, oder?!

    demjenigen, der mir hilfe dazu leisten kann, wäre ich mit großem dank verbunden

    mfg
     
  2. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    sorry, aber damit bist du wohl bei sogut wie jedem echten javascript-programmierer unten durch xD

    spaß bei seite...
    wenn mir jemand ne formel dafür gibt (diese dann ggf. auch ein wenig erklärt) würd ich das gerne mal mit js probieren
     
  3. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    Hat ein Kumpel von mir gemacht, ne komplette 3D-Engine in JS geschrieben, ich schau mal, ob ich die bekommen kann.
     
  4. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    @murdoc: tut mir leid

    @av-p: das wär super, vielen dank!
     
  5. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    naja, 3D engine wär a weng übertrieben (wird für das auch nicht benötigt) und läuft auch nur in html5 browsern bzw wenigstens canvas-unterstützung
     
  6. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    Wie sieht es denn damit aus?
    Klick

    Speed und andere sachen natürlich einstellbar. Das ganze ist mit Mootools gelöst.

    Wenns dir gefällt. Siehe hier Klick
     
  7. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    das is schon mal sehr sehr gute, danke.. das einzige, was jetzt noch fehlen würde ist, dass die hinteren objekte (ca ab der oberen hälfte) ins unsichtbare verlaufen würden... ich kenn mich mit javascript etc leider nur beschränkt aus, deshalb hab ich kp, wie man das umsetzen könnte.
     
  8. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen


    Klaro denk ich schon, dass man sagen kann verringere ab Position X die opacity (Deckkraft) und vergrößere bis auf max. 100% die Deckkraft wieder ab position X.


    Hab mir das ganze mal gerade angeschaut. Ist ja echt übersichtlich. Die Position kann man in der funktion startCarousel() abfragen und ggf dann mit verringern/vergrößern der Deckkraft handeln.


    Den onmouseover Part kann man auch rausnehmen, wenn du das nicht willst.
     
  9. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    Jop, den mouseover-teil hab ich schon entfernt... die funktion is auch relativ leicht zu verstehen, nur weiß ich leider nicht, wie man die deckraft erhöht bzw. verringert, sprich welcher Befehl?!

    kannst du das?
     
  10. 9. Juni 2009
    AW: Wörter im Kreis drehen lassen

    Also die Deckkraft ist relativ simpel. Die drei Befehle decken opera, ie und firefox ab.

    Code:
     testObj=document.getElementById('deinElement');
     value=100;
    
     testObj.style.opacity = value/10;
     testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
     testObj.style.MozOpacity =value/10;
    
    
    Value: 100= Volle Deckkraft
    50= Halbe Deckkraft
    und so weiter.



    Mhh wobei wie ich gerade sehe. Ich glaub das ist doch was komplizierter.
    Man müsste jedem Bild eine eindeutige ID geben und diese später ermitteln wenn das Bild "hinten" ist um die Deckkraft zu verändern. Sonst wendet man das ja auf den gesamten Kontainer an.

    Hab momentan leider nicht so viel Zeit. Ich überleg mir da aber noch was, wenn ich Zeit hab und es nicht jemand anders Vorher gelöst hat oder was anderes für dich gefundeh hat.



    EDIT://

    Okay ich hab dir hier mal schnell ein Beispiel ohne Deckkraft sondern mit einfachem Verschwinden gebasteln. Vllt reicht dir das ja schon?!


    Code:
    var count = 0; 
    var baseSpeed = 0.05; 
    var radiusX = 190; 
    var radiusY = 40; 
    var centerX = 300; 
    var centerY = 190;
    var speed = 0.3;
    var imageDivs = '';
    var numberOfElements = 0;
    var carousel = '';
    var speedTest = '';
    
    
    window.addEvent('domready', function(){
     
     carousel = $('carousel');
     speedTest = $('speedTest');
    
     imageDivs = carousel.getElementsByTagName("div"); 
     numberOfElements = imageDivs.length; 
     
     setInterval('startCarousel()',40);
     
    });
    
    
    
    function startCarousel(){
     
     for(i=0; i < numberOfElements; i++){
     
     angle = i * ( Math.PI * 2 ) / numberOfElements;
     
     imageDivsStyle = imageDivs[ i ].style; 
     imageDivsStyle.position='absolute'; 
     
     
     
     posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
     posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
     
     
     if(posX > 485){
     imageDivs[i].style.display='none';
     }else if(posX < 145){
     imageDivs[i].style.display='inline';
     }
     
     
     imageDivsStyle.left = posX+"px"; 
     imageDivsStyle.top = posY+"px"
     
     imageDivWidth = posY/3;
     imageDivZIndex = Math.round(imageDivWidth)+100;
     
     imageDivsStyle.width = imageDivWidth+'px';
     imageDivsStyle.zIndex = imageDivZIndex;
     
     angle += speed;
     
     }
     
     count++
    }

    Achja noch was..Wenn du das ganze lieber linksherrum hättest, musst du einfach aus dem count++ ein count-- machen.
     
  11. 17. Juni 2009
    AW: Wörter im Kreis drehen lassen

    habe mir das script grade kopiert, aber er zeigt von anfang an alle an, kann man das noch machen das er nur 3 anzeigen und wenn sie links reinlaufen wieder einer mehr und einer weniger angezeigt wird
     
  12. 17. Juni 2009
    AW: Wörter im Kreis drehen lassen

    ich hab das ganze jetzt selbst in flash programmiert

    danke an alle
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.