위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 jQuery 플러그인 등이 있지만 간단하게 jQuery의 each(), animate(), delay() 를 사용하면 구현할 수 있다. 약간의 css 까지 더해지면 더할나위 없을지도 모른다. 아래는 간단한 문서구조이다. <ul> <li class=”first”> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> <li> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> </ul> …
요즘 jQuery 애니메이션을 많이 작업하게 되는 것 같다. 모바일기기.. 특히 애플 기기에서는 플래시는 볼 수가 없으니 jQuery를 이용해서 애니메이션을 구현할 수 밖에 없다. 사무실에서 그게 가능한 건 나 밖에 없으니.. 나만 죽어나는 듯한 느낌? ㅋ 그래도 덕분에 실력은 정말 빠르게 늘어나고 있는 것 같다. 정말이다. ㅎㅎ 지난 새벽까지 작업을 해서 완성한 사이트 sitool 홍보 사이트은 …
jQuery를 접한 지 아직 1년도 되지 않은 것 같은데 참 많은 걸 시도해 보고 있다. 지난 주에는 이번에 처음시도하는 백그라운드에 영상을 넣고 그 위에서 각 요소들의 애니메이션 되도록 하는 것을 만들었다. 혼자 애니메이션을 기획 한 것은 아니고 함께 일하는 디자이너의 시나리오를 바탕으로 jQuery와 다양한 jQuery 플러그인을 이용해서 구현을 시도했다. 쉽지 않은 작업일 것이라 생각했고 역시나 …
함께 일하는 실장님의 강력한 요청으로 반응형 웹이라고 해야할지.. 화면 해상도 크기에 따라서 리스트의 이미지 개수와 배치가 자동으로 바뀌는 것을 구현해야만 했다. 일단 jQuery를 이용해서 그런 기능을 가능하게 해주는 것은 공개가 되어 있는 상태.. 난 그걸 이용하기만 하면 되는데.. 알다시피 난 jQuery 초보기 때문에.. 어려움이 예상됐다. 사이트 : http://masonry.desandro.com/ 위 사이트 접속해보면 어떤 기능인지 쉽게 알 …