Glitzer über den Karten

Thema wurde von semmelweis, 26. Juni 2022 erstellt.

  1. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    38
    Allen Bildern(soweit ich gesehen hab), bei denen der Effekt in der Detailansicht nicht funktioniert, fehlt das (Foil) im alt-Attribut.

    z.b https://www.tappzeit.de/de/Wild-Growth.html
    oder https://www.tappzeit.de/de/Herald-of-Leshrac.html
     
  2. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    930
    Danke erhalten:
    801
    Danke vergeben:
    300
    Nicht ganz sicher, aber ich meine, dass Gambio in den Übersichtsseiten den Artikelnamen als Alt-Attributswert nimmt. Und der scheint bei den gewünschten Artikeln immer auf "(Foil)" zu enden.

    In der Artikeldetailseite nimmt Gambio den für das Bild hinterlegten Alt-Attributswert und der wiederum enthält wohl kein "(Foil)".

    Ja, genau das ;)
     
  3. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    38
    Der Effekt sieht besser aus wenn du noch..
    Code:
    animation-direction: alternate-reverse;
    ..mit rein packst.
     
  4. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Leute vielen Dank für diese coole Sache! Es funktioniert nun wie gewünscht...
     
  5. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    @Dominik Späte

    Kannst du mir zufällig sagen was ich einbauen muss um einen regenbogen farbigen Effekt zu bekommen?
    Ich nutze diesen Code zur Zeit:

    Code:
    img[alt$="(Foil)"]{
        color:grey;
        display:inline-block;
      mask:linear-gradient(-60deg,#000 30%,rgba(0,0,0,.5),#000 70%) right/300% 100%;
    
    -webkit-mask:linear-gradient(-60deg,#000 30%,rgba(0,0,0,.5),#000 70%) right/300% 100%;
          background-repeat:no-repeat;
        animation-direction: alternate-reverse;
        animation:shimmer 2.5s infinite;
         
    }
    @keyframes shimmer{
        100%{mask-position:left;-webkit-mask-position:left};
       
    }
     
  6. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    930
    Danke erhalten:
    801
    Danke vergeben:
    300
    Nein, sorry, damit kann ich gerade leider nicht dienen.
     
  7. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Leider ist dem nicht so.

    Ich habe das mehrfach im Code geändert und getestet. Aber es will einfach nicht funktionieren. Sobald ich den Code
    linear-gradient (90deg, purple, blue, cyan, green, yellow, red, black);

    einfüge verschwindet der schimmer effekt komplett.