밑에 많은 강아지들이 달리고 있습니다.
이걸 만들어 보겠습니다.
그럼 달려보실까요?
등록일 : ,
달려라 멍멍 !!

뭐 달려야 한다고??
준비물 : 적절한 애니메이션 GIF 이미지

우연히 이 GIF 애니메이션 이미지를 보고 이 예제를 만들어보게 되었습니다.
※ 이미지 원본 출처는 모르겠습니다. ㄷㄷ
※ 이미지 원본 출처는 모르겠습니다. ㄷㄷ
시작 : 박스 만들기
강아지들이 달릴 박스를 만듭니다.
DIV 태그와 CSS 를 이용하여 뚝딱 만들었네요.
CSS 에 width 를 적용하지 않아서 포함된 영역에 꽉 차도록 했습니다.
DIV 태그와 CSS 를 이용하여 뚝딱 만들었네요.
CSS 에 width 를 적용하지 않아서 포함된 영역에 꽉 차도록 했습니다.
CSS
.dog_land {
border-radius:5px; /* 모서리 둥글게 */
border:5px solid silver; /* 두께 5px 회색 테두리 */
height:200px;
}
HTML
<div class="dog_land"></div>
박스에 강아지 이미지 배경으로 지정하기
이미지를 배경으로 넣는 방법을 사용했습니다.
음 .. 난리가 났네요.
정리 좀 해야겠죠?
음 .. 난리가 났네요.
정리 좀 해야겠죠?
CSS
.dog_land {
background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
background-position:center; /* 이미지 가운데 정렬 */
border-radius:5px; /* 모서리 둥글게 */
border:5px solid silver; /* 두께 5px 회색 테두리 */
height:200px;
}
HTML
<div class="dog_land"></div>
박스에 강아지 적당히 넣기
CSS 설정 background-repeat : repeat-x; 를 사용해서
가로로만 반복 되도록 했습니다.
이제 달리게만 해주면 되겠죠?
가로로만 반복 되도록 했습니다.
이제 달리게만 해주면 되겠죠?
CSS
.dog_land {
background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
background-position:center;
background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
border-radius:5px;
border:5px solid silver;
height:200px;
}
HTML
<div class="dog_land"></div>
링크 : CSS 공작소
background-repeat 예제제이쿼리로 달리게 하자
$('.dog_land').css({ 'background-position' : '-=2' });
이런 간단한 소스로 강아지들을 달리게 만들 수 있습니다.
background-position 의 값을 계속 줄여주면 배경으로 설정된 강아지들이 왼쪽으로 이동합니다.
가로 반복으로 지정되어 있으므로 계속 달려나오는 것처럼 보입니다.
-=2 는 현재값 에서 -2 만큼 해주라는 의미입니다. 현재값을 따로 알 필요없어서 편리한 방법입니다.
오른쪽에서 계속 강아지들이 뛰어 나오고 있죠.
스크립트 처리대신 CSS로 간단히 이런 효과를 적용했습니다.
배경이미지 가로 반복 효과입니다.
이 예제는 CSS속성 간단히 응용 + 적절한 제이쿼리 조합 입니다.
그런데 이걸 어디에 쓰면 좋을까요? ...
그것은 글을 보시는 분들의 몫으로 남겨두겠습니다. (찡긋)
CSS
.dog_land {
background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
background-position:center;
background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
border-radius:5px;
border:5px solid silver;
height:200px;
}
HTML
<div class="dog_land"></div>
자바스크립트
// setInterval 을 이용해서 계속 실행
setInterval(function(){
$('.dog_land').css({ 'background-position' : '-=2' });
}, 20);
자 그럼 여기서 예제를 마치겠습니다.
감사합니다 !!
실행 가능한 소스
링크 : CSS 공작소
background-repeat 예제그냥 끝나면 심심하니 응용해보기 1
아래 버튼을 눌러보세요 ~!
CSS
.dog_land {
background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
background-position:center;
background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
background-size:724px; /* 이미지 원래 사이즈보다 2배 크게 설정 (가로기준) */
bottom:0; /* 하단 기준 0 위치로 */
height:200px;
left:0;
position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
display:none;
z-index:100;
}
HTML
<div class="dog_land"></div>
<button type="button" class="" onclick="$('.dog_land').slideDown()">달려!!</button>
<button type="button" class="" onclick="$('.dog_land').slideUp()">그만!!</button>
자바스크립트
// setInterval 을 이용해서 계속 실행
setInterval(function(){
$('.dog_land').css({ 'background-position' : '-=7' });
}, 20);
실행 가능한 소스
링크 : CSS 공작소
background-repeat 예제그냥 끝나면 심심하니 응용해보기 2
카톡개 프로도를 소환해 봅시다.
CSS
.dog_land {
background-image:url('//ktsmemo.cafe24.com/img/prodo.png');
background-position:center;
background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
background-size:contain; /* 이미지가 잘리지 않는 범위에서 다 보이도록 꽉 채우기 */
cursor:pointer;
display:none;
height:100%;
left:0;
position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
top:0;
width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
z-index:10;
}
HTML
<div class="dog_land" onclick="$('.dog_land').fadeOut(500)"></div>
<button type="button" onclick="$('.dog_land').fadeIn(500)">나와주세요 !!</button>
자바스크립트
// setInterval 을 이용해서 계속 실행
setInterval(function(){
$('.dog_land').css({ 'background-position' : '-=5' });
}, 20);
실행 가능한 소스
링크 : CSS 공작소
background-repeat 예제서비스 : 사용한 이미지 모음

달리는 강아지들

카톡개 프로도
방문해 주셔서 감사드립니다. ^^*
방문해 주셔서 감사드립니다 !!
친절한 설명 감사드립니다~~~
방문과 글 감사드립니다 ^^
더 많은 예제를 올려보도록 해볼게요 !!
좋은정보 감사합니다
방문해 주셔서 감사드립니다. *^^*
아니 이분 다른 게시물도 그렇고 재능낭비하시네ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 근데 재밌는 글이라 그런지 더 이해하기 쉽네여ㅋㅋㅋㅋㅋㅋㅋ
댓글 감사드립니다. 더 재미있는 예제를 언젠가 더 올려보겠습니다. ^^;;;
꾸준함 이란게 참 어렵네요. 댓글 달릴때마다 힘을 얻습니다 !!
댓글 쓰기