html
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
<div class="box5">
<div class="progress-wrap">
<div class="inline-block"><span>포토샵</span><button class="photo-skill">확인</button></div>
<div class="progress">
<div class="bar-photo" id="bar"><span>10%</span></div>
</div>
</div>
</div>
<div class="box6">박스6</div>
<div class="box7">박스7</div>
css
.box1,.box2,.box3,.box4,.box5,.box6,.box7{
width:100%;
height:300px;
position:relative;
overflow:hidden;
background-repeat:no-repeat;
background-position:0 0;
background-size:cover;
}
.box2{
background-image:url(images/back2.jpg);
}
.box4{
background-image:url(images/back3.jpg);
}
.box6{
background-image:url(images/slide2.jpg);
background-position:-200px 0;
background-size:200%;
}
/* 프로그래스 바 */
.progress-wrap{
width:850px;
height:50px;
margin:auto;
margin-top:20px;
}
.inline-block{
width:150px;
height:100%;
display:inline-block;
}
.inline-block>span{
display:inline-block;
}
.photo-skill{
margin-left:10px;
background:black;
color:white;
border:none;
padding:10px;
}
.progress{
width:500px;
height:50px;
border:1px solid black;
margin:auto;
box-sizing:border-box;
display:inline-block;
vertical-align:middle;
border-radius:20px;
overflow:hidden;
position:relative;
}
.bar-photo{
width:10%;
height:100%;
background:red;
padding:0;
box-sizing:border-box;
text-indent:5px;
color:white;
}
.bar-photo span{
position:absolute; top:15px;
left:15px;
}
js
<script>
$(document).ready(function(){
var pos1=0;
var last=0;
var box2Top=$(".box2").offset().top;
var pos2=0;
var box4Top=$(".box4").offset().top;
var pos3=0;
var box6Top=$(".box6").offset().top;
$(window).scroll(function(){
var winScroll=$(window).scrollTop();
if(box2Top<winScroll+500 && box2Top+300>winScroll+200){
if(winScroll>=last){
console.log("스크롤 내리고 있음");
pos1=pos1+5
$(".box2").css({
"background-position":"0 "+(-pos1)+"px"
});
}else{
console.log("스크롤 올리고 있음");
pos1=pos1-5;
$(".box2").css({
"background-position":"0 "+(-pos1)+"px"
});
}
last=winScroll;
}
if(box4Top<winScroll+400 && box4Top+300>winScroll+400){
if(winScroll>=last){
console.log("스크롤 내리고 있음");
pos2=pos2+5
$(".box4").css({
"background-position":"0 "+(-pos2)+"px"
});
}else{
console.log("스크롤 올리고 있음");
pos2=pos2-5;
$(".box4").css({
"background-position":"0 "+(-pos2)+"px"
});
}
last=winScroll;
}
if(box6Top<winScroll+400 && box6Top+300>winScroll+400){
if(winScroll>=last){
console.log("스크롤 내리고 있음");
pos3=pos3+5
$(".box6").css({
"background-position":(-200+pos3)+"px 0"
});
}else{
console.log("스크롤 올리고 있음");
pos3=pos3-5;
$(".box6").css({
"background-position":(-200+pos3)+"px 0"
});
}
last=winScroll;
}
});
//프로그래스 바
var count=10;
function movephoto(){
$(".bar-photo").stop().animate({
width:"70%"
},700);
var barValue=$(".bar-photo span").text();
var id=setInterval(frame,10);
function frame(){
console.log("카운트 : "+count)
if(count>=70){
clearInterval(id);
}else{
count++;
$(".bar-photo span").text(count+"%");
}
}
}
var box5Top=$(".box5").offset().top;
$(window).scroll(function(){
var winScroll=$(window).scrollTop();
if(box5Top<=winScroll+200){
movephoto();
}
});
});
</script>