퍼블리싱 질문 하나만 드리겠습니다 ㅠㅠ
본문
그누 메인화면에 디자인을 적용 중인데요
https://www.epeople.go.kr/jsp/user/UserMain.jsp
이 국민신문고 처럼 나타나지 않은 화면은 숨겼다가 스크롤이 내려가면서 나타나는 효과를 어떻게 구현해야 하는지 좀 문의드립니다.
$(window).scroll(function(){ var value = $(this).scrollTop();
if(value > 500){
$(".portText").css("display","block"); $("#portfolio").addClass("animated fadeIn"); $("#portfolio").css("background-image","url(http://ww2.mynewsletter.co.kr/testws/gear3.png)"); }
else if(value < 300){ $(".portText").css("display","none"); $("#portfolio").removeClass("animated fadeIn"); $("#portfolio").css("background-image","none"); }
if(value > 1400){ $(".aboutText").css("display","block"); $(".p1").css("display","block"); $("#about").addClass("animated fadeIn"); $("#about").css("background-image","url(http://ww2.mynewsletter.co.kr/testws/about.jpg)"); }
else if (value < 1200) { $(".aboutText").css("display","none"); $("#about").removeClass("animated fadeIn"); $("#about").addClass("animated fade"); $(".p1").css("display","none"); } ...
이렇게 칫수를 따와서 하니까 모니터의 인치수가 달라지면 동작이 많이 달라지더라구요...
이런 경우 어떻게들 구현하시는지 문의드려요 ㅠㅠ
답변 1
css 부분은 미리 정의를 해놓으시고
화면위에서 어느정도 스크롤 되었을때 이벤트를 나타나게 하면됩니다.
당연히 @media 를 이용해서 화면 크기나 구조에 따라 나타나게될 객체를 조절해줘야겠죠.
$(window).scroll(function(){
if($(this).scrollTop() > 200 ) {
$(".클래스명").css("display","block");
}
})
답변을 작성하시기 전에 로그인 해주세요.
