ilch Forum » Allgemein » HTML, PHP, SQL,... » Wie geht so was? CSS?

Geschlossen
  1. #1
    User Pic
    sybele Mitglied
    Registriert seit
    29.05.2018
    Beitrge
    4
    Beitragswertungen
    0 Beitragspunkte
    Hey zusammen,
    ich versuche jetzt schon seit Tagen so eine animierte Grafik auf meiner Seite einzubinden und bekomme es nicht hin. Funktioniert das mit CSS? Oder ist das schon HTML5? Das Beispiel findet ihr hier (www.netgenerator.de/de/referenzen-kunden-und-projekte/webdesign-portfolio.html -> dort auf die Grafik "Mehr erfahren" mit der Maus fahren). Wie mache ich so etwas?
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Phoenix1303 Mitglied
    Registriert seit
    04.06.2011
    Beitrge
    119
    Beitragswertungen
    11 Beitragspunkte
    Mahlzeit.

    Ich will mich jetzt nicht 100%-ig festlegen, ob für mich sieht das nach einer Lösung via Javascript aus.
    Auch imm Seitenquelltext wird auf eine JS-File verwiesen, wobei ich nicht sagen kann, ob die für die mitscrollende Vorschau rechts daneben, das kurze Aufspringen des Infotextes oder beides gleichermaßen gültig ist.

    Gruß Manu
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Slipi Mitglied
    Registriert seit
    19.01.2018
    Beitrge
    187
    Beitragswertungen
    13 Beitragspunkte
    Wenn die Grafik, Hover effekt, nur größer werden soll anstatt Größer und kleiner, reicht CSS.

    Bei dein Anliegen denke ich das es mit JS gemacht wird.
    Header,Banner,Playersheets, Layouts uvm. www.sd-sdesign.at
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    260
    Beitragswertungen
    33 Beitragspunkte
    Und wenn man scih die mühe macht und mal im quelltext nachsieht,dann stellt sich eindeutig CSS raus zwinker

    @keyframes pop{
    	50%{transform:scale(1.2)}
    	100%{transform:scale(1)}
    }
    
    .pop:hover,.submit:hover{
    animation-name:pop;
    animation-duration:0.3s;
    animation-timing-function:linear;
    animation-iteration-count:1
    }


    Hier kannst dir auch gerne mal ein paar beipiele ansehen , was so alles mit css animationen möglich ist.
    cssanimation.rocks/

    Manches ist schon fast hardcore, aber man bekommt mal eine shöne übersicht und vll die ein oder andere Idee
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Slipi Mitglied
    Registriert seit
    19.01.2018
    Beitrge
    187
    Beitragswertungen
    13 Beitragspunkte
    Auf meiner Seite, sind die 4 Menü Punkte rein CSS und HTML.
    Mit CSS ist einiges möglich, nur müsste man auch die Index anpassen.

    LG
    Header,Banner,Playersheets, Layouts uvm. www.sd-sdesign.at
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beitrge
    260
    Beitragswertungen
    33 Beitragspunkte
    ZitatZitat geschrieben von Slipi
    Auf meiner Seite, sind die 4 Menü Punkte rein CSS und HTML.
    Mit CSS ist einiges möglich, nur müsste man auch die Index anpassen.

    LG



    Für ne einfache Scale transition, so wie es oben angefragt ist brauchst du nur ein element, welches ja eh schon vorhanden ist. Selbst für den Pfeil nach unten bräucht ich die index nicht anfassen. Man muß sich halt nur mit CSS beschäftigen und das richtig verstehen.

    Du könntest dir auf deiner Seite auch fast die Hälfte deiner Div Container sparen, wenn alles richtig formatiert wäre. Zudem solltest du in Zeiten von html5 mal deine Symantic überarbeiten und auf inline- css und -Js verzichten. Als weiteren Tip für deine Icons würde sich eine Icon font auch besser eignen als alles einzelne Images, stichwort Skalierbarkeit und ladegeschwindigkeiten.

    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Slipi Mitglied
    Registriert seit
    19.01.2018
    Beitrge
    187
    Beitragswertungen
    13 Beitragspunkte
    Für seinen Fahl ( Pfeil) reicht die CSS. Für manche Animationen, müsste man auch die Index bearbeiten.Bin vom alten Schlag.

    LG
    Header,Banner,Playersheets, Layouts uvm. www.sd-sdesign.at
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurck zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten