묻고답하기
jquery scrollTop 오류
2017.02.28 22:11
각 섹션의 높에값에 오면 ani_section함수가 실행되게 하려고 하는데
문제 1 ani_section함수가 계속 반복되서 나옵니다.
문제 2 섹션 함수가 순차적으로 나오게 하고 싶은데 stop().을 animate()앞에 주면 동시에 실행 되요,,
고수님들 부탁 드립니다, 급한거라...ㅠ.ㅠ'
$(function(){
var section1 = 0;
var section2 = 0;
var section3 = 0;
var section4 = 0;
var section6 = 0;
var section7 = 0;
var section8 = 0;
ani_section1();
$(window).scroll(function(){
if($(this).scrollTop() == 0){
ani_section1();
section1 = 1;
//섹션1 포지션 플래그 함수
fixRightBt_Section1();
}
if($(this).scrollTop() >800){
if(section2==0){
ani_section2();
section2 = 1;
}
else {
$('#section_2').stop();
//섹션2 포지션 플래그 함수
fixRightBt_Section2();
}
}
if( $(this).scrollTop() > 1800 ){
if(section3 == 0){
ani_section3();
section3 = 1;
}
else {
$("#section_3").stop();
//섹션3 포지션 플래그 함수
fixRightBt_Section3();
}
}
if( $(this).scrollTop() > 3000 ){
if(section4 == 0){
ani_section4();
section4 = 1;
}
else {
$("#section_4").stop();
//섹션4 포지션 플래그 함수
fixRightBt_Section4();
}
}
if( $(this).scrollTop() > 5000 ){
if(section6 == 0){
ani_section6();
section6 = 1;
}
else {
$("#section_6").stop();
}
}
if( $(this).scrollTop() > 6000 ){
if(section7 == 0){
ani_section7();
section7 = 1;
}
else {
$("#section_7").stop();
}
}
if( $(this).scrollTop() > 7000 ){
if(section8 == 0){
ani_section8();
section8 = 1;
}
else {
$("#section_8").stop();
}
}
});
//jQuery 사용자 함수 시작
//섹션 1
function ani_section1(){
section1=1;
section2=0;
section3=0;
section4=0;
section6=0;
section7=0;
section8=0;
setInterval(logo,3000);
}
//로고 함수
function logo () {
//로고 p
$(".section01_logo_3").animate({opacity:0},0);
$(".section01_logo_3").animate({opacity:1},1000);
$(".section01_logo_3").animate({opacity:1},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:1},5000);
//로고H
$(".section01_logo_4").animate({opacity:0},0);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:1},1000);
$(".section01_logo_4").animate({opacity:1},1000);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:1},5000);
//로고B
$(".section01_logo_5").animate({opacity:0},0);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:1},1000);
$(".section01_logo_5").animate({opacity:1},1000);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:1},5000);
}
//섹션2
function ani_section2(){
section1=0;
section2=1;
section3=0;
section4=0;
section6=0;
section7=0;
section8=0;
$(".section02_title").stop().animate({top:"100px",opacity: 0},0);
$(".section02_title").stop().animate({top:"254px",opacity: 1},2000);
$(".section02_box01").stop().animate({opacity:0,top:'0px'}, 0);
$(".section02_box01").stop().animate({opacity:0,top:'306px'},1500);
$(".section02_box01").stop().animate({opacity:1,top:'306px'},2000);
$(".section02_box02").stop().animate({top:"400px",opacity: 0},0);
$(".section02_box02").stop().animate({top:"400px",opacity: 0},2500);
$(".section02_box02").stop().animate({top:"575px",opacity: 1},2000);
}
//섹션3 서클
function ani_section3(){
section1=0;
section2=0;
section3=1;
section4=0;
section6=0;
section7=0;
section8=0;
$('.first.circle').circleProgress({
value: 0.85,
fill:{gradient: ['#fecccc','#ff5f5f']}
}).on('circle-animation-progress', function(event, progress) {
// $(this).find('strong').html(Math.round(80 * progress) + '<i>%</i>');
});
$('.second.circle').circleProgress({
value: 0.75,
fill:{gradient: ['#fecccc','#ff5f5f']}
}).on('circle-animation-progress', function(event, progress) {
// $(this).find('strong').html(Math.round(80 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.70,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
$('.forth.circle').circleProgress({
value: 0.4,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
$('.fifth.circle').circleProgress({
value: 0.6,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
}
//섹션4
function ani_section4(){
section1=0;
section2=0;
section3=0;
section4=1;
section6=0;
section7=0;
section8=0;
$(".section04_txt_01").stop().animate({opacity: 0,left: '800px'},0);
$(".section04_txt_01").stop().animate({opacity: 1,left: '1020px'},2000);
$(".section04_txt_02").stop().animate({opacity: 0},0);
$(".section04_txt_02").stop().animate({opacity: 0},4000);
$(".section04_txt_02").stop().animate({opacity: 1},1000);
$(".section04_txt_03").stop().animate({opacity: 0},8000);
$(".section04_txt_03").stop().animate({opacity: 1},1000);
}
//섹션6
function ani_section6(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=1;
section7=0;
section8=0;
$(".section06_title_05").animate({ opacity: 0},0);
$(".section06_title_05").animate({ opacity: 0},3000);
$(".section06_title_05").animate({opacity: 1},2000);
$(".computer01").animate({left: "-500px", opacity: 0},0);
$(".computer01").animate({left: "0px", opacity: 1},1500);
$(".section06_tap").animate({left: "-50px", opacity: 0},0);
$(".section06_tap").animate({left: "-50px", opacity: 0},1500);
$(".section06_tap").animate({left: "724px", opacity: 1},3000);
$(".section06_txt").animate({opacity: 0},0);
$(".section06_txt").animate({opacity: 0},2000);
$(".section06_txt").animate({opacity: 1},2000);
}
//섹션7
function ani_section7(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=0;
section7=1;
section8=0;
$(".section07_title_06").animate({opacity:0},0);
$(".section07_title_06").animate({opacity:0},2000);
$(".section07_title_06").animate({opacity: 1},2000);
$(".phone01").animate({right: "-500px", opacity: 0},0);
$(".phone01").animate({right: "0px", opacity: 1},1500);
$(".section07_tap").animate({right: "-50px", opacity: 0},0);
$(".section07_tap").animate({right: "-50px", opacity: 0},1500);
$(".section07_tap").animate({right: "566px", opacity: 1},3000);
$(".section07_txt").animate({opacity:0},0);
$(".section07_txt").animate({opacity:0},4500);
$(".section07_txt").animate({opacity: 1},2000);
}
//섹션8
function ani_section8(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=0;
section7=0;
section8=1;
$(".section07_title_07").animate({opacity:0},0);
$(".section07_title_07").animate({opacity:0},2000);
$(".section07_title_07").animate({opacity: 1},2000);
$(".macbook01").animate({left: "-500px", opacity: 0},0);
$(".macbook01").animate({left: "0px", opacity: 1},1500);
$(".section08_tap").animate({left: "-50px", opacity: 0},0);
$(".section08_tap").animate({left: "-50px", opacity: 0},1500);
$(".section08_tap").animate({left: "548px", opacity: 1},3000);
$(".section08_txt").animate({opacity:0},0);
$(".section08_txt").animate({opacity:0},4500);
$(".section08_txt").animate({opacity: 1},2000);
}
});