Scrolling effect

Fermé

don1design Messages postés 72 Date d'inscription vendredi 4 juin 2010 Statut Membre Dernière intervention 4 septembre 2015 - 4 sept. 2015 à 18:16
m1ck3y2 Messages postés 127 Date d'inscription vendredi 9 août 2013 Statut Membre Dernière intervention 15 septembre 2015 - 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:

Scrolling effect
Fondu audio after effect - Forum After Effects
After effect unknown exception - Forum Graphisme
Rvb + alpha grisé after effect ✓ - Forum After Effects
Vider cache after effect - Forum After Effects
Disque dur remplie par After Effects ✓ - Forum After Effects

1 réponse

Réponse 1 / 1

m1ck3y2 Messages postés 127 Date d'inscription vendredi 9 août 2013 Statut Membre Dernière intervention 15 septembre 2015 34
Modifié par m1ck3y2 le 14/09/2015 à 19:31

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

Discussions similaires

Comment annuler un lissage de vitesse ?

Fichier cache After Effect

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

Acheter définitivement After Effects?

After Effect Inverser une vidéo.