댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[예제] CSS 와 제이쿼리의 조합 "달려라 멍멍이들"
재미있는 애니메이션 GIF 이미지와 CSS 그리고 간단한 제이쿼리로 재미있고 귀여운 효과를 만들어봐요~

달려라 달려 계속 (무한 반복)

아래의 달리는 강아지들이 보이시죠?
오늘 해볼것은 바로 이것입니다. 그럼 달려볼까요?
음... 오랫만의 강좌인데 또 쉬어가는 예제로 진행을 하네요.. 너무 쉬었나 보네요 ㅠㅠ..

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

별것 아니지만 굉장히 귀여운 예제


위 애니메이션 GIF가 사용한 이미지 입니다.
우연히 본 이미지인데 정확한 원본 출처가 어디인지 잘 모르겠습니다.
이점은 양해부탁드립니다. ㅠㅠ

우연히 위 그림을 보고.. 더 리얼하게 달리게 해주고 싶다는 생각이 들었습니다.
이미 달리고 있는데 더 달리게 하고 싶었죠. ^^; 그래요 오늘은 이걸로 달리는 겁니다.
그리고 이런 간단한 예제를 통해서도 배울것이 있습니다.

이 예제는 약간의 CSS 지식과 또 약간의 제이쿼리 지식만 있으시면 이해 할 수 있는 쉬운 소스입니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

준비물


우선 예제에 잘어울리는 귀여운 이미지가 필요합니다.
이 예제의 90% 이상은 위 이미지가 느낌을 좌우합니다. 원본소스가 중요한 셈이죠.

이런 이미지는 작심하고 찾기는 좀 어렵고, 우연히 보게되는 경우가 많은데요.
강좌나 예제용으로 쓰기 좋다는 생각이 들었습니다. 이렇게 시작된 예제입니다.

그럼 일단 준비는 됬습니다. 이 이미지로 해보겠습니다.
그리고 달리는 다른 그림이라도 뭐든 좋겠지요.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

DIV 태그와 CSS 설정으로 틀을 만들어 줍니다

<style type="text/css">
        .css_test {
                background-image : url('http://superkts.com/img/css/dogs.gif');
                background-position : center;
                background-repeat : repeat-x;
                height : 100px;
        }
</style>

<div class="css_test"></div>


background-image : url('http://superkts.com/img/css/dogs.gif');
- 개를 DIV 배경이미지로 설정하는 CSS 입니다.

background-position : center;
- 배경이미지를 해당 영역 중간에 위치하게 설정합니다.

background-repeat : repeat-x;
배경이미지를 가로로만 반복하도록 설정합니다.

height : 100px;
- DIV 의 높이를 100px 로 설정합니다. 개들이 잘 보이는 높이입니다.


파란색 CSS 속성을 클릭하시면 자세한 내용을 볼 수 있습니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

그럼 이렇게 됩니다


가로로 무한 반복되는 개들을 만들었습니다. 이 처리를 아주 쉽게 CSS로 해결했습니다. CSS도 위대합니다.
이제 제이쿼리로 달리는것처럼 보이게 만들어 줘야죠!
이 역시 CSS를 제이쿼리로 컨트롤 해서 간단히 할 수 있습니다.
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

우선 원리를 알아볼까요?

background-position 이라는 CSS 속성을 이용합니다.

클릭하시면 자세한 설명이 나옵니다. 금방 보실 수 있으니 한번 보시고 와주세용 ㅎ

보셨다고 가정하고.. ^^;

제이쿼리로 배경이미지의 위치를 왼쪽으로 조금씩 계속 이동하게 값을 변경하도록 만들어주면
개들이 달리는것처럼 보이게 됩니다.

이미지 자체가 자동으로 무한반복 이므로 위치값만 계속 바꿔주면 별다른 처리없이 계속 달리게 되는것이죠.
보기와는 달리 간단한 방법을 사용합니다.

만약 이런 방법을 쓰지 않는다면..아마도 이렇게 생각해 볼 수 있겠네요..

이미지를 가로로 나열해서 배치 시키고.. 제이쿼리로 모든 이미지를 왼쪽으로 이동시키도록 만들고요
특정 영역을 넘어서면 다시 원위치 시켜서 움직이게 하고 반복반복 해야겠죠.
이때 위치 계산도 해야하고, 이미지의 너비를 파악해서 어떤 수치일때 처리해야 하는지도 판단해야 하고 등등 복잡하네요.
또 이미지가 지정된 영역을 뚫고 나오지 않도록 해야하며.. ㄷㄷㄷ 멍해지네요..

그렇게 하지 않으셔도 됩니다. (정색)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

제이쿼리 스크립트 설명

<style type="text/css">
        .css_test {
                background-image : url('http://superkts.com/img/css/dogs.gif');
                background-repeat : repeat-x;
                height:100px;
        }
</style>
 
<div class="css_test"></div>
 
<script type="text/javascript">
 
        function css_test(){
                $('.css_test').css({'background-position':'-=1'}); // 배경이미지를 왼쪽으로 1px 씩 계속 움직임
        }
        setInterval(css_test, 10);
 
</script>


$('.css_test').css({'background-position':'-=1'});

- css_test : 클래스 이름이 css_test 인것을 찾습니다.
- css : css 속성을 조절할 수 있는 메서드 입니다.
{'background-position':'-=1'} 와 같은 형태로 사용할 수 있습니다. 오브젝트 형태라고 합니다.

{'이름' : '값'} 형식으로 사용합니다. 이 형식은 동시에 여러값을 사용할 수 있는데요.
{'이름' : '값', '이름' : '값', '이름' : '값'} 이렇게 컴마를 구분으로 여러개 이름 값 셋트를 넣으면 됩니다.
자바스크립트 객체라고도 하는데요 JSON 형식입니다. 제이슨 이라고 하죠.
이 부분은 조금 복잡하므로 여기서는 그냥 넘어가겠습니다. ^^;

그럼 다시 css({'background-position':'-=1'}) 에 대한 내용입니다.

background-position 의 위치값을 현재위치에서 -1 만큼 바꿔 주라는 의미입니다.
즉 현재 위치에서 -1 만큼 바꿔주면 결국 왼쪽으로 1px 이동하는 것이죠. - 수치는 왼쪽으로의 이동입니다.
만약 {'background-position':'1'} 이렇게 한다면 그냥 왼쪽 1px 의 특정 위치로 옮겨 버립니다.

그리고 -= 이 부분은 제이쿼리에서 지원하는 형식입니다. 반대로 += 도 있습니다.
현재 값을 기준으로 더하거나 빼거나 할 때 숫자앞에 붙여주면 됩니다. 이게 없다면 현재위치를 알아내고
다시 그 위치를 옮겨주는 계산 처리를 해야하는데, 겨우 단 두글자로 해결됩니다.. 멋지죠!?
그리고 이 값은 문자열 이므로 따옴표로 감싸줘야 합니다. 숫자만 쓸때는 그냥 써도 됩니다.


setInterval(css_test, 10);
css_test
함수를 10/1000 초 그러니까 100분의 1초 단위로 계속 실행시키라는 명령입니다.
이 명령으로 함수가 계속 실행되면 배경이미지가 1px씩 왼쪽으로 움직입니다.
단순히 CSS 를 컨트롤 하는 것 그 이상 이하도 아닌 처리지만 효과와 코드상의 간결함이 훌륭합니다.
가성비 짱인 처리 방법입니다. ^^;

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

자 이제 완성되었습니다.
이미지만 바꿔주면 적절히 재미있는것을 만들어 볼 수 있겠네요 ^^;;;

취향에 맞게 바꿔보세요 ㅎㅎ

댓글3▼ 덧보기
bent (2015-03-19 15:10)
이런걸 뭐라 그러나요?? 프로그램?? 언어?? 뭐... 무슨 자바??? C++ 이런거 들어봤습니다.^^
배우고싶다.....
관리맨 (2015-03-19 22:55)
이건 CSS 라는 것과 자바스크립트 의 조합입니다.
CSS 는 웹페이지에 레이아웃을 잡는데 쓰이는 언어라고 생각하시면 적절할것 같아요.
자바스크립트는 간단하게는 글 작성시 입력안한것 체크해주거나 이 홈을 예로들면 댓글쓸때
약간의 애니메이션 이 있느데 이런것 들을 하는데 사용되는 언어입니다.
CSS 를 자바스크립트로 컨트롤 할 수도 있는데 그걸 이용해서 만들어본 예제입니다.
취미로 배우셔도 좋긴한데.. 추천을 해드려야 할지는 모르겠어요 ㅠㅠ.. 보통 직업적으로 배우는 사람이 많아서요.
홈페이지를 운영하시는 분들중 직접 만져보기위해 배우는 경우도 있습니다.
bent (2015-03-19 23:43)
아... 글쿤요....
댓글 쓰기
이름 : 패스워드 :

바로 실행 가능한 소스 (복사 후 저장 그리고 브라우저로 열어보기)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

그럼 다음에 봐야옹~




▼ 덧보기
댓글 쓰기
이름 : 패스워드 :