web/transition-the-end-etc.html
author Edwin Razafimahatratra <edwin@robotalismsoft.com>
Thu, 24 Jan 2013 16:30:41 +0100
changeset 103 be6c1f9cc258
parent 95 fde72f8d0ed0
child 104 9b3717a70556
permissions -rw-r--r--
resync

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
		
		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">

		<link rel="icon" href="static/res/img/favicon.ico" />		

		<!-- Mobile Specific Metas -->		
		<meta name="viewport" content="user-scalable=no">
		<!--
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
		-->

		<!-- Test Smartphone  -->
	    <script src="static/res/js/incdetectmobile.js"></script>        
		<script>
			if (IsSmartphone()) { location.href = "mindex.html"; }	
		</script>
		<!-- Metanav FranceTV 	-->
		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>

		<link rel="stylesheet" href="static/res/css/style_1024.css" />

	</head>
	<body>
		<!-- div content - site takes the full height of browser -->			
		<div id="content" class="full_hightScreen">
			
			<!--Part 1 - opacity -->
			<section id="theEnd" class="box_transparance">
				<!--this div empty allows the element content_vcentering to be vertically aligned -->
				<div class="strut"></div><!--
				this comment corrects the white-space (display: inline);
				--><h1>THE END, ETC.</h1>
			</section>
			<!--/Part 1 -->
			
			<!--Part 2 -->	
			<!--this div empty allows the element content_vcentering to be vertically aligned -->
			<section  id="transition" class="full_hightScreen">
				<div class="strut"></div><!--
				this comment corrects the white-space (display: inline);
				--><div id="bg_img" class="fullScreen_vcentering">
		    		<img id="bgimage" alt="The End, etc." src="" />
				</div>	
			
				<div id="transitionTxt" class="positionAbs">
					<!--this div empty allows the element content_vcentering to be vertically aligned -->
					<div class="strut"></div><!--
					this comment corrects the white-space (display: inline);
					--><div class="fullScreen_vcentering white big_txt">
						<p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
						<p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
						<p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
						<p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
						<p><a href="credits-the-end-etc.html">Crédits</a></p>
					</div>
				</div>
			</section>
			<!--/Part 2 -->	
		</div>

		<!-- JavaScript -->
        <script src="static/res/js/jquery-1.8.2.min.js"></script>        		
        <script>
        	var r = Math.floor(Math.random()*3);
        	if (r == 0) {        		
				$("#bgimage").attr("src", "static/res/img/transitionChoix1.jpg");
        	} else if (r == 1) {        		
				$("#bgimage").attr("src", "static/res/img/transitionChoix2.jpg");
        	} else {
				$("#bgimage").attr("src", "static/res/img/transitionChoix3.jpg");
        	}

            $(function() {
				setTimeout(function() {
					$("#theEnd").addClass("display");
					$("#transition").css({"opacity" : 0});
					$("#transition").animate({opacity: 1}, 2000);					
				}, 2000);
            });
        </script>						
	
	</body>
</html>