[JS/CSS] Plaatjes over elkaar laten schuiven, hoe?

[Woudloper]

Hoi,

Ik wil meerdere plaatjes over elkaar laten schuiven!? Zeg we hebben meerdere plaatjes van 150 * 60 pixels....

Bijvoorbeeld:

* Skelet v/e hoofd (1)
* Normaal gezich v/e persoon (2)
----
* random, bv baard/bril/snor/etc... zijn transparant

en nu zou ik het graag voor elkaar willen krijgen dat het 1ste plaatje gewoon wordt getoond en daarna wordt het tweede plaatje er van onder (naar boven) over geschoven... (dat is dan intro)...

Daarna voor elk menu item (van onder naar boven) een uiterlijk wijziging (dus: baard/bril/snor/etc)

Weten jullie of dit mogelijk en zo ja welke techniek ik zou moeten gebruiken hiervoor. (geen flash)

[wicher|IA]

techniek: idd javascript

[El Reino]

iemand een idee hoe het moet, want ben er zelf eigenlijk ook wel benieuwd naar...

[Verwijderd]

blaat

[drm]

Ik geef je een paar hints

• setInterval of setTimeout
• layers
• css: position absolute
• document.getElementById ( 'id' ).style.top = y

volgens mij, als je een beetje zoekt, kom je er wel uit

_{sorry, het is bijna weekend, niet meer zo veel zin om uitgebreide verhalen e vertellen...
Misschien een andere goedheiligman ?}

[Willem]

Het is idd mogelijk.
Moet je even op irt.org zoeken naar hoe je objecten moet verplaatsen met JS.

Verder misschien een leuk idee:
2 layers, met bovenop het plaatje met het skelet, onderop het 'normale' plaatje. Schrijf een functie waarin de opacity van de bovenste layer met een x aantal % ermindert, zodat je een 'fade' effect kijgt.

succes.

(op www.irt.org is een hoop te vinden)

[drm]

Op vrijdag 07 december 2001 12:54 schreef Timmy-i het volgende:
blaat

wat is jouw probleem

[Verwijderd]

Op vrijdag 07 december 2001 12:57 schreef drm het volgende:

[..]

wat is jouw probleem

en waarom reageer jij hierop?

[El Reino]

Op vrijdag 07 december 2001 12:58 schreef Timmy-i het volgende:

[..]

en waarom reageer jij hierop?

offtopic????

[Verwijderd]

Op vrijdag 07 december 2001 13:00 schreef elreino het volgende:

[..]

offtopic????

sorry bolle

[El Reino]

Op vrijdag 07 december 2001 13:01 schreef Timmy-i het volgende:

[..]

sorry bolle

offtopic again

/edit
p.s. dit was de laatste, ik ga hier verder niet op in

[Verwijderd]

Op vrijdag 07 december 2001 13:02 schreef elreino het volgende:

[..]

offtopic again

/edit
p.s. dit was de laatste, ik ga hier verder niet op in

sorry was ff aan het testen

[Exirion]

Op vrijdag 07 december 2001 13:04 schreef Timmy-i het volgende:
sorry was ff aan het testen

Bijna een jaar geleden geregistreerd en dan wat testen/uitproberen? Hou 's op met die ongein.

[oh,when?]

Ja, dat is zeker mogelijk. Sterker nog, het is een van de onderdelen van onze versie van Paint. Je wilt eigenlijk gewoon een z-sorting method simuleren in Javascript. Nu weet ik niet uit mijn hoofd of image een attribuut z-index heeft, maar ik weet zeker dat <DIV> deze wel heeft. Dus als je je image in een <DIV> stopt, dan kun je dynamisch vanuit het DOM je layer herorderen, en zo een z-sort simuleren.

quick n raw voorbeeld

PHP:

<?
<script language="Javascript" type="text/javascript">
<!--

function swapDepth(layer, depth) {
document.getElementbyId(layer).style.zIndex = depth;
}

for (i=0; i<10; i++) {
document.write("<div id='"+i+"'>[img]'foo"+i+"'.gif'></div>");
//-->
</script>
?[/img]

Je hebt nu 10 layers, met een id 0 tot en met 9

Als je nu layers wil moven naar de top, roep je iets aan als

code:

<a href="javascript:swapDepth('2',10);">zet z-index van layer 2 naar 10</a>

dat is de basis. khoop dat je het een beetje begrijpt...

^{disclaimer: code uit losse hand getikt..syntax fouten voorbehouden}

[Woudloper]

dat is de basis. khoop dat je het een beetje begrijpt...

Begin het te begrijpen... en dan verder met iets zoals dit:

PHP:

<?
    function StartScrolling() {
        setInterval('MoveUp();', 10);
    }
            
    function MoveUp() {
        position--;
        if (position < 100) position = 100;
        bar.style.top = position;
    }
?>

Hierbij er dan vanuit gaan dat de top positie van het plaatje 100 is en dat het andere plaatje onder het andere staat!?

Dat moet het dan zijn denk ik k'zal eens kijken of het gaat lukken....

[drm]

Op vrijdag 07 december 2001 13:34 schreef rwoudsma het volgende:

[..]

Begin het te begrijpen... en dan verder met iets zoals dit:

PHP:

<?
    function StartScrolling() {
        setInterval('MoveUp();', 10);
    }
            
    function MoveUp() {
        position--;
        if (position < 100) position = 100;
        bar.style.top = position;
    }
?>

Hierbij er dan vanuit gaan dat de top positie van het plaatje 100 is en dat het andere plaatje onder het andere staat!?

Dat moet het dan zijn denk ik k'zal eens kijken of het gaat lukken....

let op, je moet een interval ook weer clearen, anders vreet het nutteloos processortijd

[Verwijderd]

Ligt het aan mij of komt dat stukje code me verschrikkelijk bekend voor?

[Woudloper]

let op, je moet een interval ook weer clearen, anders vreet het nutteloos processortijd

Dus:

code:

If Positie bereikt {
    ClearInterval();
}

_{is maar dummy code}

[Woudloper]

Ligt het aan mij of komt dat stukje code me verschrikkelijk bekend voor?

Klopt helemaal, zat te denken dat iemand al zoiets gemaakt had voor links naar rechts... Was nog niet helemaal wakker..

[drm]

Op vrijdag 07 december 2001 13:40 schreef rwoudsma het volgende:

[..]

Dus:

code:

If Positie bereikt {
    ClearInterval();
}

_{is maar dummy code}

bijna

code:

var  intervalPtr = false;

function start ()
{
   intervalPtr = setInterval ( meuk );
}

function stop ()
{
   if ( intervalPtr )
   {
    clearInterval ( intervalPtr );
    intervalPtr = false;
   }
}

[Woudloper]

[/OT]

wat moet me hierbij voorstellen

binnenkort: drm.XTP: Extensible Template Parser v0.9a

[drm]

Op vrijdag 07 december 2001 13:51 schreef rwoudsma het volgende:
[/OT]
wat moet me hierbij voorstellen

binnenkort zie je er meer over. Je ziet m'n sig vast nog wel een keer als hij af is
</offtopic>

[Woudloper]

ff voor de eenvoud...

als ik het dus goed begrijp, dan:

* plaatjes in DIV's stoppen
* Plaatje met skelet index 1 zodat hij op voorgrond is
* plaatje met gezicht vanaf top (=260) 100+160 naar boven laten scrollen.
* selecteren menu-item, uiterlijk x naar boven laten scrollen...

[drm]

Op vrijdag 07 december 2001 13:57 schreef rwoudsma het volgende:
ff voor de eenvoud...

als ik het dus goed begrijp, dan:

* plaatjes in DIV's stoppen
* Plaatje met skelet index 1 zodat hij op voorgrond is
* plaatje met gezicht vanaf top (=260) 100+160 naar boven laten scrollen.
* selecteren menu-item, uiterlijk x naar boven laten scrollen...

dat lijkt me prima pseudocode

[oh,when?]

Op vrijdag 07 december 2001 13:57 schreef drm het volgende:

[..]

binnenkort zie je er meer over. Je ziet m'n sig vast nog wel een keer als hij af is
</offtopic>

achja..waarom het wiel opnieuw uitvinden als er XSL bestaat

[Pelle]

Op vrijdag 07 december 2001 15:27 schreef oh,when? het volgende:
achja..waarom het wiel opnieuw uitvinden als er XSL bestaat

Ik denk om er iets van te leren, of gewoon voor de lol. In ieder geval, ik was ook niet van plan om met Photoshop te gaan concurreren, maar toch ben ik pellePaint gaan bouwen

[Woudloper]

Hierond mijn pseudocode

* plaatjes in DIV's stoppen
* Plaatje met skelet index 1 zodat hij op voorgrond is
* plaatje met gezicht vanaf top (=260) 100+160 naar boven laten scrollen.
* selecteren menu-item, uiterlijk x naar boven laten scrollen...

Voorbeeld wat ik geprutst heb:

http://verwijderddomain.nl/GoT/sliding/Sliding.html

Nou, het is bijna af... Maar nog niet met de juiste plaatjes!? Dat komt nog wel

Heb nog een tweetal probleempjes:

1. Hoe achterhaal ik de z-index van het plaatje wat op het scherm staat??
2. Soms krijg ik een error!? Wellicht doordat het plaatje nog niet geheel geladen is... Hoe achterhaal ik of het plaatje geladen is?

_{toekomstig wordt het een stuk aluminium (1) waar tape (2) overheen scrollt en (x) voor elk menu item er een ander profiel op komt (wordt gelijmt)}

[ Voor 5% gewijzigd door Woudloper op 18-09-2005 23:35 ]

[El Reino]

Op donderdag 13 december 2001 10:45 schreef rwoudsma het volgende:

[..]

Voorbeeld wat ik geprutst heb:

http://www.geocities.com/rwoudsma/GOT/sliding/Sliding.html

Nou, het is bijna af... Maar nog niet met de juiste plaatjes!? Dat komt nog wel

Heb nog een tweetal probleempjes:

1. Hoe achterhaal ik de z-index van het plaatje wat op het scherm staat??
2. Soms krijg ik een error!? Wellicht doordat het plaatje nog niet geheel geladen is... Hoe achterhaal ik of het plaatje geladen is?

_{toekomstig wordt het een stuk aluminium (1) waar tape (2) overheen scrollt en (x) voor elk menu item er een ander profiel op komt (wordt gelijmt)}

Heb ff gekeken...ziet er koel uit...alleen (ja, toch een maar ), als je snel achterelkaar op de menu-item-linkjes klikt, gaan de plaatjes steeds sneller scrollen. Dat versnellen doet ie alleen als je dus zo snel achterelkaar klikt dat het plaatje nog niet tot bovenaan is gekomen.

(is dit wel duidelijk omschreven? )

[Woudloper]

Op donderdag 13 december 2001 12:37 schreef elreino het volgende:

[..]

Heb ff gekeken...ziet er koel uit...alleen (ja, toch een maar ), als je snel achterelkaar op de menu-item-linkjes klikt, gaan de plaatjes steeds sneller scrollen.

He , maar dat is niet de bedoeling...

Hoe kan dat nou weer Snap er ff niets van... Misschien omdat er na het klikken meerdere scrolls van hetzelfde object worden gestart...

[drm]

Op donderdag 13 december 2001 12:50 schreef rwoudsma het volgende:
Hoe kan dat nou weer Snap er ff niets van... Misschien omdat er na het klikken meerdere scrolls van hetzelfde object worden gestart...

Jep. Je moet altijd in een functie die een interval of timeout start nagaan of die timeout niet toevallig al loopt:

in navolging op mijn vorige codesnippet:

code:

var  intervalPtr = false;
function start ()
{
   if ( !intervalPtr )  // <--- deze even toevoegen
    intervalPtr = setInterval ( meuk );
}

function stop ()
{
   if ( intervalPtr )
   {
    clearInterval ( intervalPtr );
    intervalPtr = false;
   }
}

snappie? Dan kijkt de functie start () of de interval al bestaat, zo ja, dan doettie dus niks.

[Woudloper]

snappie? Dan kijkt de functie start () of de interval al bestaat, zo ja, dan doettie dus niks.

drm, ik snap het en heb het ook al geimplementeerd...

Maar dat rest niet die andere puntjes. Want hetgeen dat ik wil is steeds een ander plaatje daarover heen schuiven!? kan ik daarvoor dezelfde z-index gebruiken of moet ik echt de laatste achterhalen...

* Woudloper zat nog te denken dat het wel leuk is om de menu scroll plaatje te storen

Hiermee bedoel ik dat je eerst het beaming plaatje laat lopen en voor de snelle menu klikkers een soortement van store te maken zodat het schuiven van de items pas gebeurt nadat de intro klaar is... Weet iemand hoe dat moet

[Woudloper]

Met dank aan drm voor z'n suggestie over het checken voor scrollen werkt het nu.

_{disclaimer: als het goed is, is het nu nog IE only}

Ik heb het achterhalen van de z-index laten zitten en heb het opgelost met: "filter: alpha"...

Nu dacht ik dat dit alleen ondersteunt werd door IE!? Weet iemand of het toch browser X compliant gemaakt kan worden.. het faden bedoel ik dan!? Of kan dat gewoon niet