[공부]하는 몽씨/javascript

[javascript] slideup 효과로 상단배너 숨기기

2017. 7. 26. 17:00
반응형




[javascript] slideup 효과로 상단배너 숨기기



 홈페이지, 또는 랜딩페이지의 팝업, 배너 외에 맨 위의 상단배너가 눈에 띄일 때가 있습니다. 

클릭하면 배너가 위로 올라가 사라지는 듯한 효과가 구현되는데요, 

(가까운 예로 쿠팡 홈페이지가 있습니다. https://www.coupang.com/)

오늘은 제이쿼리 메소드인 slideup으로 위 상단 배너가 사라지는 효과를 만들어보려 합니다.


 예제가 무척 간단합니다.

 먼저, </head> 안에 제이쿼리 스크립트를 준비해주세요.



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


다음은 <style> 안에 아래 코드를 넣어주세요.



  html, body {margin:0px;padding:0px;}
  #bg1 {width:100%; height:85px; background-color:#003e76;}
  #bg2 {width:100%; height:800px; background-color:#3C87CA;}



마지막으로 아래 코드를 넣어주면 완성됩니다.



	<a href="#" onclick="$('#bg1').slideUp(400);">
		<div id="bg1"></div>
	</a>
	<div id="bg2"></div>



 위 예제를 완성하면 상단을 누를때 상단이 사라지는 효과를 볼 수 있습니다.

참고로 slideup안에 들어가는 숫자는 효과가 진행되는 시간을 설정하는 것인데요.

예를 들어 slideUp(400)은 0.4초, slideUp(4000)은 4초동안 효과가 적용되는 거로 생각하시면 되겠습니다.





반응형

'[공부]하는 몽씨 > javascript' 카테고리의 다른 글

[javascript] 자동롤링되는 실시간검색어 만들기  (2) 2018.05.18
[javascript] on,off 스위치 만들기 (토글버튼: Togglebutton)  (4) 2017.08.21
[javascript] select box css 디자인  (0) 2017.07.19
[javascript] 플로팅배너 만들기  (0) 2017.06.27
[javascript] scroll top 위로가기 버튼  (0) 2017.06.23

[공부]하는 몽씨/jquery plugin

[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인

2017. 7. 24. 13:48
반응형




[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인



 페이지가 로드될 때 페이지가 다 띄워질 때까지 띄워지는 로딩중 화면을 제이쿼리 플러그인으로 간단하게 구현해보려 합니다. 

 다양한 로딩중 제이쿼리 플러그인이 있는데 그 중 fakeLoader로 로딩중 화면을 만들어보도록 하겠습니다. 



https://github.com/joaopereirawd/fakeLoader.js



먼저, 해당 페이지에 접속하셔서  fakeLoader를 다운받아주세요. 

알집을 다운 받으시면 알집 안에 fakeLoader.js와 fakeLoader.css를 

첫화면을 로딩중 화면으로 띄우고 싶은 html 안에 스크립트로 세팅해주세요.



<link rel="stylesheet" href="fakeLoader.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="fakeLoader.js"></script>


<body> 바로 다음 안으로 <div id="fakeLoader"></div>를 넣어주세요. 



 <div id="fakeLoader"></div>



 그 다음 </body> 안에 해당 스크립트를 넣어주세요. 스크립트 안에 해당 설정내용을 표기해두었는데

 spinner의 경우에는 데모페이지에서 원하는 로딩이미지타입을 골라야합니다.



http://joaopereirawd.github.io/fakeLoader.js/demo/demo1.html



위 URL 데모페이지에서 원하는 spinner를 골라 적어주세요.



<script>
$(document).ready(function(){
	$("#fakeLoader").fakeLoader({
		timeToHide:1200, // 로딩중에 걸리는 시간, 1000은 1초
		bgColor:"#f8f8f8", // 배경색
		spinner:"spinner2" // 로딩중으로 원하는 로딩이미지타입
	});
});
</script>



이렇게 세팅하면 로딩중 페이지가 완성되는데요, 원하는 로딩중 페이지가 이렇게 이미지만 있는 것이 아니라 

썸네일처럼 글자까지 있는 것을 만들고 싶으신 분들은 fakeLoader.js 안의 26번째줄을 보시면

 //Customized Spinners 라는 주석과 함께 spinner 변수들이 적혀져 있습니다.  

그 안에 해당 글귀나 혹은 글자 이미지를 넣어주시면 썸네일같은 로딩중 페이지를 만들 수 있습니다. 참고해주세요!



참고: http://joaopereirawd.github.io/fakeLoader.js/

반응형

'[공부]하는 몽씨 > jquery plugin' 카테고리의 다른 글

[slick.js/swiper.js] 반응형 탭(slider tab) 만들기  (0) 2021.10.14
[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기  (0) 2020.04.07
[JQueryRotate] 이미지 회전 애니메이션  (0) 2017.06.16
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인  (2) 2017.06.14
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션  (2) 2017.06.09

[공부]하는 몽씨/javascript

[javascript] select box css 디자인

2017. 7. 19. 15:25
반응형



[javascript] select box css 디자인


select box를 css로 디자인하는 부분은 생각보다 쉽지 않습니다. select는 어떻게든 디자인한다고 하지만

 option 부분과 select의 화살표까지 디자인을 생각하다보면 까다롭다고 느끼게 되기 마련인데요. 


 오늘은 select box를 보다 이쁘게 디자인할 수 있을 만한 방법을 알아보도록 하겠습니다.

이번 예제에서는 화살표 이미지가 필요합니다. 화살표 이미지를 만드시거나 아래에서 다운받아주세요. 


arrow.zip


</head> 안에 제이쿼리 스크립트를 넣어주신 후, html에  소스를 넣어주세요.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>




<div class="selectbox">
	<dl class="dropdown">
		<dt><a href="#" style="padding-top:4px;"><span>신상품순</span></a></dt>
		<dd>
			<ul class="dropdown2">
				<li><a href="#">신상품순</a></li>
				<li><a href="#">인기상품순</a></li>
				<li><a href="#">낮은가격순</a></li>
				<li><a href="#">높은가격순</a></li>
			</ul>
		</dd>
	</dl>
</div>


그 다음, css로 디자인을 꾸며줍니다.



.desc { color:#e8e8e8;}
.desc a {color:#515151;}
.dropdown {width:103px;margin:0px;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#3b3b3b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#3b3b3b;}
.dropdown dt a:hover { color:#3b3b3b; border: 1px solid #9e9e9e;}
.dropdown dt a {background:#fff url('화살표이미지') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #9e9e9e; width:82px;height:33px;}
.dropdown dt a span {cursor:pointer; display:block;line-height:29px;padding-left:10px;}
.dropdown dd ul { background:#fff none repeat scroll 0 0; border:1px solid #9e9e9e; color:#515151; display:none;
left:0px; padding:5px 0px; position:absolute; top:-1px; width:auto; min-width:102px; list-style:none; text-align:left;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;padding-left:11px;}
.dropdown dd ul li a:hover { background-color:#e8e8e8;}
.dropdown img.flag { border:none; vertical-align:middle;padding:11px;}
.flagvisibility { display:none;}



마지막으로 스크립트를 넣어주세요.



$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
	
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
/* $("#result").html("Selected value is: " + getSelectedValue("sample"));*/
});
	
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});

$(".dropdown img.flag").toggleClass("flagvisibility");




참고 : http://jsfiddle.net/c2ezuw24/1/

반응형

'[공부]하는 몽씨 > javascript' 카테고리의 다른 글

[javascript] on,off 스위치 만들기 (토글버튼: Togglebutton)  (4) 2017.08.21
[javascript] slideup 효과로 상단배너 숨기기  (0) 2017.07.26
[javascript] 플로팅배너 만들기  (0) 2017.06.27
[javascript] scroll top 위로가기 버튼  (0) 2017.06.23
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화  (3) 2017.06.22
Profile
이웃집몽씨 코딩공부하는 웹디, 몽씨입니다. 코딩공부를 한지 얼마 되지 않아서 부족한 부분이 많지만 열심히 하겠습니다.
admin write link

티스토리툴바