0
저는 JavaScript가별로 좋지 않습니다.하지만이 애니메이션을 수행하여 작업을 완료해야합니다.TimelineMax 및 ScrollMagic 플러그인을 사용하여이 애니메이션을 어떻게 실현할 수 있습니까?
on this website과 같은 애니메이션을 구현해야합니다. blue block 칫솔과 휴대기로 "세상을 만드는 이유"를 확인하십시오. 이를 구현하기 위해 저자는 TimelineMax과 scrollMagic이라는 플러그인을 사용합니다.
스크롤을 사용하여 블록을 수정할 수 있었지만 다음에 무엇을해야할지 모르겠다. #slider 블록에 대한 스크롤은 어떻게합니까?
Codepan에 대한 링크.
$(document).ready(function() {
// scrollmagic
(function($) {
var wh = window.innerHeight,
$zone = $('#owlZone'),
$slider = $('#slider'),
$itemOne = $('#itemOne'),
$itemTwo = $('#itemTwo'),
$itemThree = $('#itemThree');
var ScreenHeight = $(window).height();
var ctrl = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
tweenChanges: true,
duration: ScreenHeight
}
});
//create scene
$("#owlZone").each(function(index){
new ScrollMagic.Scene({
triggerElement: this
})
.setPin(this)
.addTo(ctrl);
});
// animate phone
var SMController1 = new ScrollMagic.Controller();
// var tlm = new TimelineMax();
// tlm.fromTo('#itemOne', 1, {x:0, y:0}, { x:0, y:0 })
// .fromTo('#itemTwo', 2, {x:"0", y:0}, { x:0, y:0 })
// .fromTo('#itemThree', 5, {x:0, y:0}, { x:0, y:0 })
// .to('.toushbrush-slider', 3, {opacity:0});
// .fromTo('#slider', 2, {}, {});
// .to('#slider', 2, {rotation:90, left:'50%'});
var scene = new ScrollMagic.Scene({
triggerElement: "#owlZone",
duration: 1500,
triggerHook: 0.2
})
// .setTween(tlm)
.addIndicators()
.setPin('#slider')
.addTo(SMController1);
}) (jQuery);
});.section-block-three {
background: linear-gradient(to bottom right, #02050b 0, #0f204b 50%, #1c3b8b 100%);
background-color: #1c3b8b;
padding: 150px 0 100px;
position: relative;
}
.mob-app__head h4 {
font-size: 50px;
font-family: "centrale_sans_light";
position: relative;
color: #fff;
font-weight: 300;
}
.mob-app__head p {
margin: 20px 0;
color: #fff;
font-size: 30px;
line-height: 35px;
}
.mob-app__content p {
line-height: 23px;
color: #fff;
font-size: 20px;
}
.mob-app__image {
background-color: lime;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 135px;
height: 549px;
}
.mob-app__store {
margin-top: 100px; }
.mob-app__store .app-store, .mob-app__store .google-play {
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
width: 150px;
height: 44px;
display: inline-block;
}
.mob-app__store .app-store {
background-color: white;
margin-right: 20px;
}
.mob-app__store .google-play {
background-color: purple;
}
.toushbrush-slider {
overflow: hidden;
height: 350px;
margin: 100px 0 0 60px;
}
.toushbrush-slider__images {
position: relative;
}
.toushbrush-slider__images .images__image-one, .toushbrush-slider__images .images__image-two, .toushbrush-slider__images .images__image-three {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 175px;
height: 350px;
display: inline-block;
}
.toushbrush-slider__images .images__image-one {
background-color: red;
}
.toushbrush-slider__images .images__image-two {
background-color: green;
}
.toushbrush-slider__images .images__image-three {
background-color: yellow;
}
.toushbrush-slider__images .images__content {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 50px 0 0 20px;
}
.toushbrush-slider__images .images__content p {
color: #fff;
line-height: 20px;
font-size: 16px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-block-three" id="owlZone">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-5">
\t \t \t \t \t <div class="mob-app__head">
\t \t \t \t \t \t <h4>this is text<span></span></h4>
\t \t \t \t \t \t <p><span>this is text</span> this is text</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="mob-app__content">
\t \t \t \t \t \t <p>this is text</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="mob-app__store">
\t \t \t \t \t \t <a href="#" class="app-store" alt="App Store"></a>
\t \t \t \t \t \t <a href="#" class="google-play" alt="Google Play"></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-1">
\t \t \t \t \t <div class="mob-app__image"></div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <div class="toushbrush-slider" id="slider">
\t \t \t \t \t \t <div class="toushbrush-slider__images" id="itemOne">
\t \t \t \t \t \t \t <div class="images__image-one"></div>
\t \t \t \t \t \t \t <div class="images__content">
\t \t \t \t \t \t \t \t <p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t <div class="toushbrush-slider__images" id="itemTwo">
\t \t \t \t \t \t <div class="images__image-two"></div>
\t \t \t \t \t \t <div class="images__content">
\t \t \t \t \t \t \t <p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="toushbrush-slider__images" id="itemThree">
\t \t \t \t \t \t <div class="images__image-three"></div>
\t \t \t \t \t \t <div class="images__content">
\t \t \t \t \t \t \t <p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
</section>
답변 해 주셔서 감사합니다. – Richard