• HTML
  • CSS
  • JS

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과

2018-12-21 917

설명

  • 카카오톡 링크

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과입니다~!

※참조
[다음페이지] / [이전페이지] 를 눌렀을때만 작동합니다~!

해당 페이지로 접속하시면 확인 할 수 있습니다

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript">
	$(document).ready(function(){ 
		local_menu = typeof(localStorage['pager']) == undefined ? "undefined" : localStorage['pager'];
		if(local_menu == "true") {
			localStorage['pager'] = false;
			$(".view_bg").addClass("animate").removeClass("on");
		} else {
			$(".view_bg").removeClass("on");
		}

		$(".center_position a.link_a").on("click", function(e) {
			e.preventDefault();
			var link = $(this).attr('href');
			localStorage['pager'] = true;
			$(".view_bg").addClass("on animate");
			setTimeout(function() {
				location.href = link;
			},1200);
		})
	});
</script>
<style type="text/css">
	.view_bg {position:fixed; left:100%; top:0; width:100%; height:100%; background:#f2849e; z-index:1; }
	.view_bg.animate {-moz-transition: all 1s;  -webkit-transition: all 1s; -ms-transition: all 1s; transition: all 1s; }
	.view_bg.on {left:0}
	.center_position {position:absolute; left: 50%; top:50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
	.center_position span {display:inline-block; width:100%; font-size:5.5vw;}
	.center_position a {display:inline-block; font-size:16px; margin-top:10px}
</style>

<!-- 1번페이지 -->
<div class="view_bg on">
</div>
<div class="center_position">
	<span class="text_span">테스트입니다.</span>
	<a href="/portfolio/portfolio1_1.php" class="link_a">다음페이지</a> / 
	<a href="/page/list/source/">소스창고가기</a>
</div>

<!-- 2번페이지 -->
<div class="view_bg on">
</div>
<div class="center_position">
	<span class="text_span">테스트입니다2.</span>
	<a href="/portfolio/portfolio1.php" class="link_a">다음페이지</a> / 
	<a href="/page/list/source/">소스창고가기</a>
</div>