FadeIn bij het scrollen

Status
Niet open voor verdere reacties.
I

iforczz

Gebruiker
Lid geworden
4 jun 2013
Berichten
31
Goedendag allemaal,

ik ben bezig met een website.
Nu ben ik tot een probleem gekomen, ik wil net zoals bij
HTML: 
http://annasafroncik.it/
dat naarmate je verder naar beneden scrollt meer informatie het scherm in komt springen.
Tot nu heb ik een paar stukjes code gejat van deze website (Ja ik weet het heel verkeerd, maar ik ben aan het leren en zet dit niet openbaar tot nu omdat ik er niet uitkom hoelang ik ook zoek...)
ik heb een beetje op google lopen zoeken en kwam bij dit uit
HTML: 
http://jsfiddle.net/mohammadAdil/DFeqH/
, Waar precies staat wat ik wil...
Maar dan, ik pas het aan mijn code toe en het werkt voor geen meter en kom maar niet verder met het uitvogelen van dit allemaal dus ik dacht, ik gebruik het machtige forum voor mijn hulp.

Mijn codes zijn als volgt:

HTML Code:

Code: 
<! DOCTYPE HTML >
<html lang="en">
<head>
	<title>Website Theme HTML 5</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css">
    <link type="text/javascript" language="javascript" href="script.js">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
	<nav class="menu">
    	<div class="menuButtons">
        	<a href="#" style="display:block; position:absolute; left:0px;">Home</a>
            <a href="#" style="display:block; position:absolute; left:80px;">Portfolio</a>
            <a href="#" style="display:block; position:absolute; left:170px;">About</a>
            <a href="#" style="display:block; position:absolute; left:250px;">Contact</a>
        </div>
        <div class="menuSocialButtons">
        	<a href="#"><div class="menuYoutube"></div></a>
            <a href="#"><div class="menuFacebook"></div></a>
            <a href="#"><div class="menuTwitter"></div></a>
        </div>
    </nav>
    <div class="mainImage">
    	<div class="info-circle">
        	<h2>Portfolio Title</h2>
            <p>This is the portfolio info text and this is going to be displayed under the portfolio title.</p>
        </div>
        <div class="info-circle-little"></div>
        <div class="info-circle-mini"></div>
    </div>
<div class="content">
    	<div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        
        
</div>
</body>
</html>

CSS Code:

Code: 
body {
	margin:0;
	padding:0;
	user-select: none;
	-o-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none; 
	-ms-user-select: none;
	font-size:100%;
	font-family:miama, 'lucide';
	background-color:#000;
	color:#E4E4E4; 
}

.hideme {
	opacity:0;
}

.menu {
	width:990px;
	height:47px;
	position:fixed;
	left:50%;
	margin-left:-495px;
	z-index:99;
}

.menuButtons {
	width:846px;
	height:100%;
	background-color:#000;
	border-bottom:3px solid #268EDB;
	float:left;
	
}
.menuButtons a:link, .menuButtons a:visited {
	color:rgba(210,203,192,1.00);
	position:absolute;
	text-decoration:none;
	margin:14px 0 0 32px;
	transition:ease-in-out 0.2s;
}
.menuButtons a:hover, .menuButtons a:active {
	color:#268EDB;
}
.menuSocialButtons {
	width:99px;
	height:100%;
	float:left;
}
.menuYoutube {
	width:45px;
	height:47px;
	position:absolute;
	border-bottom:3px solid #B5100A;
	right:0;
	background-color:#000;
	transition:ease-in-out 0.2s;
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(img/youtube.png) ;
}
.menuYoutube:hover {
	background-color: #B5100A;
}
.menuFacebook {
	width:45px;
	height:47px;
	position:absolute;
	border-bottom:3px solid #46629E;
	right:48px;
	background-color:#000;
	transition:ease-in-out 0.2s;
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(img/facebook.png);
}
.menuFacebook:hover {
	background-color: #46629E;
}
.menuTwitter {
	width:45px;
	height:47px;
	position:absolute;
	border-bottom:3px solid #54AAEA;
	right:96px;
	background-color:#000;
	transition:ease-in-out 0.2s;
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(img/twitter.png);
}
.menuTwitter:hover {
	background-color: #54AAEA;
}
.mainImage {
	width:1526px;
	height:779px;
	max-height:779px;
	z-index:1;
	position:absolute;
	left:50%;
	margin-left:-763px;
	background-image:url(img/bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:bottom;
	border-bottom:3px solid #268EDB;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
}
.info-circle {
	width:230px;
	height:230px;
	border-radius:250px;
	background-color:#000;
	text-align:center;
	padding:10px;
	padding-top:20px;
	position:absolute;
	top:390px;
	left:200px;
	border:3px solid #268EDB;
}
.info-circle h2 {
	font-size:18px;
}
.info-circle p {
	vertical-align:middle;
}
.info-circle-little {
	width:44px;
	height:44px;
	border-radius:250px;
	background-color:#000;
	text-align:center;
	position:absolute;
	top:400px;
	left:405px;
	border:3px solid #268EDB;
}
.info-circle-mini {
	width:24px;
	height:24px;
	border-radius:250px;
	background-color:#000;
	text-align:center;
	position:absolute;
	top:395px;
	left:455px;
	border:3px solid #268EDB;
}
.content {
	width:990px;
	height:2000px;
	position:relative;
	left:50%;
	margin-left:-495px;
	padding-top:779px;
}

#first-show {
	width:100%;
	height:200px;
	background-color:rgba(217,18,21,1.00);
	text-align:center;
	vertical-align:middle;

Javascript Code:

Code: 
$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                 
            }
            
        }); 
    
    });
    
});

In de bijlage voeg ik alle bestanden toe in een zip bestand, hierin is alleen de achtergrond afbeelding gecomprimeerd dus van slechte kwaliteit.



Ik hoop dat iemand mij hier mee kan helpen,

Alvast bedankt.
 

Bijlagen

Laatst bewerkt:
Is dit zo'n lastige vraag dat er niet eens op wordt gereageerd?

Jammer, zou graag willen weten hoe ik het wel aan de praat zou kunnen krijgen maar blijkbaar ben ik niet op het goede forum
 
Olaa iforczz,

Je vergeten bent jquery references toe te voegen in je bestanden. Die staan ook niet in het voorbeeld, maar zijn wel vereist om het werkend te krijgen.
Antwoord of je hier op het juiste forum zit? Dit is wel een hele specifieke vraag.
 
Om het antwoord maar alvast te geven op je volgende vraag.
Vervang je hele index.html door onderstaande code. Bij mij werkt het prima en krijg ik een aantal rode div's met test.

HTML: 
<! DOCTYPE HTML >
<html lang="en">
<head>
	<title>Website Theme HTML 5</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                 
            }
            
        }); 
    
    });
    
});
	</script>
</head>
<body class="body">
	<nav class="menu">
    	<div class="menuButtons">
        	<a href="#" style="display:block; position:absolute; left:0px;">Home</a>
            <a href="#" style="display:block; position:absolute; left:80px;">Portfolio</a>
            <a href="#" style="display:block; position:absolute; left:170px;">About</a>
            <a href="#" style="display:block; position:absolute; left:250px;">Contact</a>
        </div>
        <div class="menuSocialButtons">
        	<a href="#"><div class="menuYoutube"></div></a>
            <a href="#"><div class="menuFacebook"></div></a>
            <a href="#"><div class="menuTwitter"></div></a>
        </div>
    </nav>
    <div class="mainImage">
    	<div class="info-circle">
        	<h2>Portfolio Title</h2>
            <p>This is the portfolio info text and this is going to be displayed under the portfolio title.</p>
        </div>
        <div class="info-circle-little"></div>
        <div class="info-circle-mini"></div>
    </div>
<div class="content">
    	<div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        <div id="first-show" class="hideme">TEST</div>
        
        
</div>
</body>
</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan