move unlock img
This commit is contained in:
parent
432f20783f
commit
57e90f4289
|
|
@ -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) {
|
||||
|
||||
@media all and (min-width: 1300px){
|
||||
|
||||
#hand{
|
||||
#hand {
|
||||
top: 15vh;
|
||||
}
|
||||
#main_title{
|
||||
top: 10vh;
|
||||
|
||||
#main_title {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue