Script gezocht (zonder naam)

Status
Niet open voor verdere reacties.
O

olaf88

Gebruiker
Lid geworden
29 dec 2010
Berichten
131
hallooo,

zoals jullie al weten zoek ik een script met de volgende eigenschappen:
Ik wil als zo op mijn site komen heel de site donker is en dit er gewoon in het midden op staat.
Dan als ze op de schakelaar klikken dat de schakelaar verdwijnt en de site stilletjes lichter wordt.
Is dit mogelijk of wil iemand zich hier eens met bezig houden.Hieronder paar screens zoals ik het zou willen hebben.

Dus zo opent de site ongeveer:
indexmenu.jpg
Maar dan met die schakelaar erop.

en dat de site dan lichter en lichter wordt tot dat ie zo is:
acht.JPG

De site is : http://www.l-elektro.be nu met die schakelaar maar is gewoon heel lelijk

ik hoop dat jullie me kunnen helpen
olafkee
 
Het beste advies dat ik je kan geven is doe het niet!

Dit soort intro-pagina's zijn een jaar of 10 geleden al uit de mode geraakt omdat het a) een extra handeling vergt van de bezoeker en b) van grote invloed is (negatief) op de vindbaarheid van je site in Google.
Voor Google (en alle andere zoekmachines) is de beginpagina van je site de belangrijkste pagina, als hier niks meer op staat dan een plaatje met 'klik hier' dan scoor je niet veel punten.
 
Berkery zei:
Dan ben je dom bezig, maar je kan eventueel met Flash aan de slag, of met jQuery: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
Klik om te vergroten...
Daar is jQuery of Flash niet voor nodig hoor, kan ook met alleen eigen javascript. Maar ik ben het met je eens dat het een erg slecht idee is dat alleen maar klanten weg zal jagen.

Waarom zou je je bezoekers een keer extra laten klikken én laten wachten voordat ze je producten kunnen zien? Een beetje alsof je bij het binnengaan van een winkel een papier zak over je hoof krijgt die je vervolgens langzaam op mag tillen. Kijk, als het om een kunstzinnige site (o.i.d.) ging kon ik me er nog wat bij voorstellen maar jullie verkopen schakelaars e.d., je wilt toch dat je klanten daar zo snel mogelijk naartoe kunnen?
 
Heb je Barkery's link niet gelezen? Daarmee kun je doen wat je nu doet.

Maar goed, het is onzinnig mensen naar een andere pagina door te sturen wanneer dat niet nodig is. Wat je ook kunt doen is van wat nu index2 is gewoon de voorpagina maken en dan in je <head> het volgende script zetten:
Code: 
<script>

var duur = 2000; //tijd die het uitvagen in miliseconden kost
var afbeelding = "url.png"; //link naar de afbeelding in het midden

var div = document.createElement("div");
document.getElementsByTagName("html")[0].appendChild(div);

div.style.width = "100%";
div.style.height = "100%";
div.style.background = "rgba(0, 0, 0, 0.8) url("+afbeelding+") no-repeat center center";
div.style.opacity = "1";
div.style.position = "absolute";
div.style.top = "0";

div.onclick = verdwijn;

var interval = duur / 100;

function verdwijn(){
    if(div.style.opacity > 0){
        var nieuw = div.style.opacity -0.05;
        div.style.opacity = nieuw;
        setTimeout(verdwijn, interval);
    }
    if(div.style.opacity == 0){
        document.getElementsByTagName("body")[0].removeChild(div);
    }
}
</script>
Perfect is het niet, mensen met IE8 (of ouder) zullen alleen het plaatje zien en niet de zwarte achtergrond. Zorg er voor dat de afbeelding al de grote heeft die je wilt hebben. De afbeelding die je nu gebruikt is veel en veel te groot. Vergeet niet dat een plaatje kleiner maken met HTML/CSS niet betekent dat de download ook kleiner wordt.
 
Hij wordt kleiner getoond, da's niet hetzelfde. In de HTML staat dat hij maar 330px hoog en breed mag zijn dus laat de browser hem ook zo zien, maar ondertussen is wat je download gewoon de hele (grote) afbeelding. Hetzelfde geldt trouwens voor de schakelaars naast je menu.
 
Hebben jullie geen datalimieten meer in België? Het probleem is dat je mensen veel meer laat downloaden dan nodig is, op een breedbandverbinding zonder datalimiet is dat niet zo'n groot probleem maar met een datalimiet of op een (langzaam) mobiel netwerk is het gewoon erg vervelend, maar goed, je klanten vervelen heb je duidelijk geen problemen mee :p

olaf88 zei:
nu werkt ie maar staat er geen schakelaar op ;(
Klik om te vergroten...
Heb je wel een link naar een afbeelding in de code gezet?
 
dus, ik moet de afbelding met photoshop kleiner maken ? en niet in de html
 
olaf88 zei:
ergh, waar moet ik de url zetten ? (*bloos*)
Klik om te vergroten...
Het adres van het plaatje dat je in het midden wilt hebben, wat dat is weet ik ook niet.

olaf88 zei:
dus, ik moet de afbelding met photoshop kleiner maken ? en niet in de html
Klik om te vergroten...
jah, al maakt het natuurlijk niet uit of je photoshop, paint of iets anders gebruikt, zolang je de afbeelding maar verkleint voordat je hem upload.
 
div.style.background = "rgba(0, 0, 0, 0.8) url("+afbeelding+") no-repeat center center";

waardat "afbeelding" staat moet ik daar de url zetten ?
 
EDIT: Mooi zo. Hm... ik voel me een beetje vies :p

Nee, Dat moet bij
Code: 
var afbeelding = "url.png"; //link naar de afbeelding in het midden
Waar url.png staat moet je het adres van jouw afbeelding zetten (had ik speciaal daarom bovenaan de code gezet)
 
Hoi olaf88,
Het werkt zoals ik het wou
Klik om te vergroten...
Ik ben wel nieuwsgierg naar wat het nu geworden is.

Kunnen we het resultaat ergens bewonderen? Linkje?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan