Beiträge von ButterKnecht

  • Background linear gradiant

    Ja ich weiß. Ist noch super Chaotisch. Bin noch viel am experimentieren.

  • Kleine Animation mit mehreren Bildern

    Zitat von Sempervivum

    Da gibt es recht viele Möglichkeiten, wie man so etwas realisieren kann. Ein Beispiel:

    Die Bilder nebeneinander in einem Container anordnen und durch overflow: hidden; dafür sorgen, dass immer nur das erste sichtbar ist.

    Eine Funktion zyklisch aufrufen, entweder durch setInterval oder requestAnimationFrame.

    In dieser Funktion das letzte Bild nehmen und an den Anfang stellen.

    Irgendwie kriege ich das nicht gebacken. Hast du ein Beispiel parat.

  • Background linear gradiant

    Hi,


    Ich mal wieder :)


    Ich habe folgendes Problem.

    Ich in meiner CSS folgenden Farbeverlauf eingestellt.

    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);


    Das funktioniert ganz gut. Aber sobald ich den Browser kleiner mache und man anfangen muss zu scrollen, fängt der Farbverlauf wieder von vorne an, statt durchgängig zu bleiben.

  • Highscore Anzeige PHP über mySCL connector

    Hi.

    Ich habe folgendes PHP Script geschrieben um auf meine Homepage über mySQL Highscores zu empfangen. Das funktioniert auch soweit ganz gut.

    Nur möchte ich gerne die Ausgabe auf max 10 Einträge beschränken. Dafür würde sich ja DESC LIMIT 10 anbieten. Aber sobald ich das einfüge funktioniert mein Script nicht mehr. Was mache ich falsch?




    <?php

    $conn = new mysqli('localhost', 'root', 'test', 'test');

    if($conn->connect_error){

    die("Error in DB connection: ".$conn->connect_errno." : ".$conn->connect_error);

    }


    $field = $_GET['sort'];

    if($field == ''){

    $field = 'score';

    }


    $ordertype = ($_GET['order'] == 'desc')? 'asc' : 'desc';


    $select = "SELECT * FROM `players` ORDER BY $field $ordertype" DESC

    LIMIT 10 ;

    $result = $conn->query($select);

    if($result->num_rows > 0){

    echo '<table class="tbl-content" >';

    echo '<tr>';


    echo '</a></th>';

    echo '<th>Username ';


    echo '</a></th>';


    echo '<th>Score</th>';



    echo '</a></th>';

    echo '</tr>';

    while($row = $result->fetch_object()){

    echo '<tr>';


    echo '<td>'.$row->username.'</td>';


    echo '<td>'.$row->score.'</td>';

    echo '</tr>';

    }

    echo '</table>';

    }

    ?>

  • Kleine Animation mit mehreren Bildern

    Hi.


    Ich habe auf meiner Seite ein Bild von einem Spiele Automaten. Wenn ich mit der Maus darüber fahre (Hover) möchte ich das mindestens 3 Bilder hintereinander endlos ablaufen(bis die Maus wieder weggeht) so das eine kleine Animation entsteht. Ich weiß das dass ganze auch über GIF möglich ist. Aber da ist mir erstens die Qualität zu gering und ich glaube ein Hover Effekt ist nicht möglich.


    Konkretes Beispiel:

    Im Automaten steht ein Männchen und sobald ich mit der Maus darüber fahre, läuft das Männchen los und stopt sobald die Maus wieder weg ist.

  • Highscore auslesen und ausgeben

    Hallo,


    Ich habe mir folgendes eingebildet aber das ist wohl schwieriger wie ich es mir vorgestellt habe.

    Ich habe ein Spiel in Unity programmiert und dieses ist über WebGL spielbar auf meiner Seite.

    Nun möchte ich gerne die Ingame Hihgscore liste exportieren und diese dann auf meiner Website ausgeben.

    Welches Format wäre am klügsten? In Unity ist fast alles möglich(txt, csv,xml usw.)

    Ist das überhaupt möglich. Ach und ich erwarte nix aufwändiges, also wenn man nur zum Beispiel den 1. platzierten ausgeben könnte, wäre das auch ok. Es sollte einfach sein.

  • Interaktiver Spielautomat

    Zitat von Sempervivum

    OK, dann würde ich auch zu etwas vorgefertigtem raten. Bei Codepen gibt es sicher jede Menge Slider nur mit CSS, z. B dieser:

    https://codepen.io/rokobuljan/pen/XXzqKQ

    Danke. Das entspricht schon mehr was ich suche. Nur verstehe ich nicht ganz, wie er überhaupt die beiden Kreise zum weiterschalten erstellt hat. Und wie ich das hinkriege das die beiden außerhalb der Box sind und nicht innerhalb. Ich hab das ganze schon so weit bearbeitet das es ganz klein ist.

  • Interaktiver Spielautomat

    Zitat von Sempervivum

    Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.

    Vielleicht etwas zum Background. Das ganze ist eine kleine Projektarbeit und es bleibt definitiv bei 3.

  • Interaktiver Spielautomat

    Zitat von Sempervivum

    So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.

    Ist das auch irgendwie ohne die Json möglich?

  • Interaktiver Spielautomat

    Zitat von Sempervivum

    Ach so, verstehe. In dem Fall würde ich etwas vorgefertigtes nehmen, z. B. Swiper:

    https://swiperjs.com/demos

    Hmm ich glaub ich wurde noch immer nicht richtig verstanden :D Sorry, irgendwie schwierig das auf Papier zu bringen.

    Also ich will das gar nicht so kompliziert. Automat.jpg und die Arrows sollen sich gar nicht verändern. Nur das Bild im Automat (Spiel1.jpg, Spiel2.jpg, Spiel3.jpg) und dazu halt der richtige Link der immer auf eine separate Seite geht. Das Bild(und der Link) wird über das klicken auf die Arrows weitergeschaltetIch hoffe nun verständlicher :)

  • Interaktiver Spielautomat

    Zitat von Sempervivum

    Was mich irritiert ist, dass Du schreibst "in Form eines png" und dass ich in dem Bild ein "Spiel1.jpg" sehe. Weder png noch jpg ist interaktiv? Bei WebGL denke ich eher an Canvas?

    Entschuldige. Alles sollen Bilder(ob png oder jpg ist egal) sein. Wenn man auf die klickt, wird man natürlich auf eine andere Seite verklinkt. Also für jedes Spiel eine eigene Seite.

  • Interaktiver Spielautomat

    Hallo,


    Ich habe folgendes vor. Ich möchte einen interaktiven Spielautomaten im Form eines png. Im Bildschirm werden die Spiele (vermutlich 3) über Pfeile weitergeschaltet. Mit Klick auf den Bildschirm springt man dann zum jeweiligen Spiel. Ich habe 3 Spiele in Unity WebGls programmiert. Ich habe hier eine kleine Skizze die das besser erklären sollte. Ich weiß leider nicht wie ich überhaupt mit der html und css anfangen soll.

  • CSS Transition zur anderen Klasse

    Zitat von Sempervivum

    Ein weiches Überblenden kannst Du mit diesem CSS erreichen:

    Vielen Dank. Das hat bestens geklappt :)

  • CSS Transition zur anderen Klasse

    Hallo,


    Ich habe folgende CSS in einem anderem Forum gefunden.

    Index.html

    <nav>

    <li>

    <a class="english">English text here</a>

    <a class="japanese">Japanese text here</a>

    </li>

    </nav>


    Css:

    li .japanese { display: none; }

    li:hover .english {display: none;}

    li:hover .japanese {display: block; }


    Das soll bezwecken das wenn man mit der Maus darüber fährt der Inhalt des Textes sich in einen japanischen Text ändert. Das funktioniert auch soweit.

    Ich möchte aber nun das der Wechsel nun "weich" erfolgt. Also mit einer Transition dazwischen. Das haut aber irgendwie nicht hin. Der Wechsel erfolgt trotzdem wieder "hart"