Scrolling effect

don1design Messages postés 72 Date d'inscription Statut Membre Dernière intervention -
m1ck3y2 Messages postés 127 Date d'inscription Statut Membre Dernière intervention - 14 sept. 2015 à 19:21

Bonjour tout le monde
Je suit en train de creer un One Page Site
J'aimerais avoir le scrolling quil ya sur se site https://www.typeform.com/
comment pourrais-je integrer ce scrolling dans mon One Page Site

voici le code de mon site



<!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>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link {	color: white; text-decoration:none}
a:visited {	color: white; text-decoration:none}
a:hover {	color: red; text-decoration:underline}
a:active {	color: red; text-decoration:underline}

.style1 {
	border-bottom-width: 0px;
	background-color: #000000;
	text-align: center;
	top:middle;
	color:white;
	height: 100vh;
	font-size: x-large;
}

.Style_Home {
	border-width: 0px;
	background-color: #000000;
	text-align: center;
	color: white;
	font-size: x-large;
	position: fixed;
	width: 100%;
	font-weight: bold;
}

.Style_Bookmark {
	border-width: 0px;
	background-color: #000000;
	text-align: center;
	color: black;
	font-size: x-large;
	width: 100%;
	font-weight: bold;
}

.Style_Footer {
	border-width: 0px;
	background-color: #000000;
	text-align: center;
	color: white;
	font-size: x-large;
	width: 100%;
	font-weight: bold;
	position: fixed;
    bottom: 0;
}

.Style_Footer2 {
	border-width: 0px;
	background-color: #000000;
	text-align: center;
	color: white;
	font-size: x-large;
	font-weight: bold;
	width: 100%;
	font-weight: bold;
	position: relative;
    bottom: 0;
}

.style2 {
	border-style: none;
	border-color: inherit;
	border-width: 0px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('Images/D1D_Background.png');
	background-size: % 100% ;
	text-align: center;
	color: black;
	height: 100vh;
	font-size: x-large;
}
.Style_Whole_Page {
	margin: 0px;
}

</style>

</head>

<body class="Style_Whole_Page" >
<table style="width: 100%" cellspacing="0" cellpadding="0" align="center" border="0">
	<!-- MSTableType="layout" -->
	<tr>
		<td class="Style_Home" valign="top">
		<section>
		<strong>
		<a href="#Home">Home</a>
		  -  
		<a href="#About_Us">About Us</a>		
		  -  
		<a href="#Gallery">Gallery</a>
		  - 		 
		<a href="#Reviews">Reviews</a>
		  -  
		<a href="#Contact_Us">Contact Us</a>
		</strong>
		</section>
		</td>	
	</tr>
	
	<tr>
		<td class="Style_Bookmark" valign="top">
		<a name="Home"></a>
		<strong>
		Home
		</strong>
		</td>
	</tr>
	<tr>	
		<td class="style2">
		<section>
		... Home ...</section></td>
	</tr>
	
	<tr>
		<td class="Style_Bookmark" valign="top">
		<a name="About_Us"></a>
		<strong>
		About_Us
		</strong>
		</td>
	</tr>
	<tr>
		<td class="style1">
		... About Us ...</td>
	</tr>
	
	<tr>
		<td class="Style_Bookmark" valign="top">
		<a name="Gallery"></a>
		<strong>
		Gallerystrong
		</strong>
		</td>
	</tr>
	<tr>
		<td class="style2">
		... Gallery ...</td>
	</tr>
	
	<tr>
		<td class="Style_Bookmark" valign="top">
		<a name="Reviews"><strong></strong></a>
		Reviews<strong>
		</strong>
		</td>
	</tr>
	<tr>
		<td class="style1">
		... Reviews ...</td>
	</tr>
	
	<tr>
		<td class="Style_Bookmark" valign="top">
		<a name="Contact_Us"><strong></strong></a>
		Contact Us<strong>
		</strong>
		</td>
	</tr>
	<tr>
		<td class="style2">
		... Contact Us ..<br />
		</td>
	</tr>
	
	<tr>
		<td class="Style_Footer" valign="top">
		<img alt="Scroll_Dwon" src="Images/Arrow_White.gif" width="30" height="30" onmouseover="this.src='Images/Arrow_Red.gif'" onmouseout="this.src='Images/Arrow_White.gif'"/></td>
	</tr>
	
	<tr>
		<td class="Style_Footer2" valign="top">... <span lang="FR-HT">©</span> Copyright 2015 ...</td>
	</tr>


</table>
</body>
</html>

A voir également:

1 réponse

Réponse 1 / 1

m1ck3y2 Messages postés 127 Date d'inscription Statut Membre Dernière intervention 34

Salut,
Tu peux faire facilement ce que tu veux faire via JQuery.
Et voila... http://codepen.io/anon/pen/XmXMRo

Discussions similaires

Latence au démarrage (avant et pendant bios) sur pc neuf

Fichier cache After Effect

After Effect Inverser une vidéo.

Gestion de la mémoire cache de média et de disque sur After Effects

Disque dur remplie par After Effects

Votre réponse

Discussions similaires