move unlock img

css/sprint_4.css

@@ -3563,7 +3563,6 @@ a.tag:hover {
 	text-decoration: underline;
 }
 
-
 .title em, .title span, .subtitle em, .subtitle span {
 	font-weight: inherit;
 }
@@ -12514,17 +12513,22 @@ main nav {
 	color: #fff;
 	margin-bottom: 400px;
 }
-
-#open img {
-	height: 20vh;
-	max-width: 90vw;
-	position: relative;
-	top: 0;
+#open .text {
+	position: absolute;
+}
+#unlock , unlock_white{
+	min-height: 20%;
+	width: 100%;
+	position: absolute;
+	top: 0;
+	min-height: 400px;
+}
+#unlock{
+	top: -499px;
 }
-
 #unlock_white {
-	opacity: 0;
-	margin-top: -4em;
+	opacity: 0.2;
+	margin-top: -619px;
 }
 
 #open-handle {
@@ -14065,6 +14069,7 @@ responsive land
 	section#carry .bubbles p :nth-of-type(4) {
 		left: -10%;
 	}
+
 	#we_develop .ar {
 		margin-top: -3rem;
 	}
@@ -14122,6 +14127,7 @@ responsive land
 		padding-right: 6rem;
 		margin-top: 3rem;
 	}
+
 	#full_creative {
 		padding-bottom: 20rem;
 	}
@@ -14145,6 +14151,7 @@ responsive land
 	#full_creative img {
 		margin-bottom: 15rem;
 	}
+
 	#our_team {
 		margin-top: 30rem;
 		padding-bottom: 20rem;
@@ -14167,6 +14174,7 @@ responsive land
 	#our_team .sub-category {
 		margin-bottom: 10rem;
 	}
+
 	#china_achievements {
 		margin-top: 895vw;
 	}
@@ -14201,6 +14209,7 @@ responsive land
 	#china_achievements .title {
 		width: 100%;
 	}
+
 	#baozun_group {
 		margin-top: 605vw;
 	}
@@ -14212,9 +14221,6 @@ responsive land
 	}
 }
 
-
-
-
 @media screen and (max-width: 600px) {
 
 	.burger-menu span,
@@ -14421,16 +14427,54 @@ responsive land
 
 }
 
-
 @media all and (min-width: 1300px) {
 
 	#hand {
 		top: 15vh;
 	}
+
 	#main_title {
-		top: 10vh;
+		top: 18vh;
 		min-height: 35vw;
 		max-width: 1300px;
 		max-height: 500px;
 	}
+
+	.title-container {
+		top: 11vh;
+		position: relative;
+	}
+
+	#unlock_white {
+		/*left: -592px;*/
+		/*top: 119px;*/
+		/*margin-top: 0*/
+	}
+}
+
+@media all and (min-width: 1900px) {
+	#open img {
+		/*margin-left: 33vw;*/
+	}
+
+	#we_develop {
+		height: 150vh;
+	}
+
+	#main_title_container h2 {
+		margin-top: 0;
+	}
+
+	#china_achievements {
+		margin-top: 0;
+		padding: 1rem 172px 0;
+	}
+
+	#full_creative {
+		min-height: 100vh;
+	}
+}
+
+h2, section div{
+	border: solid 2px red;
 }

index.html

@@ -66,10 +66,10 @@
 	</section>
 	<section id="open">
 		<div id="open-handle"></div>
-		<h2 class="text">
+		<div class="text">
 			<img src="/img/unlock.png" alt="Open Sesame" id="unlock">
 			<img src="/img/unlock_white.png" alt="Open Sesame" id="unlock_white">
-		</h2>
+		</div>
 	</section>
 	<section id="content">
 		<h2>

js/animations_custom.js

@@ -26,11 +26,13 @@ function animateCard (id, side) {
 	console.log('animateCard', '#content-' + id + ' .flip-handle', side, offsetCard)
 	const fromObject = {
 		rotateY: rotateYCard,
+		rotateX: '-10deg',
 		// side: offsetCard
 	}
 
 	let toObject = {
 		rotateY: 0,
+		rotateX: 0,
 		duration: 0.2,
 		ease: 'easeInOut',
 		// side: 1,
@@ -81,11 +83,13 @@ if (enable_animations) {
 			}
 		})
 
-	gsap.fromTo('#unlock_white', {
-			opacity: 0,
+	gsap.fromTo('#unlock, #unlock_white', {
+			opacity: 0.1,
+			// scale: 1,
 		},
 		{
 			opacity: 1,
+			// scale: 1.25,
 			scrollTrigger: {
 				trigger: '#unlock_white',
 				delay: 1,
@@ -233,8 +237,7 @@ if (enable_animations) {
 			}
 		})
 
-// TODO faire devenir fixe le background une fois que l'on est passé
-	gsap.fromTo('#open img',
+	gsap.fromTo('#unlock, #unlock_white',
 		{
 			opacity: 0.5,
 			scale: 1,
@@ -246,7 +249,7 @@ if (enable_animations) {
 			bottom: '50vh',
 			scale: 1.5,
 			ease: 'spline',
-			height: '11rem',
+			height: '15rem',
 			scrollTrigger: {
 				trigger: '#open-handle',
 				scrub: 2,