[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; 
}

$("#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/

[tinypng/optimizilla] png 파일 용량 줄여주는 사이트

이미지 작업을 하고 사이트에 업로드를 하는 경우, png 용량 크기가 생각보다 커서 업로드를 하지 못하는 경우가 생기고는 합니다. 

그럴 때 포토샵으로 용량을 줄이는 방법보다 더 손쉽게 png 파일의 용량을 줄일 수 있는 방법이 있는데 

바로 png 파일 용량을 줄여주는 사이트를 이용하는 것이죠. 

제가 소개해드릴 사이트는 총 두 곳인데 다른 사이트들을 살펴보니 

이 두 곳이 가장 잘 알려진 대표적인 사이트같습니다. 

1. tinypng (https://tinypng.com/)

대나무 잎사귀를 먹고 있는 팬더 캐릭터가 반겨주는 tinypng 사이트입니다. 

png용량을 줄여준다라는 점에서는 optimizilla와 다르지는 않지만 

포토샵 플러그인CC 2017의 최신버전과 완벽하게 호환된다는 점과 

워드프레스의 플러그인으로도 활용이 가능하다는 특징이 있습니다. 

(워드프레스 플러그인에서 무료계정을 사용하면 매달 약 100개의 이미지를 최적화할 수 있다고 하네요.)

2. optimizilla (http://optimizilla.com/ko/)

심플한 공룡캐릭터와 함께 깔끔한 느낌을 주는 optimizilla 사이트입니다. 

용량을 줄이는데에 중점을 둔 tinypng와 다른 점이 있다면 이미지의 해상도를 조절할 수 있다는 점인데요, 

육안으로 원본과 해상도 비교 확인이 가능하며 혹시라도 용량이 덜 줄어들었다하는 부분을 

해상도를 줄임으로써 용량을 더 줄일 수 있다는 장점이 있죠.

 소개해드린 두 사이트는 최대 20개의 이미지 용량을 줄여줄 수 있고 png는 물론 jpg의 용량까지도 줄여주면서 

이미지의 품질을 최대한 오리지널에 가깝게 만들어주는 특징이 있습니다. 

용량을 줄여주는 진행상황을 막대그래프로 보여주기 때문에 진행상황을 체크할 수 있어 편리하죠. 

단순히 png를 줄이기 위해서 쓰셔도 좋고 포토샵이 없을때, png 또는 jpg의 용량을 편하게 줄이고 싶을때 쓰셔도 좋습니다. 

이렇게 편하게 png 용량 줄일 수 있는 사이트가 두군데나 있다는게 얼마나 감사한지. 

덕분에 저도 자주자주 이용하고 있습니다. 가장 중요한 사실은 이 두 사이트 전부 무료라는 거니까요. 

[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션

이번에 소개할 제이쿼리 플러그인은, css만으로 애니메이션 효과를 쉽게 구현할 수 있는 animate 제이쿼리 플러그인과 

스크롤을 하면 지정한 위치 영역에 이벤트를 발생시키는 waypoints 제이쿼리 플러그인 이렇게 두가지 입니다. 

waypoints 같은 경우는 앞글, 카운트업(보러가기)의 스크립트 설명 때에 잠시 나왔었는데, 

스크롤에 맞춰 이벤트가 실행되기 때문에 스크롤이 느리게, 혹은 빠르게 내려간다하더라도 

이벤트가 늦게 나오거나 이벤트가 (이미 실행된 뒤이기 때문에 멈춰보이거나 하는 일들이 현저히 줄어들게 됩니다. 

게다가 이미지들이 살아있는 것처럼 움직여주는 animate를 함께 쓰게 되면 웹페이지를 보다 생동감있게 표현할 수 있게 되는거죠.

https://github.com/daneden/animate.css

https://github.com/imakewebthings/waypoints

위 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 페이지에서 해당 파일을 다운받아주세요. 

페이지가 열리지 않는다면 여기서 다운받아주세요.

waypoints-master.zip

animate.css-master.zip

waypoints는 lib 폴더 안에 jquery.waypoints.min.js를 가져와주시고 animate는 animate.min.css를 가져와주시면 됩니다. 

각각 받은 파일을 폴더에 넣고 아래 스크립트를 </head> 안의 ctrl+c, ctrl+v 해주세요.

<link rel="stylesheet" href="animate.min.css">
<script src="jquery.waypoints.min.js"></script>

<div id="blue"> ... </div>
<div id="red" class="animated"> ... </div>
<div id="yellow"> ... </div>

$(document).ready(function(){
  $('#red').css('opacity', 0);
 
  $('#red').waypoint(function() {
      $('#red').addClass('원하는 애니메이션효과');
  }, { offset: '50%' });
 
});

 원하는 애니메이션 효과라고 써놓은 부분은 

https://daneden.github.io/animate.css/에 들어가셔서 

원하시는 애니메이션 효과를 골라 적용하시면 됩니다. 

 offset 값은 애니메이션이 나타나는 지점을 결정하는 값으로 50%정도로 적용시켜놓으면 

애니메이션이 나와야하는 영역의 맨 앞이 보이는 화면의 50% 스크롤이 이동되고 나서야 이벤트가 적용됩니다.  

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

참조사이트 :  https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

+ 

해당 소스로 진행했을 때, 내용이 전혀 먹히지 않는다는 문의가 있었습니다.

이 글을 올렸을 당시가 2017년도로 당시 animate.css버전이 3.5.2였는데,

현재는 4.1.1로 업그레이드도 된 데다가 classname이 변경된 사항을 뒤늦게 확인하였습니다.

변경 전 : class="animated" 
변경 후 : class="animate__animated"

변경 전 : fadeInLeft
변경 후 : animate__fadeInLeft

아래는 현재 버전으로 수정된 소스이며,

상세 내용은 https://animate.style/ 사이트에서 확인 부탁드립니다.