Javascript animation
- Onderwerp starter Twijg
- Startdatum
- Status
JP Romijn
Gebruiker
- Lid geworden
- 11 dec 2007
- Berichten
- 228
Ik vind je omschrijving niet bepaald helder. Je zegt meerdere sites gezien te hebben, misschien kan je er naar verwijzen zodat we zien wat je bedoelt.
Mijn eerste idee is dat je of een 'accordeon' of een 'scrollto' wil gebruiken.
Ik denk dat je misschien de laatste wil met een lang verticaal gradiënt.
De scrollto animatie zit onder andere in jQuery of het scriptaculous framework.
Er is ook een mooie demo die gebruik maakt van het Mootools framework.
Als dit is wat je bedoelt is er dus genoeg keuze.
Misschien nog een voorbeeld van een Accordeon. Ook de functionaliteit voor accordeons zit in de eerder genoemde frameworks.
Laatst bewerkt:
Bedankt voor de voorbeelden, maar wat ik bedoel is:
als je op de site gaat zie je eerst alleen maar de achtergrond maar dan als je met je muis er in beweegt(zo als in Google)
dat dan de website layout van boven komt en dan de opacity omhoog gaat zo als bij deze site: http://www.finalstory.org/
het logo is zo gemaakt en ik vroeg me af of ik dat ook bij een hele site kon doen.
als je op de site gaat zie je eerst alleen maar de achtergrond maar dan als je met je muis er in beweegt(zo als in Google)
dat dan de website layout van boven komt en dan de opacity omhoog gaat zo als bij deze site: http://www.finalstory.org/
het logo is zo gemaakt en ik vroeg me af of ik dat ook bij een hele site kon doen.
Laatst bewerkt:
JP Romijn
Gebruiker
- Lid geworden
- 11 dec 2007
- Berichten
- 228
Oke, dat is dus meer een enkele neergaande blind, zoals Effect.BlindDown gevolgd door een opacity effect zoals Effect.Opacity uit het scriptaculous framework.
En de andere frameworks hebben ongetwijfeld ook deze effecten.
Dat is dus heel goed te doen. Je plaatst je hele website in een div element. Vervolgens maak je (met javascript zodat je site ook zonder javascript zichtbaar blijft) dit element 0px hoog en verbergt eventueel alle 'overflow'. Vervolgens laat je als de site geladen is die twee effecten uitvoeren op het element.
En de andere frameworks hebben ongetwijfeld ook deze effecten.
Dat is dus heel goed te doen. Je plaatst je hele website in een div element. Vervolgens maak je (met javascript zodat je site ook zonder javascript zichtbaar blijft) dit element 0px hoog en verbergt eventueel alle 'overflow'. Vervolgens laat je als de site geladen is die twee effecten uitvoeren op het element.
Laatst bewerkt:
Bedankt voor uw reactie, ik was daar ook aan het denken om een div the gebruiken maar ik heb eindeloos gezocht voor een voorbeeld ik ben nog nieuw met javascript zou u misschien een voorbeeldje kunnen maken? Dat zou ik heel erg leuk vinden! 
Edit:
Ik heb wat geëxperimenteerd en dit is wat is heb:
[video=youtube;rsWOSvV4dvs]http://www.youtube.com/watch?v=rsWOSvV4dvs[/video]
Het is geen goeie kwaliteit maarja zo als je ziet komt er in een keer een scroll bar en dat is maar een keer en de animation is niet echt wat ik wou dit is de code:
Er komt een scrollbar
Wat doe ik fout?
Edit:
Ik heb wat geëxperimenteerd en dit is wat is heb:
[video=youtube;rsWOSvV4dvs]http://www.youtube.com/watch?v=rsWOSvV4dvs[/video]
Het is geen goeie kwaliteit maarja zo als je ziet komt er in een keer een scroll bar en dat is maar een keer en de animation is niet echt wat ik wou dit is de code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" mce_href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project-8</title>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function layoutshow(element){
new Effect.BlindDown(element, {duration:1});
}
</script>
</head>
<body>
<ul>
<center> <li><a href="#" style=" color:#FFF; " onClick="layoutshow('container');new Effect.Opacity('container', { from: 0.15, to: 1, duration: 1 });" >Show layout!</a></li></center>
</ul>
<div id="container" style="display:none" >
<div id="header"></div>
<div id="headerbar">
<div id="navigation">
<a href="#" class="navlink">Home</a>
<a href="#" class="navlink">Downloads</a>
<a href="#" class="navlink">Register</a>
<a href="#" class="navlink">Community</a>
<a href="#" class="navlink">Donate</a>
<a href="#" class="navlink">Partners</a>
<a href="#" class="navlink">TOS</a>
</div>
</div>
<div id="news">
</div>
</body>
</html>Wat doe ik fout?
Laatst bewerkt:
Nou ik heb alleen style in het div staan en een id dit is wat ik heb:
Doe ik iets verkeert? Want ik heb online gekeken maar niemand weet wat ik verkeert doe ik heb geprobeerd me site op een free host te zetten maar die images kun je niet zien echt heel raar dus als je meer nodig hebt kunt je in me oudere post kijken daar heb ik all de code gepaste
Code:
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function layoutshow(element){
new Effect.BlindDown(element, {duration:1});
}
</script>
</head>
<body>
<ul>
<center> <li><a href="#" style=" color:#FFF; " onClick="layoutshow('container');new Effect.Opacity('container', { from: 0.15, to: 1, duration: 1 });" >Show layout!</a></li></center>
</ul>
<div id="container" style="display:none" >Doe ik iets verkeert? Want ik heb online gekeken maar niemand weet wat ik verkeert doe ik heb geprobeerd me site op een free host te zetten maar die images kun je niet zien echt heel raar dus als je meer nodig hebt kunt je in me oudere post kijken daar heb ik all de code gepaste
JP Romijn
Gebruiker
- Lid geworden
- 11 dec 2007
- Berichten
- 228
Misschien wanneer je
wijzigt in
?
Wanneer plaatjes lokaal zichtbaar zijn, maar online niet, kan dat liggen aan absolute paden in de src.
HTML:
<div id="container" style="display:none" >wijzigt in
HTML:
<div id="container" style="display:none;overflow:hidden" >Wanneer plaatjes lokaal zichtbaar zijn, maar online niet, kan dat liggen aan absolute paden in de src.
Ik heb dat gedaan en nog steeds blijft het zo! Deze video is wat beter:
[video=youtube;BbUjIw84GrA]http://www.Youtube.com/watch?V=BbUjIw84GrA[/video]
Kijk in fullscreen.
En ik heb alles goed bekeken en geen src is verkeert dus wat kan het zijn?
[video=youtube;BbUjIw84GrA]http://www.Youtube.com/watch?V=BbUjIw84GrA[/video]
Kijk in fullscreen.
En ik heb alles goed bekeken en geen src is verkeert dus wat kan het zijn?
Laatst bewerkt:
- Status
