그누 메인화면에 디자인을 적용 중인데요
https://www.epeople.go.kr/jsp/user/UserMain.jsp
이 국민신문고 처럼 나타나지 않은 화면은 숨겼다가 스크롤이 내려가면서 나타나는 효과를 어떻게 구현해야 하는지 좀 문의드립니다.
Copy
$(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개
채택된 답변
+20 포인트
2018-01-02 (화) 23:35:27
css 부분은 미리 정의를 해놓으시고
화면위에서 어느정도 스크롤 되었을때 이벤트를 나타나게 하면됩니다.
당연히 @media 를 이용해서 화면 크기나 구조에 따라 나타나게될 객체를 조절해줘야겠죠.
Copy
$(window).scroll(function(){
if($(this).scrollTop() > 200 ) {
$(".클래스명").css("display","block");
}
})답변을 작성하려면 로그인이 필요합니다.