Chinamann: Effekt gesucht

Hi,
ich suche schon eine Weile, finde aber diesen Effekt nicht:
http://www.lauscherlounge.de/records/uebersicht/

Wenn man z. B. "Fantasy" anklickt, werden alle anderen Images "gefadet".

Weiß jemand, wie das heißt?

Vielen Dank!

  1. Weiß jemand, wie das heißt?

    Der Effekt heißt Transparenz (eng.: Opacity).
    Ich würde es nicht unbedingt Fadeout nennen, da die Ausblendung nicht kontinuierlich erfolgt.

    Auf der von dir verlinkten Seite wird dieser Effekt erreicht, indem der Opacity-Wert im style-Attribut des img-Tags per Javascript auf 0.5 gesetzt wird. Funzt erst ab IE8.

    Den Quelltext dazu findest du auf der von dir verlinkten Seite unter record.js Zeile 30: filterProducts().

    Mir persönlich gefällt diese Umsetzung jedoch nicht, da sowohl style-Attribut, als auch die CSS-Klasse des img-Tags verändert werden. Das wäre m.M. nicht nötig gewesen.

    lg
    mark

    1. @@mark:

      nuqneH

      Auf der von dir verlinkten Seite wird dieser Effekt erreicht, indem der Opacity-Wert im style-Attribut des img-Tags per Javascript auf 0.5 gesetzt wird.

      Und das auch noch stufenweise in einer Schleife. Also so, wie man es NICHT machen sollte. https://forum.selfhtml.org/?t=218225&m=1501921 ff.

      Mir persönlich gefällt diese Umsetzung jedoch nicht, da sowohl style-Attribut, als auch die CSS-Klasse des img-Tags verändert werden. Das wäre m.M. nicht nötig gewesen.

      Es gibt keine „CSS-Klassen“. Und du meinst das „img-Element“.

      Ich würde auch nicht bei jeder Auswahl allen Item eine Klasse "active" bzw. "inactive" verpassen, sondern im HTML festlegen, zu welchen Kategorien (Klassen) das jeweilige Item gehört, bspw. <li class="category-1 category-2">1 2</li>.

      Ich hab da mal was vorbereitet.

      Die UI-Elemente zur Auswahl sind Checkboxen (wenn nur eine Kategie ausgewählt werden soll: Radiobutton) mit Labels. Die Checkboxen (bzw. Radiobuttons) können mit CSS vesteckt werden; dann ist dafür zu sorgen, dass deren Status über das Label visualisiert wird, bspw. :checked + label { background: silver }.

      Bei Änderungen der Auswahl wird dem Containerelement eine dieser Kategie entsprechende Klasse hinzugefügt bzw. weggenommen:

      controls[i].addEventListener('change', function ()  
      {  
      	items.classList.toggle(this.id);  
      }, false);
      

      Alle nicht zu den jeweilig ausgewählten Kategorien gehörenden Items werden transparent dargestellt:

      .select-1 :not(.category-1),  
      .select-2 :not(.category-2),  
      .select-3 :not(.category-3)  
      {  
      	opacity: 0.2;  
      }
      

      Und wichtig: Der Fade-Effekt ist reines CSS: #items li { transition: opacity 1s ease }

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@Gunnar Bittersmann:

        nuqneH

        Ich hab da mal was vorbereitet.

        Dort werden die ausgewählten Kategorien mit AND verknüpft. Sollte OR gewünscht sein, sieht das CSS etwas anders aus:

        #items[class|=select] li  
        {  
        	opacity: 0.2;  
        }  
          
        #items.select-1 .category-1,  
        #items.select-2 .category-2,  
        #items.select-3 .category-3  
        {  
        	opacity: 1;  
        }
        

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Gunnar Bittersmann:

          Ich hab da mal was vorbereitet.

          sehr schön!
          danke qx

          1. Herzlichen Dank für die "Diskussion", die Beiträge und allen voran die vorgefertigte Umsetzung. Da ich kein Java Script kann, wäre ich vermutlich ziemlich verloren gewesen - insofern nochmals vielen Dank!

            Eine Frage habe ich noch: Ich habe jetzt (wie beim "Original") Bilder bzw. Fotos eingebunden. Das Problem ist, dass beim Klick der Effekt schon erzielt wird, allerdings "fadet" sich die ausgewählte Kategorie auch, nur eben nicht so stark.

            Gibt's dafür eine Lösung? Ich habe schon halb totgeopacitygoogelt...

            Nochmals vielen Dank!

            1. Eine Frage habe ich noch: Ich habe jetzt (wie beim "Original") Bilder bzw. Fotos eingebunden. Das Problem ist, dass beim Klick der Effekt schon erzielt wird, allerdings "fadet" sich die ausgewählte Kategorie auch, nur eben nicht so stark.

              Ohne Quelltext, wird dir da nur sehr schwerlich jemand weiterhelfen können. Das kann alles mögliche sein. Ist aber sicherlich nur eine Kleinigkeit.

              Wahrscheinlich verstehst du nicht, wie das Skript, das du geschrieben hast funktionierst. Versuch am besten herauszufinden warum die Kategorie überhaupt Transparent wird. Wenn du das verstehst ist auch dein Problem so gut wie gelöst.

              lg
              mark

              1. Wahrscheinlich verstehst du nicht, wie das Skript, das du geschrieben hast funktionierst. Versuch am besten herauszufinden warum die Kategorie überhaupt Transparent wird. Wenn du das verstehst ist auch dein Problem so gut wie gelöst.

                So ist es, ich verstehe es wirklich nicht. Wenn an einem Link etwas anhängt, kann ich das verstehen, aber hier tappe ich wirklich im Dunkeln (und es ist wirklich nicht so, als hätte ich es nicht versucht zu verstehen.)

                Der Code...

                  
                <form action="">  
                <input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="" title=""></label>  
                  
                <input type="checkbox" id="select-2"/><label for="select-2"><img src="2.png" alt="" title=""></label>  
                  
                <input type="checkbox" id="select-1"/><label for="select-1"><img src="3.png" alt="" title=""></label>  
                </form>  
                		  
                <ul id="items">  
                <li class="category-1"><a href="..." title="..."><img src="1.jpg" alt=""></a></li>  
                <li class="category-1"><a href="..." title="..."><img src="2.jpg" alt=""></a></li>  
                <li class="category-1"><a href="..." title="..."><img src="3.jpg" alt=""></a></li>  
                			  
                <li class="category-2"><a href="..." title="..."><img src="4.jpg" alt=""></a></li>				  
                  
                <li class="category-3"><a href="..." title="..."><img src="5.jpg" alt=""></a></li>	  
                </ul>  
                		  
                  
                <script>  
                (function ()  
                {  
                	var controls = document.querySelectorAll('input'),  
                		items = document.querySelector('#items');  
                  
                	for (var i = 0, l = controls.length; i < l; i++)  
                	{  
                		if (controls[i].checked)  
                		{  
                			items.classList.add(controls[i].id);  
                		}  
                		else  
                		{  
                			items.classList.remove(controls[i].id);  
                		}  
                				  
                		controls[i].addEventListener('change', function ()  
                		{  
                			items.classList.toggle(this.id);  
                		}, false);  
                	}  
                })();  
                		</script>  
                
                
                  
                input  
                {  
                	visibility: hidden;  
                }  
                  
                label  
                {  
                	display: inline-block;  
                	padding: 1em;  
                	cursor: pointer;  
                }  
                  
                :checked + label  
                {  
                	background: silver;  
                }  
                  
                #items  
                {  
                	display: inline-block;  
                	list-style: none;  
                	margin: 1em -1em 0 -1em;  
                	border-top: thin solid;  
                	padding: 1em 0 0 0;  
                }  
                  
                #items li  
                {  
                	display: inline-block;  
                	vertical-align: top;  
                	margin: 1em;  
                	padding: 0.5em;  
                	color: white;  
                	transition: opacity 1s ease;  
                }  
                  
                .select-1 :not(.category-1),  
                .select-2 :not(.category-2),  
                .select-3 :not(.category-3)  
                {  
                	opacity: 0.5;  
                }  
                
                
                1. @@Chinamann:

                  nuqneH

                  <input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="" title=""></label>

                  Fehler: Inhalt für alt-Attribut fehlt. Für Nutzer, die das Bild 1.png nicht sehen können, ist das Label leer.

                  Das title-Attribut ist eher sinnlos. (Es sei denn für alte IEs, die sonst den Inhalt des alt-Attribut fälschlicherweise als Tooltip anzeigen würden.)

                  Also:

                  <input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="1"></label>  
                  
                  

                  Für alle anderen Bilder entsprechend.

                  <input type="checkbox" id="select-1"/><label for="select-1"><img src="3.png" alt="" title=""></label>

                  Fehler: IDs dürfen in einem Dokument nur jeweils einmal vorkommen. Du willst vermutlich damit auch gar nicht die 1. Kategorie schalten, sondern die 3.:

                  <input type="checkbox" id="select-3"/><label for="select-3"><img src="3.png" alt="3"></label>  
                  
                  

                  BTW, die Klassen sollten natürlich am Ende nicht select-[123] und category-[123] heißen, sondern sinnvoll benannt sein.

                  .select-1 :not(.category-1),
                  .select-2 :not(.category-2),
                  .select-3 :not(.category-3)
                  {
                  opacity: 0.5;
                  }

                  Das funktionierte in meinem Bespiel, weil meine li keine Kindelemente hatten. Bei dir wirken diese Selektoren auch auf alle a- und img-Kindelemente, da diese auch nicht den Klassen .category-[123] angehören. Deshalb werden die Elemente immer transparenter.

                  Die Selektoren sollten nur auf die li wirken:

                  .select-1 li:not(.category-1),  
                  .select-2 li:not(.category-2),  
                  .select-3 li:not(.category-3)  
                  {  
                      opacity: 0.5;  
                  }
                  

                  Ich hab das in meinen Beispielen mal geändert.

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. Ich kürze es mal ab: Vielen Dank!

                    Den Alt-Tag hatte ich z. B. nur leer gelassen, damit das hier nicht zu voluminös wird. Wie auch immer: Vielen Dank!

                    1. @@Chinamann:

                      nuqneH

                      Den Alt-Tag hatte ich

                      nur so aus Geikel so genannt. Da das in diesem Thread schon verlinkt war, weiß ich, dass es alt-Attribut heißt.

                      Qapla'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. @Gunnar Bittersmann:

          Danke dafür! Wieder was gelernt.