본문으로 바로가기

랜덤 로우폴리 배경화면(Lowpoly Dynamic Background)

로딩중..
2016.04.14 05:06

랜덤 로우폴리 배경화면 입니다.

페이지가 새로고침 될 때마다 새로운 로우폴리 색상과 패턴이 나타납니다.


페이지 새로고침



<script src="//cdnjs.cloudflare.com/ajax/libs/trianglify/0.1.5/trianglify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script type="text/javascript">
var rn = Math.floor((Math.random() * 150) + 60);
var rs = Math.floor((Math.random() * 11) + 4);
	var t = new Trianglify({
 x_gradient: Trianglify.colorbrewer.Spectral[rs],
    noiseIntensity: 0,
    cellsize: rn
});
var pattern = t.generate(window.innerWidth, window.innerWidth+200);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);
</script>
</body>

스킨 HTML 편집에서 </body>위에 붙여넣기 하면 됩니다.


PC화면에서만 적용 되게 하려면 

if (window.matchMedia('(min-width: 992px)').matches){ ... };

위 해당 코드를 사용해 아래처럼 감싸 주면 됩니다.



신고

댓글을 달아 주세요

  1. BlogIcon 첼시♬ 2016.04.14 16:06 신고

    앗 신기하네요? ㅋㅋㅋㅋㅋ
    새로고침 계속 눌러봤습니다. ㅋㅋㅋ

    • BlogIcon COCOSOFT COCO Media 2016.04.15 14:20 신고

      요즘 로우폴리 이미지를 잘활용하는 곳들이 많더라구요+_+ ㅋㅋ 선거방송에서도 배경으로 활용하는 것도 보고 이것도 디자인 잘만하면 예쁠 것 같아요.

  2. BlogIcon 유쾌한삼이 2016.11.02 10:02 신고

    와.. 정말 좋네요 잘 배우고 갑니다.

  3. BlogIcon 도도한언니 2016.12.12 15:28 신고

    ㅎㅎ감사합니다 너무 쉽게 적용했어요!!
    예뻐서 계속 보게 되네요 ㅎㅎㅎ

티스토리 툴바