스크롤에 반응해서 움직이게 하는 애니매이션 관련
본문
홈페이지를 들어가보시면 아래로 움직이게 하는 애니매이션까지는 구현이 되었으나 다시 스크롤을 올려도
되돌아가지않아 스크롤을 올렸을때 캐릭터가 되돌아가는걸 구현중에 생긴 문제입니다.
$(document).ready(function(){
var s_top_1 = $(".main_street_visual").offset().top-210; //스크롤 위치 1
var s_top_2 = $(".main_street_visual").offset().top+455;
var s_top_3 = $(".main_street_visual").offset().top+1131;
var s_top_4 = $(".main_street_visual").offset().top+2138;
var s_top_5 = $(".main_street_visual").offset().top+2612;
var _target = $("p.visual_contents.queen") //인형
var chk = 0; // 스크롤 모션 상태 값
$(window).scroll(function(){
var scroll_H = $(document).scrollTop(); //현재 스크롤 탑
//console.log(scroll_H); //현재 스크롤탑 값 콘솔확인 가능
if(scroll_H >= s_top_1){
if (chk==0){
TweenMax.to(_target, 0.1, {top:"-210px", left:"374px", onComplete:allComplete});
TweenMax.to(_target, 0.5, {top:"80px", delay:0.1});
TweenMax.to(_target, 0.5, {left:"-120px", delay:0.6});
TweenMax.to(_target, 0.5, {top:"455px", delay:1.1});
function allComplete(){
console.log('1단계');
chk=1;
}
}
}
if(scroll_H >= s_top_2){
if (chk==1){
TweenMax.to(_target, 0.1, {top:"455px", left:"-120px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"595px", delay:0.1});
TweenMax.to(_target,0.5, {left:"570px", delay:0.6});
TweenMax.to(_target,0.5, {top:"795px", delay:1.1});
TweenMax.to(_target,0.5, {left:"820px", delay:1.6});
TweenMax.to(_target,0.5, {top:"1131px", delay:2.1});
function allComplete(){
console.log('2단계');
chk=2;
}
}
}
if(scroll_H >= s_top_3){
if (chk==2){
TweenMax.to(_target, 0.1, {top:"1131px", left:"820px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"1301px", delay:0.1});
TweenMax.to(_target,0.5, {left:"745px", delay:0.6});
TweenMax.to(_target,0.5, {top:"1568px", delay:1.1});
TweenMax.to(_target,0.5, {left:"23px", delay:1.6});
TweenMax.to(_target,0.5, {top:"2138px", delay:2.1});
function allComplete(){
console.log('3단계');
chk=3;
}
}
}
if(scroll_H >= s_top_4){
if (chk==3){
TweenMax.to(_target, 0.1, {top:"2138px", left:"23px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"2405px", delay:0.1});
TweenMax.to(_target,0.5, {left:"565px", delay:0.6});
TweenMax.to(_target,0.5, {top:"2612px", delay:1.1});
TweenMax.to(_target,0.5, {left:"705px", delay:1.6});
function allComplete(){
console.log('4단계');
chk=4;
}
}
}
if(scroll_H >= s_top_5){
if (chk==4){
TweenMax.to(_target, 0.1, {top:"2612px", left:"705px", onComplete:allComplete});
TweenMax.to(_target,0.5, {left:"1095px", delay:0.1});
TweenMax.to(_target,1.0, {top:"3625px", delay:0.6});
TweenMax.to(_target,0.5, {left:"765px", delay:1.6});
TweenMax.to(_target,0.5, {top:"3675px", delay:2.1});
TweenMax.to(_target,0.5, {left:"50px", delay:2.6});
function allComplete(){
console.log('5단계');
chk=5;
}
}
}
});
});
http://geminio.co.kr/index_move.html
해당페이지처럼 원래의 위치좌표를 대서 다시 올라가게끔 하려고 하는데 스크롤이 조금만 올라갔다 내려도 바로 캐릭터가 움직여서 아래로 내려도 올라가고 위로 내려도 아래로 내려오는 문제점에 봉착했는데 어떻게 진행해야될지 감이 안오네요;;
아래의 소스는 제가 위의 소스를 토대로 수정한 스크립트부분입니다.
시간차를 두고 움직이게 하는 js는 트윈맥스라는것을 응용했습니다.
특정 위치에만 딱 스크롤이 닿았을때 캐릭터가 움직여서 깔끔하게 올라가고 내려가게 하려면
어떻게 작업을 해야될지 알고싶습니다.
$(document).ready(function(){
var s_top_1 = $(".main_street_visual").offset().top-210; //스크롤 위치 1
var s_top_2 = $(".main_street_visual").offset().top+455;
var s_top_3 = $(".main_street_visual").offset().top+1131;
var s_top_4 = $(".main_street_visual").offset().top+2138;
var s_top_5 = $(".main_street_visual").offset().top+2612;
var s_top_6 = $(".main_street_visual").offset().top-510; //스크롤 위치:back 1
var _target = $("p.visual_contents.queen") //인형
var chk = 0; // 스크롤 모션 상태 값
$(window).scroll(function(){
var scroll_H = $(document).scrollTop(); //현재 스크롤 탑
//console.log(scroll_H); //현재 스크롤탑 값 콘솔확인 가능
if(scroll_H >= s_top_1){
if (chk==0){
TweenMax.to(_target, 0.1, {top:"-210px", left:"374px", onComplete:allStop});
TweenMax.to(_target, 0.5, {top:"80px", delay:0.1});
TweenMax.to(_target, 0.5, {left:"-120px", delay:0.6});
TweenMax.to(_target, 0.5, {top:"455px", delay:1.1, onComplete:allComplete});
function allStop(){
console.log('스탑');
chk=100;
}
function allComplete(){
console.log('1단계');
chk=1;
}
}
}
if(scroll_H >= s_top_6){
if (chk==1){
TweenMax.to(_target, 0.1, {top:"455px", left:"-120px", onComplete:allStop});
TweenMax.to(_target, 0.5, {top:"80px", delay:0.1});
TweenMax.to(_target, 0.5, {left:"374px", delay:0.6});
TweenMax.to(_target, 0.5, {top:"-120px", delay:1.1, onComplete:allComplete});
function allStop(){
console.log('스탑');
chk=100;
}
function allComplete(){
console.log('0단계');
chk=0;
}
}
}
if(scroll_H >= s_top_2){
if (chk==1){
TweenMax.to(_target, 0.1, {top:"455px", left:"-120px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"595px", delay:0.1});
TweenMax.to(_target,0.5, {left:"570px", delay:0.6});
TweenMax.to(_target,0.5, {top:"795px", delay:1.1});
TweenMax.to(_target,0.5, {left:"820px", delay:1.6});
TweenMax.to(_target,0.5, {top:"1131px", delay:2.1});
function allComplete(){
console.log('2단계');
chk=2;
}
}
}
if(scroll_H >= s_top_3){
if (chk==2){
TweenMax.to(_target, 0.1, {top:"1131px", left:"820px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"1301px", delay:0.1});
TweenMax.to(_target,0.5, {left:"745px", delay:0.6});
TweenMax.to(_target,0.5, {top:"1568px", delay:1.1});
TweenMax.to(_target,0.5, {left:"23px", delay:1.6});
TweenMax.to(_target,0.5, {top:"2138px", delay:2.1});
function allComplete(){
console.log('3단계');
chk=3;
}
}
}
if(scroll_H >= s_top_4){
if (chk==3){
TweenMax.to(_target, 0.1, {top:"2138px", left:"23px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"2405px", delay:0.1});
TweenMax.to(_target,0.5, {left:"565px", delay:0.6});
TweenMax.to(_target,0.5, {top:"2612px", delay:1.1});
TweenMax.to(_target,0.5, {left:"705px", delay:1.6});
function allComplete(){
console.log('4단계');
chk=4;
}
}
}
if(scroll_H >= s_top_5){
if (chk==4){
TweenMax.to(_target, 0.1, {top:"2612px", left:"705px", onComplete:allComplete});
TweenMax.to(_target,0.5, {left:"1095px", delay:0.1});
TweenMax.to(_target,1.0, {top:"3625px", delay:0.6});
TweenMax.to(_target,0.5, {left:"765px", delay:1.6});
TweenMax.to(_target,0.5, {top:"3675px", delay:2.1});
TweenMax.to(_target,0.5, {left:"50px", delay:2.6});
function allComplete(){
console.log('5단계');
chk=5;
}
}
}
});
});
답변 1
//부그럽게 하는방법은 스크롤검색구간을 각각 만드시는게 좋으시고요
//이동시 캐릭터의 위치는 화면 중간에 있는것이 좋습니다
//현재 위아래 이동을 확인할 변수를 만드시고요
var current_scroll=0; //이전방향
$(document).ready(function(){
var scroll_H = $(document).scrollTop(); //현재 스크롤 탑
//console.log(scroll_H); //현재 스크롤탑 값 콘솔확인 가능
//-------------------------
//위아래 정의
var mode="up";
if(scroll_H > current_scroll){
mode="down";
}
current_scroll=scroll_H;
//-------------------------
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 스크롤 작업 [s] +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var current_scroll=0;
$(document).ready(function(){
var s_top_1 = $(".main_street_visual").offset().top-210; //스크롤 위치 1
var s_top_2 = $(".main_street_visual").offset().top+455;
var s_top_3 = $(".main_street_visual").offset().top+1131;
var s_top_4 = $(".main_street_visual").offset().top+2138;
var s_top_5 = $(".main_street_visual").offset().top+2612;
var _target = $("p.visual_contents.queen") //인형
var chk = 0; // 스크롤 모션 상태 값
$(window).scroll(function(){
var scroll_H = $(document).scrollTop(); //현재 스크롤 탑
//console.log(scroll_H); //현재 스크롤탑 값 콘솔확인 가능
//-------------------------
//위아래 정의
var mode="up";
if(scroll_H > current_scroll){
mode="down";
}
current_scroll=scroll_H;
//-------------------------
if(mode=="down")
{
if(scroll_H >= s_top_1){
if (chk==0){
TweenMax.to(_target, 0.1, {top:"-210px", left:"374px", onComplete:allComplete});
TweenMax.to(_target, 0.5, {top:"80px", delay:0.1});
TweenMax.to(_target, 0.5, {left:"-120px", delay:0.6});
TweenMax.to(_target, 0.5, {top:"455px", delay:1.1});
function allComplete(){
console.log('1단계');
chk=1;
}
}
}
if(scroll_H >= s_top_2){
if (chk==1){
TweenMax.to(_target, 0.1, {top:"455px", left:"-120px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"595px", delay:0.1});
TweenMax.to(_target,0.5, {left:"570px", delay:0.6});
TweenMax.to(_target,0.5, {top:"795px", delay:1.1});
TweenMax.to(_target,0.5, {left:"820px", delay:1.6});
TweenMax.to(_target,0.5, {top:"1131px", delay:2.1});
function allComplete(){
console.log('2단계');
chk=2;
}
}
}
if(scroll_H >= s_top_3){
if (chk==2){
TweenMax.to(_target, 0.1, {top:"1131px", left:"820px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"1301px", delay:0.1});
TweenMax.to(_target,0.5, {left:"745px", delay:0.6});
TweenMax.to(_target,0.5, {top:"1568px", delay:1.1});
TweenMax.to(_target,0.5, {left:"23px", delay:1.6});
TweenMax.to(_target,0.5, {top:"2138px", delay:2.1});
function allComplete(){
console.log('3단계');
chk=3;
}
}
}
if(scroll_H >= s_top_4){
if (chk==3){
TweenMax.to(_target, 0.1, {top:"2138px", left:"23px", onComplete:allComplete});
TweenMax.to(_target,0.5, {top:"2405px", delay:0.1});
TweenMax.to(_target,0.5, {left:"565px", delay:0.6});
TweenMax.to(_target,0.5, {top:"2612px", delay:1.1});
TweenMax.to(_target,0.5, {left:"705px", delay:1.6});
function allComplete(){
console.log('4단계');
chk=4;
}
}
}
if(scroll_H >= s_top_5){
if (chk==4){
TweenMax.to(_target, 0.1, {top:"2612px", left:"705px", onComplete:allComplete});
TweenMax.to(_target,0.5, {left:"1095px", delay:0.1});
TweenMax.to(_target,1.0, {top:"3625px", delay:0.6});
TweenMax.to(_target,0.5, {left:"765px", delay:1.6});
TweenMax.to(_target,0.5, {top:"3675px", delay:2.1});
TweenMax.to(_target,0.5, {left:"50px", delay:2.6});
function allComplete(){
console.log('5단계');
chk=5;
}
}
}
}//다운 완료
else{
//업을 정의한다
if(scroll_H <= s_top_5){
if (chk==5){
//이동
function allComplete(){
console.log('5단계');
chk=4;
}
}
}
if(scroll_H <= s_top_4){
if (chk==4){
//이동
function allComplete(){
console.log('4단계');
chk=3;
}
}
}
if(scroll_H <= s_top_3){
if (chk==3){
//이동
function allComplete(){
console.log('3단계');
chk=2;
}
}
}
if(scroll_H <= s_top_2){
if (chk==2){
//이동
function allComplete(){
console.log('2단계');
chk=1;
}
}
}
if(scroll_H <= s_top_1){
if (chk==1){
//이동
function allComplete(){
console.log('1단계');
chk=0;
}
}
}
}
});
});
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 스크롤 작업 [E] +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
답변을 작성하시기 전에 로그인 해주세요.