backstretch - 백그라운드 배경이미지를 롤링 할 수 있는 제이쿼리 플러그인입니다.
style="background:#efefef;"홈페이지 뒷 배경이 롤링이 되면 좋겠다는 생각을 많이 해봤습니다. 필자는 자바스크립트가 아직 미숙해서 직접 코딩을 할 수가 없었습니다. ㅠㅠ 그래서 혹시나 제이쿼리 플러그인(jQuery Plugins)이 있지 않을까 싶어 열심히 구글(google)링을 하게 되었습니다. 열심히 찾은 보람이 있을까요? 결국 찾아냈습니다.ㅎㅎ backstretch라는 사이트에서 찾아낸건데 생각보다 가볍고 수정하기도 용이하고 초보인 필자도 쉽게 사용할 수 있는 플러그인 이였습니다.
Backstretch.js자 이제 확인해 보겠습니다.
<dead>
<!-- 헤드 안에 두개의 스크립트 주소를 복사해서 넣어주시면됩니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/Backstretch.js" type="text/javascript"></script> <!-- 파일위치에 맞게 설정 해주시면 됩니다. -->
</head>
<!-- 바디 안에 해당 스크립트를 삽입해주시면 됩니다. -->
<body>
<script>
$.backstretch([
"./img/1.jpg" //이미지가 있는 위치에 경로에 맞춘다.
, "./img/2.jpg" // 이미지의 갯수는 계속 늘릴 수 있습니다.
, "./img/3.jpg"
], {duration: 3000, fade: 1000});
</script>
</body>
여기서 duration 은 롤링속도를 의미합니다. fade : 이미지 겹침속도를 의미합니다.
그렇기 때문에 롤링속도와 이미지 겹침속도를 잘 조정하면 스므스하고 고급져 보이는
백그라운드 롤링을 볼 수 있습니다.
Backstretch.js 스크립트를 첨부 하겠습니다.
'IT' 카테고리의 다른 글
| CSS Shapes에서 텍스트가 이미지를 감싸도록 레이아웃을 표현 (0) | 2017.03.07 |
|---|---|
| css content 특성을 다뤄보자. (0) | 2017.03.07 |
| 폭 100 %의 블록을 배치 할 때 창 크기의 예상치 못한 증상 (0) | 2017.03.07 |
| display : inline으로 나란히 한 요소의 "틈새"를 채우기 방법 입니다. (0) | 2017.03.07 |
| "table"코드 샘플 (0) | 2017.03.07 |
댓글