Kleur op basis van onderliggende kleur

[ZpAz]

Momenteel loop ik met een idee te spelen, en ik vraag me af in hoeverre het uitvoerbaar is.



In bovenstaand plaatje zie je een lijn waar een icoontje aan hangt (dit kunnen er meerdere zijn, en je kan op het icoontje klikken) en twee vlakken waar content in zit.

Het lijntje aan de rechterkant heeft een fixed positie, dus wanneer je scrolt blijft die op zijn plek en scrollen de content vlakken zoals gewoon.

Maar nu zou ik het wel tof vinden als het gedeelte van het lijntje dus automatisch de kleur matched (of in ieder geval wit op een gekleurde achtergrond, en donker grijs op een witte achtergrond) waar het zich boven bevind.

Is dit mogelijk te doen? Javascript, CSS (backend hulp), alles mag. Ondersteuning hoeft enkel in moderne browsers.

edit:

Misschien ben ik iets vergeten. Als het icoontje voor de helft boven het paarse vlak is en voor de helft boven het witte, dan zal hij dus voor de helft gekleurd moeten met de kleur van het vlak waar hij boven zit.

[ Voor 12% gewijzigd door ZpAz op 12-06-2014 21:28 . Reden: Stukje informatie toegevoegd. ]

[TERW_DAN]

De manier die ik zo uit m'n mouw schudt is, geef die lijn 1 kleur (wit), zet daaroverheen een 2e element dat een bepaalde kleur meerkrijgt.
op de onscroll van je document voer je een scriptje uit dat kijkt naar het onderliggende element, de x/ycoordinaten van dat element en op basis daarvan schuif je je lijntje naar boven of naar beneden, en schaal je de hoogte van het ding in.

Of dat volledig soepel loopt weet ik niet, maar dat is te proberen.

Optie 2
En die is misschien nog wel makkelijker. Zet in het element dat scrollt die lijn als achtergrond. Het element dat position fixed heeft leg je daaroverheen. Dit element heeft onderin, tot aan de bodem van het scherm een ondoorzichtige achtergrond, in de kleur van het element dat daaronder ligt.

[ZpAz]

Misschien ben ik iets vergeten. Als het icoontje voor de helft boven het paarse vlak is en voor de helft boven het witte, dan zal hij dus voor de helft gekleurd moeten met de kleur van het vlak waar hij boven zit.

@ Hierboven. De lijn kan meerdere icoontjes bevatten (op basis van het aantal vlakken zeg maar, als je op 1 van de icoontjes drukt ga je naar het betreffende vlak toe). Nu is dat wel te automatiseren met wat data tags bij de html en wat javascript.

[ Voor 37% gewijzigd door ZpAz op 12-06-2014 21:30 ]

[TERW_DAN]

Dan zou je meerdere elementen kunnen gebruiken. Of dat performancetechnisch lekker blijft lopen vraag ik me dan alleen af.

[TVH7]

Je zou het kunnen doen met sass, lijkt me zoizo handiger omdat je dan ook onder andere variabelen kan gaan gebruiken voor je kleur. Is een stuk minder werk als je erachter komt dat je toch een andere kleur paars wilt hebben.

http://sass-lang.com/

[ Voor 5% gewijzigd door TVH7 op 12-06-2014 23:04 ]

[ZpAz]

TVH7 schreef op donderdag 12 juni 2014 @ 23:03:
Je zou het kunnen doen met sass, lijkt me zoizo handiger omdat je dan ook onder andere variabelen kan gaan gebruiken voor je kleur. Is een stuk minder werk als je erachter komt dat je toch een andere kleur paars wilt hebben.

http://sass-lang.com/

Dat is inderdaad in zulke gevallen handig, maar lost niet het probleem op wat ik zoek. Moet ook maar eens op de SASS bandwagon springen, en "this is as good as a moment as any".

TERW_DAN schreef op donderdag 12 juni 2014 @ 21:21:
De manier die ik zo uit m'n mouw schudt is, geef die lijn 1 kleur (wit), zet daaroverheen een 2e element dat een bepaalde kleur meerkrijgt.
op de onscroll van je document voer je een scriptje uit dat kijkt naar het onderliggende element, de x/ycoordinaten van dat element en op basis daarvan schuif je je lijntje naar boven of naar beneden, en schaal je de hoogte van het ding in.

Of dat volledig soepel loopt weet ik niet, maar dat is te proberen.

Op basis van CSS Clip moet dit wel te doen zijn denk ik.

[NMe]

ZpAz schreef op vrijdag 13 juni 2014 @ 11:03:
[...]

Dat is inderdaad in zulke gevallen handig, maar lost niet het probleem op wat ik zoek. Moet ook maar eens op de SASS bandwagon springen, en "this is as good as a moment as any".

Doe het dan wel om de goede reden. Voor dit probleem is het geen oplossing.

Ik denk niet dat je dit kan doen met een fixed positioned lijn. Wat je wel kan doen is hacken. Zet de lijn in je content en laat hem dus meescrollen. Je hebt dan boven en onder waar jij je lijn wil een stukje ongewenste lijn. Die zou je dan weg kunnen werken door blokjes eroverheen te positioneren die dezelfde achtergrondkleur hebben als het vak waar ze overheen vallen. Dan heb je alleen een intelligent stukje javascript nodig om dat blokje fixed te maken tenzij de rand van de tekst in de buurt komt.

[ZpAz]

NMe schreef op vrijdag 13 juni 2014 @ 11:29:
[...]

Doe het dan wel om de goede reden. Voor dit probleem is het geen oplossing.

Dat lijkt me precies wat ik ook zei. Het project moet nog helemaal gemaakt worden, niet enkel dit puntje. Dit puntje zat enkel nog in mijn hoofd en in dat gifje.

NMe schreef op vrijdag 13 juni 2014 @ 11:29:
Ik denk niet dat je dit kan doen met een fixed positioned lijn. Wat je wel kan doen is hacken. Zet de lijn in je content en laat hem dus meescrollen. Je hebt dan boven en onder waar jij je lijn wil een stukje ongewenste lijn. Die zou je dan weg kunnen werken door blokjes eroverheen te positioneren die dezelfde achtergrondkleur hebben als het vak waar ze overheen vallen. Dan heb je alleen een intelligent stukje javascript nodig om dat blokje fixed te maken tenzij de rand van de tekst in de buurt komt.

Volgens mij kan ik als ik 2 vlakken heb de (een witte en de grijze) op dezelfde plek fixed positioneren. Met CSS Clipping bepalen voor beiden waar een stukje gecropped moet worden. En met Javascript op de scroll events de betreffende clipping aanpassen.

[ Voor 4% gewijzigd door ZpAz op 13-06-2014 15:14 ]

[NMe]

ZpAz schreef op vrijdag 13 juni 2014 @ 15:14:
[...]

Volgens mij kan ik als ik 2 vlakken heb de (een witte en de grijze) op dezelfde plek fixed positioneren. Met CSS Clipping bepalen voor beiden waar een stukje gecropped moet worden. En met Javascript op de scroll events de betreffende clipping aanpassen.

Het "probleem" zit hem erin dat er bij de overgang tussen het witte en het paarse vlak twee verschillende blokjes nodig zijn om de lijn te verbergen op de manier die ik omschreef. Echt heel elegant ga je dit denk ik niet kunnen oplossen.

[TVH7]

Ik zie niet waarom dit het probleem niet oplost. Het enige wat SASS doet is jouw code naar normale css code te veranderen. En het handige is juist dat je met verschillende vars kan zeggen bijvoorbeeld $dezekleur + dezetint
Yeah, niet helemaal goed de post gelezen.

[ Voor 10% gewijzigd door TVH7 op 14-06-2014 02:13 ]

[Shineless]

Het werkt niet helemaal perfect, maar bedoel je zoiets als dit?

[ZpAz]

Shineless schreef op zaterdag 14 juni 2014 @ 09:35:
Het werkt niet helemaal perfect, maar bedoel je zoiets als dit?

Yeah, dit idd. Nice. Werkt niet helemaal perfect inderdaad, maar dat is het idee.

[Klaasvaak]

Hier is misschien wel wat moois van te maken. Het werkt in ieder geval soepel zonder js.

code:

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {
 margin: 0;
 padding: 0;
}
#top {
 height: 1000px;
 background: url(iconA.png) fixed 100% 100% no-repeat, url(lineA.png) fixed 100% repeat-y;
}
#bottom {
 height: 1000px;
 background: url(iconB.png) fixed 100% 100% no-repeat, #8351A6 url(lineB.png) 100% repeat-y;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
</html>