JavaScript Fade In/Out 전환효과

이 글은 JavaScript와 CSS opacity 속성을 활용하여 Fade In/Out 효과와 함께 이미지를 전환하는 예제이다. 이 예제를 보기 전에 먼저 이 사이트의 아래 다른 글을 보면 도움이 될 것이다. css opacity(불투명도) DIV 슬라이더(javascript) 이 글에서는 먼저 순수 JavaScript를 활용해서 Fade In/Out 예제를 만들어보고 마지막에 jQuery를 활용하는 방법을 알아보기로 하자. jQuery와 같은 휼륭한 코드 절감 방법이 있음에도 […]

Share the joy
  •  
  •  
  •  
  •  

css opacity(불투명도)

opacity는 HTML 구성요소의 불투명도를 지정하는 css 속성이다. 버전 : CSS3를 지원하는 모든 브라우저에서 사용 가능(일부 브라우저 낮은 버전에서는 verder prefix 필요) 용법 : opacity: n; n=0~1(값이 낮을수록 불투명도가 낮아짐, 즉 투명도가 높아짐. 소숫점 사용 가능, 예 0.1=10%) 1. opacity 예제 (기본값 opacity: 1) (opacity: 0.5) 2. opacity 미지원 브라우저에서 사용 * 지원여부 확인 : http://caniuse.com/css-opacity  

  […]

Share the joy
  •  
  •  
  •  
  •  

JavaScript란 무엇인가?

1. 웹 사이트를 멋지게 동작하게 하는 방법 오늘날의 웹 사이트는 사용자가 마우스 포인터를 움직이거나 휠을 돌려 스크롤에 변화를 주기만 해도 다양한 동작과 내용을 보여준다.  슬라이드 애니메이션이 그렇고, 마우스를 올리면 툭 튀오나오는 도움말이나 페이지를 이동하지 않고도 다른 내용을 화면에 불러다 보는 기능들은 이제 웹 페이지의 기본적인 기능으로 여겨진다. 이렇게 당연시 하게된 기능들은 어떻게 해서 가능한 것일까? 2000년 […]

Share the joy
  •  
  •  
  •  
  •  

DIV 슬라이더(javascript)

이 예제는 Javascript를 활용하여 div 또는 li와 같은 컨테이터(container) 객체에 슬라이드를 적용하는 예제이다. 이 예제에서 슬라이드를 적용하는 원리는 자바스크립트를 활용하여 컨테이터 객체의 왼쪽 좌표값을 정해진 시간 동안 정해진 값만큼 변경하는 방식으로 컨테이너가 슬라이드 되도록 하는 것이다. 슬라이드가 진행될 때는 현재 보이고 있는 장면이 한쪽으로 조금씩 좌표를 이동하고, 동시에 다음 장면이 이어서 좌표를 이동하여 마치 나중에 […]

Share the joy
  •  
  •  
  •  
  •