PDA

Volledige versie bekijken : popup, waarbij achtergrond donker wordt


alexa
%Europe/Berlin %904 %2009, 21:42
Hallo,

ik zou graag iets willen maken, waarvan ik niet goed weet hoe het heet, maar het ziet er zo uit:

-1. Over een onderwerp word je op internet aangeboden meer te weten: play
-2. Vervolgens komt er een popup-venster opzetten op een fraaie manier
-3. Het venster is vol aanwezig, terwijl de achtergrond donkerder wordt

Zie hier, waar ik dit vond: http://www.graphicnews.com/
(de play-mogelijkheid onder het Palestijnse jongetje)

Mijn vragen:
1. hoe krijg je die beweging van het popuppen zo voor elkaar
2. hoe krijg je vervolgens die achtergrond donkerder gekleurd?

Kan iemand mij verder op pad helpen of aan tutorials hiervoor?

Aeronobe
%Europe/Berlin %917 %2009, 22:00
Ik denk dat bij dergelijke voorbeelden gebruik gemaakt wordt van Lightbox (met of zonder aanpassing)

dcm360
%Europe/Berlin %922 %2009, 22:09
De animaties zijn gemaakt met een combinatie van CSS en JavaScript. Met JavaScript kan je namelijk CSS van objecten aanpassen, waaronder de transparantie (het infaden) en de grootte en positie. Voorbeeldje:
document.getElementById('popup').style.height="40px";
Deze code zal de hoogte van het element met als ID 'popup' een hoogte van 40 pixels geven. Iets om rekening mee te houden is wel dat als je bijvoorbeeld de margin-height wilt aanpassen dit in JavaScript marginHeight word. Het streepje verdwijnt dus en de eertvolgende letter wordt een hoofletter. Het animeren gebeurd dacht ik in de meeste gevallen door de elementen in een for-loop beetje bij beetje aan te passen. Dit is zo ongeveer de algemene achtergrond die ik ooit eens opgepikt heb, echte details kan ik vrees ik niet mee helpen.

edit: Aeronobe was me voor... Het komt er in ieder geval op neer dat wat Aeronobe aangeeft volgens mij ook werkt op de manier die ik hierboven beschreef

ps dit hoort eigenlijk in HTML CSS en JS, dus als iemand deze even kan verplaatsen...

alexa
%Europe/Berlin %382 %2009, 09:11
Dank jullie wel voor jullie reaktie. Ik weet nu in ieder geval dat het donkere effect Lightbox heet, en dat het hele fenomeen meer een kwestie is van HTML, CSS en JS.
Ik wist dat niet, sorry daarom dat ik het hier heb gepost, dacht dat zoiets ook met ActionScript in Flash te bereiken zou zijn.

Dauntless
%Europe/Berlin %391 %2009, 09:24
In het Flex framework heb je de PopupManager class welke Modal windows aan kan maken. Dat zijn 'popups' in de Flash Player zelf die er voor zorgen dat de achtergrond donkerder wordt en dat je niets kan doen met achterliggende elementen, tot dat de popup gesloten is.

Overigens heet het donkere effect niet Lightbox: Lightbox is een frameworkje waarmee je dat effect kan bereiken, maar je kan het evengoed zelf maken en het je eigen naam geven.