이미지 바운스 & 랜덤 이미지

이미지를 통통 튕겨봅시다!

제 블로그에 보면 좌측 하단에 캐릭터가 통통 튕기는 모습을 보실수 있죠!? 이번에는 요고를 한번 알려드리도록 하겠습니다. 늘 말씀드리지만 최소의 노력을 최대의 효과를 올리는 팁이기 때문에 어려워 하실필요 없습니다! 지금까지의 저의 팁들을 따라하셨다면 이건 뭐 눈감고도 하실거에요! :) [ 플로팅 이미지 코드와 비슷한 효과입니다 ]

CSS CODE

.tongtong_img {position:fixed; bottom:-20px; left:0px; animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;}
@keyframes bounce {
  from { transform: translateY(0px); } to { transform: translateY(-15px); }
}
@-webkit-keyframes bounce {
  from { transform: translateY(0px); } to { transform: translateY(-15px); }
}

CSS에 위의 코드 중 bottom과 left를 통해서 이미지 위치를 정할수 있구요. 아래 translateY 수치를 통해서 튕기는 모습을 조정을 할 수 있습니다! 직접 수치 바꿔가면서 해보시는걸 추천드려요! 그래야 기억에 오래 남죠! (귀찮아서가 아니에요..)

HTML CODE

<div class="tongtong_img">
<img src="Your_Img">
</div>

추가! 랜덤으로 이미지 출력하기

지금 제 블로그 처럼 새로고침을 할때마다 랜덤으로 이미지를 출력하고 싶다면 요대로 따라해보세요! 일단 이미지 3개를 랜덤으로 돌린다는 가정하로 할게요 :)

이미지 명을 우선 맞춰줍니다. tongtong_1, tongtong_2, tongtong_3 이런식으로 뒤에 숫자만 변경되고 앞은 똑같이 맞춰주세요. 그리고 티스토리에 업로드 하세요!

SCRIPT CODE

<div class="tongtong_img">
<script><!--
	imgid=Math.round(Math.random()*3)
	document.write("<img src=./images/tongtong_"+imgid+".png>");
//--></script>
</div>

보시면 Math.random()*3 이 부분에 숫자가 자신이 돌릴 랜덤 이미지의 갯수를 적으시면 됩니다! 그리고 다음줄에 경로와 이미지명의 숫자를 제외하고 경로를 써주시고 jpg와 png 확장자명도 확인해서 적어주시면 되겠습니다. 참쉽죠?^-^

그러나 이제 이렇게 배경을 적용하셨을때 특히 반응형 사이트일 경우에 사이트 사이즈가 줄어들시 이미지 크기에 따라서 컨텐츠들을 가리게 됩니다. 그래서 그럴때는 이미지를 사라져 주게 해야되겠죠? 아래와 같이 하면 됩니다!

미디어쿼리 팁 CSS CODE

@media all and (min-width:320px) and (max-width:1024px){
.tongtong_img{display:none;}
}

위의 코드를 CSS 탭에 넣어주시면 됩니다. 해석하자면 브라우저의 너비가 320px이상 그리고 1024이하면 tongtong_img를 none(없애라) 입니다.^-^ 요렇게 해주시면 이미지가 사라지겠죠?

자 끝입니다! 위의 코드대로 진행하셨다면 제가 사이트에 적용한 그대로의 모습을 보실수 있습니다! 참 쉽죠? 원래 알면 쉽고 모르면 어려운게 이 세계의 매력이죠! 그럼 다음에 또 즐거운 팁으로 찾아올게요~ :)