'분류 전체보기' 카테고리의 글 목록 (4 Page)

이웃집 사는 몽씨 (43)

[공부]하는 몽씨/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

[공부]하는 몽씨/javascript

[javascript] 플로팅배너 만들기

2017. 6. 27. 16:48

[javascript] 플로팅배너 만들기

제가 플로팅배너라는 개념을 처음 접했을 때, 전 스크롤이 긴 랜딩페이지나 홈페이지를 볼 때,

오른쪽 하단이나 상단에 따라오는 배너를 '퀵배너'라고 알고 있었는데요.

이것을 근래에 들어서야 퀵배너가 플로팅배너라고 불리는 것을 알게 되었습니다.

오늘은 스크롤에 따라 따라오지만 계속 멈춰서있는 듯한 플로팅배너와 스크롤을 열심히 쫓아오는 듯한 플로팅 배너

이렇게 두가지 버전을 만들어보려 합니다. 먼저 멈춰서있는 듯한 플로팅 배너부터 만들어보겠습니다.

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

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

그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

html,body {margin:0; padding:0; position: relative; height: 100%;}
#wrap {margin:0 auto;text-align:center;}
#quick_bg {margin:0 auto;text-align:center;width:960px;position:relative;}
#quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}

마지막으로 플로팅배너를 넣으려고 하는 페이지의 <body> 아래로 해당 html를 ctrl+c, ctrl+v해서 넣어주세요.

<div id="wrap">
	<div id="quick_bg">
		<div id="quick">
			<a href="#form" style="position:fixed;margin-top:-17px"><img src="img/플로팅배너이미지.png" style="width:250px"></a>
		</div>
	</div>
</div>

멈춰서있는 듯한 플로팅 배너 페이지가 완성되었습니다.

다음은 스크롤을 열심히 쫓아오는 듯한 플로팅 배너를 만들어보겠습니다.

똑같이 </head> 안에 제이쿼리 스크립트를 넣어주시고 CSS에 해당 소스를 넣어주세요.

 body {margin:0;}
 #wrap {margin:0 auto;text-align:center;}
 #quick_bg {margin:0 auto;text-align:center;width:1130px;position:relative;}
 #quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}
 #container {position:relative;}

그다음 javascript에 해당 소스를 넣어주세요.

var quick_menu = $('#quick');
var quick_top = 470;

quick_menu.css('top', $(window).height() );
$(document).ready(function(){
quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 200 ); 
$(window).scroll(function(){
quick_menu.stop();
quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 500 );
});
});

페이지의 <body> 아래로 해당 html를 ctrl+c, ctrl+v해서 넣어주면 끝이 납니다.

 <div id="wrap">
	<div id="container">
		<div id="quick_bg">
			<div id="quick">
				<a href="#form"><img src="img/플로팅배너이미지.png"></a>
			</div>
		</div>
	</div>
</div>

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

[javascript] slideup 효과로 상단배너 숨기기 (0)	2017.07.26
[javascript] select box css 디자인 (0)	2017.07.19
[javascript] scroll top 위로가기 버튼 (0)	2017.06.23
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3)	2017.06.22
[javascript] 간단한 탭메뉴 구현하기 (0)	2017.06.19

[공부]하는 몽씨/javascript

[javascript] scroll top 위로가기 버튼

2017. 6. 23. 11:23

[javascript] scroll top 위로가기 버튼

긴 페이지를 읽고 있을 때, 페이지의 오른쪽 하단에 위를 가리키는 화살표,

또는 top이라고 적혀있는 버튼이 보일 때가 있습니다.

이것을 누르면 맨 위부분으로 이동이 되는 것을 많이 보셨을 텐데요.

이 위로가기 버튼, 즉 scroll top을 부드럽게 위로 이동하게 만드는 부분을 작업해보려합니다.

먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요.

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

그 다음, <script> </script> 사이로 스크립트 구문을 넣어주세요.

$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

body {
	font: .88em/150% Arial, Helvetica, sans-serif;
	margin: 30px auto;
}
h1 {
	font: bold 80%/120% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #999;
}
h2 {
	font-size: 2.5em;
	margin: 0 0 8px;
}
h3 {
	font-size: 1.6em;
	margin: 20px 0 5px;
}
a {
	color: #69C;
	text-decoration: none;
}
a:hover {
	color: #F30;
}
p {
	margin: 0 0 10px;
}
em {
	font: italic 100% "Times New Roman", Times, serif;
}
.credits {
	border-bottom: solid 1px #eee;
	padding-bottom: 10px;
	margin: 0 0 30px;
}
#pagewrap {
	margin: 0 auto;
	width: 600px;
	padding-left: 150px;
	position: relative;
}

/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

마지막으로 <body>에 id값을 top으로 주시고 예제를 안에 넣어주시면 끝이 납니다.

<div id="pagewrap">
	<h1>Demo</h1>
	<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>
	<p class="credits"><em>by <a href="http://webdesignerwall.com">Web Designer Wall</a></em></p>
	<p>↓ scroll down</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p><p>↓</p>
	<p>In sollicitudin blandit cursus. Pellentesque ornare, augue ac posuere consectetur, tellus ligula feugiat lorem, id imperdiet tellus tortor ut urna. Ut eleifend rhoncus augue sit amet dignissim. In mattis lobortis imperdiet. Aliquam molestie nisi et purus mattis volutpat. Cras dignissim, arcu vel pretium interdum, turpis sapien rutrum felis, non condimentum nulla orci ornare tellus. In laoreet tristique mauris, in accumsan quam commodo ac. Nam fringilla sapien sed nibh vehicula at rutrum metus blandit. Mauris eleifend, velit eget lacinia ullamcorper, elit sapien malesuada orci, fringilla imperdiet enim ante at velit. Vestibulum posuere dictum sapien, id volutpat sapien auctor non. Fusce convallis elit sagittis augue venenatis tempor in eget ligula. Curabitur at diam leo, eu convallis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin molestie nunc massa. Quisque tempor neque in sem laoreet vel dictum magna commodo. In elementum, turpis sed bibendum sollicitudin, augue leo malesuada dolor, ut hendrerit lectus libero id purus.</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p>
<h3><a href="http://themify.me">Themify.me</a></h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3><a href="http://icondock.com">IconDock</a></h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3><a href="http://bestwebgallery.com">Best Web Gallery</a></h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3><a href="http://ndesign-studio.com">N.Design Studio</a></h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 5</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3>Sub Header 6</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 7</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3>Sub Header 8</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Header 9</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 10</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>

	<p id="back-top">
		<a href="#top"><span></span>Back to Top</a>
	</p>

</div>

출처 : http://webdesignerwall.com/tutorials/animated-scroll-to-top

http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html (데모페이지)

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

[javascript] select box css 디자인 (0)	2017.07.19
[javascript] 플로팅배너 만들기 (0)	2017.06.27
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3)	2017.06.22
[javascript] 간단한 탭메뉴 구현하기 (0)	2017.06.19
[javascript] 심플 이미지 슬라이더 (0)	2017.06.13

[공부]하는 몽씨/javascript

[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화

2017. 6. 22. 16:34

[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화

selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다.

지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠.

이때 사용하게 되는 것이, 해당하는 객체 값이 변할 때 발생하는 이벤트 함수인 onchange라는 함수입니다.

예제를 먼저 살펴볼까요. 먼저 html 부분에 해당 예제소스를 넣어주세요.

<select onchange="categoryChange(this)">
	<option>걸그룹을 선택해주세요</option>
	<option value="a">블랙핑크</option>
	<option value="b">에프엑스</option>
	<option value="c">EXID</option>
</select>

<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>

지극히 개인취향적인 걸그룹이 담긴 selectbox에 내용을 담고 다음에 javascript 스크립트를 넣어주면 완성입니다.

function categoryChange(e) {
	var good_a = ["지수", "제니", "로제", "리사"];
	var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
	var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
	var target = document.getElementById("good");

	if(e.value == "a") var d = good_a;
	else if(e.value == "b") var d = good_b;
	else if(e.value == "c") var d = good_c;

	target.options.length = 0;

	for (x in d) {
		var opt = document.createElement("option");
		opt.value = d[x];
		opt.innerHTML = d[x];
		target.appendChild(opt);
	}	
}

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

[javascript] select box css 디자인 (0)	2017.07.19
[javascript] 플로팅배너 만들기 (0)	2017.06.27
[javascript] scroll top 위로가기 버튼 (0)	2017.06.23
[javascript] 간단한 탭메뉴 구현하기 (0)	2017.06.19
[javascript] 심플 이미지 슬라이더 (0)	2017.06.13

[공부]하는 몽씨/javascript

[javascript] 간단한 탭메뉴 구현하기

2017. 6. 19. 17:06

[javascript] 간단한 탭메뉴 구현하기

예전에 보다 간단한 탭메뉴를 찾으려 열심히 구글링했던 때가 있었는데요,

거기서 단비처럼 찾아낸 탭메뉴를 구현해볼까 합니다. 코드도 무척 단순해서 따라하시기 쉬우실거에요.

먼저 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

body{
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container{
	width: 500px;
	margin: 0 auto;
}



ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current{
	background: #ededed;
	color: #222;
}

.tab-content{
	display: none;
	background: #ededed;
	padding: 15px;
}

.tab-content.current{
	display: inherit;
}

그 다음 html에 탭에 넣을 내용들을 적어넣습니다.

ul.tas의 li는 탭을 누를 메뉴가 되고 그 아래, class값이 tab-content인 부분들은 전부 메뉴의 내용들이 됩니다.

  <div class="container">

	<ul class="tabs">
		<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
		<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
		<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
	</ul>

	<div id="tab-1" class="tab-content current">
---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ----
	</div>
	<div id="tab-2" class="tab-content">
---- ---- ★------ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ★-- ---- ---- ------★ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- ★------ ---- ---- ---- ----
	</div>
	<div id="tab-3" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
	</div>

</div>

마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

참고: https://codepen.io/cssjockey/pen/jGzuK

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

[javascript] select box css 디자인 (0)	2017.07.19
[javascript] 플로팅배너 만들기 (0)	2017.06.27
[javascript] scroll top 위로가기 버튼 (0)	2017.06.23
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3)	2017.06.22
[javascript] 심플 이미지 슬라이더 (0)	2017.06.13

[공부]하는 몽씨/jquery plugin

[JQueryRotate] 이미지 회전 애니메이션

2017. 6. 16. 17:38

[JQueryRotate] 이미지 회전 애니메이션

이미지를 회전하게 만들어주는 제이쿼리 플러그인입니다.

이미지를 계속 회전하게 만들 수도 있고 45도 각도로 이미지를 기울일 수도 있고

마우스 오버할 때, 또는 클릭할 때 이미지를 회전하게 만들 수 도 있죠.

여러가지 방법들이 있지만 그 중 이미지를 계속 빙글빙글 돌아가게 만드는 예제를 소개할까 합니다.

먼저 jquery plugin 파일을 다운로드 받아주세요.

jQueryRotateCompressed.js

다운로드 받은 js(jQueryRotateCompressed.js)를 폴더에 넣어주시고 스크립트를 html으로 넣어줍니다.

<script src="jQueryRotateCompressed.js"></script>

그 다음 빙글빙글 돌아가게 만드는 이미지를 <body> 안에 넣어주시는데 이미지의 id값은 image로 주시고

해당 스크립트를 돌아가게 만들 스크립트 소스를 </body> 앞에 넣어줍니다.

<img src="---.jpg" id="image">

var angle = 0;
setInterval(function(){
      angle+=3;
     $("#image").rotate(angle);
},50);

완성된 데모페이지는 아래 URL에서 확인하실 수 있습니다.

보시는 것처럼 제이쿼리플러그인과 스크립트로 쉽고 간단하게 이미지를 회전시킬 수 있죠.

http://jsfiddle.net/xpdd0vz2/ (데모페이지)

내용을 단순하게 정리하기는 했지만 이것이 부족하다고 느끼시는 분들은

이미지를 회전시키는 다양한 방법과 응용은 참조 페이지 안에서 참고 부탁드립니다.

참조 : http://jqueryrotate.com/

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

[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0)	2020.04.07
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2)	2017.07.24
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2)	2017.06.14
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2)	2017.06.09
[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션 (0)	2017.06.08

[공부]하는 몽씨/jquery plugin

[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인

2017. 6. 14. 16:57

[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인

lazy는 게으른, 느릇한, 여유로운을 뜻하는 형용사입니다.

단어의 뜻 그대로 lazyload는 게으른 이미지 로딩 플러그인을 뜻하는데요.

즉 lazy load plugin은 화면에 보이는 영역의 이미지만 동적으로 로딩시켜 페이지의 로딩속도 향상,

서버의 트래픽 절감 시켜주는 효과를 주는 이미지 플러그인입니다.

~~말로 설명하자니 뭔가 체감이 안되실텐데요. 먼저 예제 사이트를 보시죠.~~

~~http://appelsiini.net/projects/lazyload/fadein/~~

~~해당 사이트처럼 이미지들이 전부 나오는게 아니라 이미지가 보고 있는 영역에 도달해야지만 로딩이 되게끔 보여지고 있습니다.~~

~~세팅하는 방법도 무척 단순하죠. 아래 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다.~~

~~페이지에서 해당 파일을 다운받아주세요. 페이지가 열리지 않는다면 여기서 다운받아주세요.~~

~~https://plugins.jquery.com/lazyload/~~

jquery.lazyload.min.js

~~파일을 받으셨다면 jquery.lazyload.min.js 파일을 폴더에 넣고 아래 스크립트를 </head> 안의 ctrl+c, ctrl+v 해주세요.~~

<script src="jquery.lazyload.min.js"></script>

~~html 안의 이미지를 넣을 부분에 class를 lazy라고 표기해주세요. (이미지들은 가지고 계신 이미지들을 넣어주시면 됩니다.)~~

<img class="lazy" src="...">
<img class="lazy" src="...">
<img class="lazy" src="...">

~~마지막으로 lazyload를 실행시키기 위한 스크립트를 넣어주면 완성입니다.~~

$("img.lazy").lazyload({
	effect : "fadeIn"
});

~~참조 : http://appelsiini.net/projects/lazyload/~~

이 글을 올린 지가 2017년이었는데 덧글이 달려있어 오랜만에 확인해보니

버전이 업데이트 되서 작동을 하지 않는 이슈가 있었다는 걸 뒤늦게 알게 되었습니다 ㅠㅠ

버전 1.8.2의 lazyload 플러그인 내용으로 수정된 파일과 변경된 페이지를 공유드립니다. 내용 참고 부탁드립니다.

https://appelsiini.net/projects/lazyload/

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

[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0)	2020.04.07
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2)	2017.07.24
[JQueryRotate] 이미지 회전 애니메이션 (0)	2017.06.16
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2)	2017.06.09
[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션 (0)	2017.06.08

[공부]하는 몽씨/javascript

[javascript] 심플 이미지 슬라이더

2017. 6. 13. 16:42

[javascript] 심플 이미지 슬라이더

단순하게 페이드인, 페이드아웃을 반복하면서 이미지를 보여주는 심플 이미지 슬라이더입니다.

이전, 다음 버튼 없이 이미지만 자동으로 움직이죠. 코드도 무척 단순합니다.

먼저 html 부분에 해당 예제소스를 넣어주세요.

(예제 소스에 있는 jpg는 가지고 계시는 이미지로 써주시면 됩니다.)

<div id="slideshow">
   <div>
     <img src="http://imivory.me/img/noname/1.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/2.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/3.jpg">
   </div>
</div>

그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

예시 페이지는 아래를 참고해주세요.

출처: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

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

[javascript] select box css 디자인 (0)	2017.07.19
[javascript] 플로팅배너 만들기 (0)	2017.06.27
[javascript] scroll top 위로가기 버튼 (0)	2017.06.23
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3)	2017.06.22
[javascript] 간단한 탭메뉴 구현하기 (0)	2017.06.19

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]

이웃집몽씨 코딩공부하는 웹디, 몽씨입니다. 코딩공부를 한지 얼마 되지 않아서 부족한 부분이 많지만 열심히 하겠습니다.

admin write link

이웃집 사는 몽씨 (43)

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

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

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

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

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

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

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

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

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

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

티스토리툴바