web/transition-the-end-etc.html
author veltr
Tue, 05 Feb 2013 18:41:29 +0100
changeset 118 124f7745a3d6
parent 114 d0d417052d8f
child 124 8d2376eb825c
permissions -rw-r--r--
Pause on lightbox and minor corrections

<!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="MEMO PROD présente THE END, ETC. Une coproduction FRANCE TÉLÉVISIONS - MEMO PROD avec la participation du CENTRE NATIONAL DU CINÉMA ET DE L’IMAGE ANIMÉE. Un projet écrit et réalisé par LAETITIA MASSON">

		<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="theend/prolonger">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>