✔ Text weich ausblenden mit SVG o.ä.

[RedShot]

Hallo,

ich sitze gerade an einem Slider und möchte nun links und rechts vom Slider die Inhalte (Text, Bilder...) leicht ausfaden lassen, das diese so ungefähr im nichts verschwinden. Das Problem hierbei ist, das der Hintergrund ein Bild ist und keine einfarbige Fläche, weshalb ein PNG schonmal ausscheidet. Auch ein Teil vom Bildausschnitt kann ich nicht nehmen, da die Bilder sich mit resizen. Ich habe hier bereits ein Plugin gefunden, welches Bilder ausblenden lässt, jedoch keinen Text.

Habe es auch bereits mit CSS mask-image ausprobiert, was jedoch in den meisten Browsern nicht funktionierte

Gibt es hier eventuell eine Lösung, welche sowohl für Bilder als auch Text funktioniert?

Es sollte am besten in allen neuen Browsern funktionieren. Wenn es im IE8 auch funktionieren würde, wäre das natürlich das Sahnehäubchen ist aber kein muss.

 

[CPoly]

Reicht es nicht, wenn du einfach den Text transparent werden lässt?

//Ganz sichtbar
color:rgba(0,0,0,1);

//Halb sichtbar
color:rgba(0,0,0,0.5)

 

[chmee]

Benutzt Du irgendein Framework? Auch jQuery funktioniert unter IE8. Dann wäre der Aufruf

-- html --
<span id="textid">Text Hier</span>

-- javascript --
$('#textid').fadeToggle(1000);

ein Leichtes.

SVG ist inzwischen (zu 95%) obsolet,
Canvas in HTML5 kann die meisten Sachen auch und besser/leichter.

mfg chmee

Nachtrag: fiddle erstellt: simples ein und ausfaden -http://jsfiddle.net/t6Q2x/2/

 

[RedShot]

Hallo,

nein Text ausblenden langt leider nicht. Auch mit fadeToggle würde ich einen ganzen Container ausblenden. Aber es ist nur ein Teil des Containers der ausgeblendet werden soll. Ich habe mal ein Screenshot angehängt, wie es aussehen soll:



Glaube so erklärt sich das ganze besser

Viele Grüße

 

[chmee]

Ich kann mit Hilfe Deines Bildes dennoch nicht erkennen, was ausgefaded werden soll. Nur der Text? Nur das Bild? Ein Bild, das darüber bzw. darunter liegt? Wie dem auch sei, mit den fade-Funktionen aus jQuery lässt sich alles anstellen, nur muß es irgendwie "greifbar" sein, idealerweise per Klasse/ID.

mfg chmee

 

[RedShot]

Hi,

bei Text und Bild rechts wird der Text doch immer transparenter. Hier ist die Frage wie ich das umsetzen kann.

Gruß

 

[chmee]

Gehen tut es mittels der CSS Anweisung color-stop. Es ist aber spät und ich bin zu müde, um es mal mit Hilfe von jQuery zu animieren. Ich kann Dir grad nicht sagen, ob es geht. Ich sag einfach mal, warum nicht?!

http://jsfiddle.net/7ZbW5/2/

mfg chmee

 

[RedShot]

Hi,

ja das war auch meine erste Idee, aber das Problem ist, das ich ein Hintergrundbild habe und ich da nicht in schwarz ausblenden kann, da die Bilder wechseln, bzw es auch unterschiedliche gibt und nicht alle in ein schwarz laufen. Und mir Background kann man ja nicht von Transparent 0% in Transparent 100% gehen oder?

Gruß

 

[chmee]

ui, sogar noch mit Hintergrundbild. Stöbere in den Stirnlappen, vielleicht fällt mir noch was ein.

mfg chmee

 

[RedShot]

Hehe ok ich bin nämlich mit meinem Ideen am ende. Wäre sogar in Ordnung wenn es nur im Chrome, Safari, Firefox ginge.