nicht angemeldet
Maske über Bild bewegen
Matthias Scharwies
Gunnar BittersmannHallo zusammen!
Ich probiere gerade immer noch ein bisschen mit Animation in CSS rum. Von Prinzip her hatte ich die Idee, eine Maske über ein feststehendes Bild zu bewegen. Und hatte das jetzt erst mal so probiert
body{
overflow:hidden;}
.Maske{
position:absolute;
z-index:100;
border:solid thick red;
width: 800px;
height:500px;
left:100px;
overflow:hidden;
transition: left 1.5s ease;
}
.Bild{
position:fixed;
z-index:90;
border:solid thin #ccc;
width: 1200px;
height:700px;
left:50px;
}
input[type="checkbox"]#myCheckbox {
z-index: 100;
cursor: pointer;
display:inline-block;
background-image:url(images/Linoleum-Farben.jpg);
opacity: 0;
}
input[type="checkbox"]:checked#myCheckbox ~ .Maske {
left:600px;
}
<body>
<input type="checkbox" id="myCheckbox" />
Hier ist mein Text mit dem Wort <label for="myCheckbox" style="cursor:pointer"><u>meinLink</u> </label> und meine Checkbox direkt dahinter.<br /><br />
<div class="Maske">
<div class="Bild">
<img src="images/Bild.jpg" height="800" width="1200">
</div>
</div>
</body>
funktioniert leider nicht, weil .Bild position:fixed das overflow:hidden von .Maske ausgehebelt wird.
Jetzt habe ich was über die CSS-Eigenschaft mask gelesen, damit aber noch nicht rumprobiert, weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.
Nun frage ich mich:
- kann man mit meiner ersten Idee irgendwas erreichen?
- kann man doch irgendwie mit mask arbeiten?
- oder muss man sowas doch mit Javascript realisieren?
Danke euch schon jetzt für eure Antworten!
-
Servus!
Hallo zusammen!
Ich probiere gerade immer noch ein bisschen mit Animation in CSS rum. Von Prinzip her hatte ich die Idee, eine Maske über ein feststehendes Bild zu bewegen. Und hatte das jetzt erst mal so probiert
Jetzt habe ich was über die CSS-Eigenschaft mask gelesen, damit aber noch nicht rumprobiert, weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.
Du könntest deine Rastergrafik in SVG einbinden (mit dem image-Element) und dann mit dem mask-Element maskieren. Das geht ab IE9.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
@@kyan
weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.
„Es ist ein verbreiteter Irrglaube, dass progressive enhancement heißt, seine Zeit in alte Browser zu stecken […] Man kann seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat. […]
Webseiten müssen nicht in jedem Browser gleich aussehen.“ —Jeremy KeithLLAP 🖖
--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl