URL : https://ktsmemo.cafe24.com/s/jquery/105

등록일 : 2016년 12월 7일(수), 6년 3개월 25일 전

안하면 안될것 같은 헬로월드(Hello World)

강좌를 시작하기전 헬로월드를 한번 해보고 가겠습니다.
제일 만만한게 헬로월드라고 생각할 수 있겠습니다.
과연 그럴까요? 두둥.

- 잉여력이 폭발한(?) 제이쿼리로 만들어본 다양한 Hello World 예제입니다.
- 구경만 하는 예제이므로 소스 설명은 되어있지 않았습니다. ^^;
- 1978년(45년 전) 처음으로 헬로월드가 사용되었다고 합니다.
- 자 그럼 Hello World !
- 반복되는 헬로월드에 지치셨나요? ㅠㅠ

버튼 클릭하면 계속 추가되는 Hello World

효과에 비해 소스가 간단합니다.

CSS

.helloworld {
	border-radius:5px;
	border:5px solid silver;
	display:inline-block;
	padding:20px;
}
.helloworld.on {
	background:yellow;
	border-color:red;
	box-shadow:0 0 10px red;
	color:red;
}

HTML

<button type="button" onclick="helloWorld()">버튼을 연타해 보세요 !!</button><br><br>
<div class="helloworld"></div>

자바스크립트

function helloWorld(){
	$('.helloworld:not(:animated)').addClass('on', 200).append('Hello World<br>').removeClass('on', 100);
}

이 예제는 추가로 jQuery UI 를 필요로 합니다. 일단은 넘어갑시다 ^^

헬로월드에 놀란 고양이

Hello World Cat !!
부들부들 또 헬로월드냥~!

Hello World

CSS

.helloworld {
	background-image:url('http://superkts.com/img/jjal/cat01.jpg');
	background-repeat:no-repeat;
	background-position:center;
	height:300px;
	position:relative;
	width:400px;
}
.helloworld .text {
	bottom:0;
	color:yellow;
	font-family:verdana !important;
	font-size:40pt !important;
	font-weight:bold;
	position:absolute;
	text-shadow:0 0 5px #000;
}

HTML

<div class="helloworld">
	<div class="text">Hello World</div>
</div>

자바스크립트

function helloworld(){
	var rnd  = Math.round(Math.random() * 20);
	var rnd2 = Math.round(Math.random() * 40);
	var rnd3 = Math.round(Math.random() * 3) + 100;
	$('.helloworld .text').css({ 'bottom':rnd, left:rnd2 }); // 글자 흔들기
	$('.helloworld').css({ 'background-size':rnd3 + '%' }); // 배경 확대
}

setInterval(helloworld, 10);

소스는 그냥 봐도 간단하죠? ㅎㅎ

헬로월드에 감동받은 너구리

너구리 두마리로 가봅니다. 고양이소스 파생형.
고마워요 헬로월드~ 잔잔한 감동 x 2

Hello

World

CSS

.helloworld {
	background-image:url('http://superkts.com/img/jjal/raccoon01.jpg');
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	height:313px;
	position:relative;
	width:400px;
}
.helloworld .text {
	bottom:0;
	color:white;
	font-family:verdana !important;
	font-size:15pt !important;
	font-weight:bold;
	margin:0 0 100px 65px;
	position:absolute;
	text-align:center;
	text-shadow:0 0 3px #000;
}

HTML

<div class="helloworld">
	<div class="text">Hello</div>
</div>
<div class="helloworld">
	<div class="text">World</div>
</div>

자바스크립트

function helloworld(){
	var rnd  = Math.round(Math.random() * 3);
	var rnd2 = Math.round(Math.random() * 1);
	$('.helloworld .text').css({ 'bottom':rnd}); // 글자 흔들기
	$('.helloworld').css({ 'background-position':rnd2 }); // 배경 흔들기
}

setInterval(helloworld, 10);

형상기억 헬로월드

마우스로 글자를 드래그 했다가 놓아보세요 ^^

Hello World

CSS

.helloworld {
	background:#efefef;
	line-height:normal !important;
	padding:20px !important;
	text-align:center;
}
.helloworld span {
	cursor:pointer;
	font-family:verdana !important;
	font-size:60pt !important;
	font-weight:bold;
}

HTML

<div class="helloworld">
	<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
	<span>W</span><span>o</span><span>r</span><span>l</span><span>d</span>
</div>

자바스크립트

$('.helloworld span')
.draggable({
	stop : function(){
		$(this).animate({top:0, left:0 }, 500, 'easeOutElastic');
	}
});

"세상은 항상 아름답지만은 않지" by Hello World

빨간색 O 를 당겨보세요. Hell 로 변할것 입니다.
한글자 차이로 헬로월드가 되기도 합니다. 현실은 냉정합니다.

Hello World !?

CSS

.helloworld {
	line-height:normal !important;
	padding:20px !important;
	text-align:center;
}
.helloworld, .helloworld span {
	font-family:verdana !important;
	font-size:50pt !important;
	font-weight:bold;
}
.helloworld span { color:red; cursor:pointer; }
.helloworld .box {
	background:#efefef;
	display:inline-block;
	height:400px;
	margin-top:10px;
	overflow:hidden;
	width:500px;
}

HTML

<div class="helloworld">
	Hell<span>o</span> World !?<br>
	<div class="box">
		<img src="http://superkts.com/img/jjal/future.jpg" />
	</div>
</div>

자바스크립트

$('.helloworld span')
.draggable({
	drag : function(e){
		var a = Math.abs(parseInt($(this).css('top')));
		var b = Math.abs(parseInt($(this).css('left')));

		// 드래그한 "O" 의 위치값을 계산하여 이미지를 스크롤하기
		// 어느 방향으로 드래그 하더라도 일정한 수치만큼 스크롤
		// 피타고라스의 정리 응용(?) 수학?!
		$('.box').scrollTop(Math.sqrt(a*a + b*b));
	},
	stop : function(){
		$(this).animate({top:0, left:0 }, 500, 'easeOutElastic'); // 드래그한 "O" 원래 위치로 되돌리기
		$('.box').animate({'scrollTop':0}, 500, 'easeOutBounce'); // 이미지 스크롤 되돌리기
	}
});

나름 다양한 효과를 사용하였습니다. 소스는 의외로 단순하죠?
피타고라스의 정리를 이용해서 어느 방향으로 당기더라도 일정한 수치만큼
이미지가 움직이도록 해보았습니다. 살면서 처음 써본 공식 ... ^^;;

전방에 힘찬 Hello World !!! - 군대 버전

버튼을 눌러서 힘찬 함성을 발사해 보십시오.
버튼을 연타해 보십시오.
실시 (실시)

CSS

.helloworld {
	height:300px;
	text-align:right;
}
.helloworld img {
	margin-top:75px;
	width:150px;
}
.helloworld .box {
	height:300px;
	margin-left:-90px;
	overflow:hidden;
	position:absolute;
	width:100%;
}

.helloworld span {
	font-family:verdana !important;
	font-size:30pt !important;
	font-weight:bold;
	padding-top:150px;
	position:absolute;
	right:-250px;
	text-align:left;
	white-space:nowrap;
}

HTML

<div class="helloworld">
	<div class="box"></div>
	<img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<button type="button" onclick="helloworld()">전방에 힘찬 Hello World 발사 !!</button>

자바스크립트

var helloworld_timer;
var helloworld_counter = 0;

function helloworld(){
	clearTimeout(helloworld_timer);

	$('.helloworld img').attr('src', 'http://biketago.com/img/etc/huk2.gif');

	helloworld_timer = setTimeout(function(){
		$('.helloworld img').attr('src', 'http://biketago.com/img/etc/huk1.gif');
		helloworld_counter = 0;
	}, 1000);

	helloworld_counter++;

	var rnd = 150 - Math.round(Math.random() * 300);
	var tmp = '+=' + rnd;
	if(rnd < 0) tmp = '-=' + Math.abs(rnd);

	var move_right = ($('.helloworld').width() + 300).toString();

	var el = $('<span>Hello World</span>')
	.appendTo('.helloworld .box')
	.animate({'right':'+=' + move_right, top:tmp}, 1500, 'easeInCubic', function(){
		$(this).remove();
	});

	if(helloworld_counter > 20) el.html('<img style="width:80px;" src="http://biketago.com/img/etc/huk2.gif">').css('padding-top', '50px'); // 패닉 모드
	else if(helloworld_counter > 10) el.html('그만 해 !!!');
}

CSS를 많이 활용한 예제입니다. CSS도 중요합니다. ㄷㄷ

목소리가 작습니다 !! 목소리가 그것밖에 안나옵니까?? - by 헬로월드
저녁 말고 전역이다 !!! - by 말년

무한 증식 헬로월드

클릭하면 무한 증식(복제)되는 헬로월드 입니다.

복제된 헬로월드도 클릭하면 다시 복제 되고
그 복제된것도 클릭하면 또 복제 됩니다. 이쯤 되면 재앙수준입니다.
하지만 5초후 자동으로 소멸합니다. (본체는 소멸하지 않습니다)

아래 헬로월드를 클릭해 봅시다.

Hello World

CSS

.helloworld_box {
	text-align:center;
}
.helloworld_box .helloworld {
	color:#8000FF;
	cursor:pointer;
	font-size:50pt !important;
	font-weight:bold;
	position:relative;
	text-shadow:0 0 5px #FF0080;
	z-index:100;
}

HTML

<div class="helloworld_box">
	<span class="helloworld" onclick="cloneHelloWorld(this)">Hello World</span>
</div>

자바스크립트

function cloneHelloWorld(o){

	var pos  = $(o).offset(); // 클릭한 이미지의 위치알아내기
	// 이동할 위치값을 랜덤으로 생성 -300 부터 300 사이
	var rnd1  = Math.round( Math.random() * 600 - 300 );
	var rnd2 = Math.round( Math.random() * 600 - 300 );

	// 클릭한 이미지 기준으로 이동할 위치계산
	var move_top = pos.top - rnd1;
	var move_left = pos.left - rnd2;

	// 보기편하게 여러줄 코딩
	$(o)
	.clone() // 클릭한 이미지 복제
	.appendTo( '.helloworld_box' ) // 복제한것 추가
	.css({ top : pos.top, left : pos.left, position:'absolute' }) // 위치설정과 position 설정 변경

	// 위치이동 애니매이션
	.animate( { top : move_top, left : move_left }, 1000, 'easeOutElastic', function(){
		var img = this; // setTimeout 에서 사용하기 위해 지역변수로 만들기

		// 5초후 제거
		setTimeout(function(){
			$(img).remove();
		}, 5000);
	});
}

원래 꾸준히 강좌를 진행할 예정이었으나.
먹고 사는 문제로 인하여... 결국 잘 진행되지 못하고 있습니다.
죄송합니다. ㅠㅠ

현재 강좌는 비공개로 작성 하고 완료되면 공개하는 방식으로 올리고 있었습니다.
하지만 그렇게 하니 오늘 할 일을 내일로 자꾸 미루는 결과가 발생했습니다.

그래서 일단 완성되지 않은 강좌라도 공개하고 틈날때 내용을 추가하는 방식으로 바꿔 보려고 합니다.
이 글도 그런 상태입니다. 그래야 책임감 있게 올릴것 같습니다. ^^;;

음.. 일단 기대해 주세요 !!!
조금이라도 도움이 되는 곳으로 만들어 나가겠습니다.

※ 이 내용은 강좌가 완료되면 삭제하겠습니다.

방문해 주셔서 감사드립니다 !!

★ 각종 쉽고 편리한 계산기 링크 ★

만나이 계산기 띠동갑 계산기 디데이 계산기 기념일 계산기 날짜 +- 계산기 날짜 차이 계산기 수능 디데이 양력 → 음력 음력 → 양력 삼재

jQuery(제이쿼리) 강좌와 예제모음

Hello World 해보기

안하면 안될것 같은 헬로월드(Hello World)

버튼 클릭하면 계속 추가되는 Hello World

CSS

HTML

자바스크립트

헬로월드에 놀란 고양이

CSS

HTML

자바스크립트

헬로월드에 감동받은 너구리

CSS

HTML

자바스크립트

형상기억 헬로월드

CSS

HTML

자바스크립트

"세상은 항상 아름답지만은 않지" by Hello World

CSS

HTML

자바스크립트

전방에 힘찬 Hello World !!! - 군대 버전

CSS

HTML

자바스크립트

무한 증식 헬로월드

CSS

HTML

자바스크립트

★ 각종 쉽고 편리한 계산기 링크 ★