스크롤 내릴때 이미지 확대
본문
html
<!-- 이미지 스크롤 CSS -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="flow-container">
<div class="flow-text">
<div class="flow-wrap">You Are a Shield Around me, O LORD</div>
<div class="flow-wrap">You Are a Shield Around me, O LORD</div>
</div>
</div>
자바 스크립트
$(document).ready(function(){
new WOW().init();
$(window).scroll(function(){
let scrollTop = $(window).scrollTop();
scrollTextMove(scrollTop);
if($(window).width() >= 1024){
$(".mask-image-wrapper").removeClass("off");
scrollImgMove(scrollTop);
}else{
$(".mask-image-wrapper").addClass("off");
}
if(scrollTop > 0){
$("header").addClass("on");
}else{
$("header").removeClass("on");
}
});
// 스크롤 시 텍스트 좌측으로 이동
function scrollTextMove(scrollTop){
let scrollTextDefault = $(window).width()*0.9;
$(".scroll-text__wrapper").each(function(){
let target = $(this).find(".scroll-text");
let start = $(this).closest("section");
let offsetSTART = start.offset().top;
let offsetEND = start.next().offset().top;
let scrollTextMoving = (scrollTop - offsetSTART) * 2.25;
if(scrollTop < offsetSTART){
target.css(
{'transform':'translateX('+ scrollTextDefault +'px)'}
);
}else if(scrollTop >= offsetSTART && scrollTop <= offsetEND){
target.css(
{'transform':'translateX('+ (scrollTextDefault - scrollTextMoving) +'px)'}
);
};
});
};
function scrollImgMove(scrollTop){
$(".mask-image-wrapper").each(function(){
let targetLEFT = $(this).find(".mask-image__bar--left");
let targetRIGHT = $(this).find(".mask-image__bar--right");
let offsetSTART = $(this).offset().top - ($(window).height()/2);
let scrollImgMoving = -((scrollTop - offsetSTART) / 8);
if(scrollTop >= offsetSTART){
targetLEFT.css(
{'left' : scrollImgMoving + '%'}
);
targetRIGHT.css(
{'right' : scrollImgMoving + '%'}
);
}else{
targetLEFT.css(
{'left' : '0%'}
);
targetRIGHT.css(
{'right' : '0%'}
);
};
});
}
});
css
.mask-image-wrapper{
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
}
.mask-image-wrapper > div{
position: absolute;
height: 100%;
top: 0;
background: #fff;
width: 18.92%;
}
.mask-image-wrapper > .mask-image__bar--left{
left: 0;
}
.mask-image-wrapper > .mask-image__bar--right{
right: 0;
}
.mask-image-wrapper.off > .mask-image__bar--left{
left: 100%;
}
.mask-image-wrapper.off > .mask-image__bar--right{
right: 100%;
}
section#type04{
padding-top: 1.025rem;
padding-bottom: 1.5rem;
}
section#type04 .mask-image-wrapper{
margin-top: 1.25rem;
height: 37.5rem;
background-image: url(main/page_visual1.jpg);
}
댓글목록
등록된 댓글이 없습니다.
