XETOWN

분수 광장

특정한 주제 없이 자유로운 이야기를 나눌 수 있습니다.
조회 수 122 추천 수 0 댓글 9
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form

이벤트스티커 모듈을 이용해 이미 포인트담긴 스티커를 뿌리는 이벤트는 진행하고 있구요.

오늘 눈송이애드온 구매해서 사이트에 적용했는데...

 

포함된 플러그인이 동작하면 속도에 영향을 많이 주네요. 그래서 메인페이지는 속도차이가 느껴질 정도라 적용 못하고

게시판도 적용하지 못하고 나머지 주요 게임들과 이벤트페이지 소개페이지 등에 눈 내리는 것으로 만족하게 되네요~~

 

앱 로딩 이미지도 살짝 크리스마스 이미지 넣어서 앱 실행시 보이게 했구요...(푸시앱 최신버전은 모듈에서 로딩이미지 업로드하면 그게 앱 실행자들에게 보여요.... 수시로 바꿀수 있....)

 

한줄요약 : 눈송이 애드온 이쁜데 속도에 영향을 줌.... ㅋ

  • profile
    보고하비 2016.12.23 16:43:04
    데이터도 그렇고 컴퓨터 GPU도 엄청 잡아 먹긴해요 창 띄워놓고 있으면 놋북발열이 엄청심해지더라구요
  • profile
    웹지기 2016.12.23 16:56:31
    일단 평소 반응이 그다지 빠르지 않은 사이트는 별차이 못느낄 수 있지만 반응이 엄청 빨랐던 사이트에서는 눈치 챌 정도의 속도 저하가 있어요. 그래서 영향이 거의 없는 곳 위주로 사용하고 있네요. 그래도 크리스마스 분위기는 내는게 좋을거 같아서요~
  • profile
    구름이 2016.12.23 17:01:50
    #snow { height: 100%; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; z-index: 1000; }
    .snowStop { background-color: #2c537f; border-radius: 40px 0 0 40px; cursor: pointer; display: none; font-size: 11px; height: 45px; padding-top: 17px; position: fixed; right: -5px; text-align: center; top: 100px; width: 70px; z-index: 1001; color: #fff; }
    .snowShow { background-color: #e8e8e8; border-radius: 10px; cursor: pointer; display: none; height: 20px; position: fixed; right: 10px; top: 120px; width: 20px; z-index: 1001; color: #fff; }

     

    <div class="snowStop">내리는눈<br/>그만보기</div>
    <div class="snowShow"></div>
    <canvas id="snow"></canvas>

     

    jQuery(function() { //jquery ready
        jQuery(".snowStop").on("click", function(){
            jQuery("#snow, .snowStop").remove();
            jQuery(".snowShow").show();
            set_cookie('use_snow', "N", 720);
        });
    
        jQuery(".snowShow").on("click", function(){
            set_cookie('use_snow', "", 720);
            location.reload();
        });
    
        jQuery("#snow").on("click", function(){
            jQuery("#snow").hide();
        });
    });
    
    // 쿠키 get
    function get_cookie(name)
         {
                 var find_sw = false;
                 var start, end;
                 var i = 0;
    
                 for (i=0; i<= document.cookie.length; i++)
                 {
                         start = i;
                         end = start + name.length;
    
                         if(document.cookie.substring(start, end) == name)
                         {
                                 find_sw = true
                                 break
                         }
                 }
    
                 if (find_sw == true)
                 {
                         start = end + 1;
                         end = document.cookie.indexOf(";", start);
    
                         if(end < start)
                                 end = document.cookie.length;
    
                         return document.cookie.substring(start, end);
                 }
                 return "";
         }
    
         // 쿠키 지움
         function delete_cookie(name)
         {
                 var today = new Date();
    
                 today.setTime(today.getTime() - 1);
                 var value = getCookie(name);
                 if(value != "")
                         document.cookie = name + "=" + value + "; path=/; expires=" + today.toGMTString();
         }
    
         // 쿠키 입력
        function set_cookie(name, value, expirehours)
        {
                var today = new Date();
                today.setTime(today.getTime() + (60*60*1000*expirehours));
                document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        }
    
    
    // 비동기식 jQuery이므로 window load 후 jQuery를 실행해야 함
    window.onload = function() {
    if(get_cookie("use_snow") != "N") {
            jQuery(".snowStop").show();
            var snow_layer = document.getElementById("snow");
            var snow = snow_layer.getContext("2d");
            var w_width = jQuery(window).width();
            var w_height = jQuery(window).height();
            snow_layer.width = w_width;
            snow_layer.height = w_height;
    
                            var snow_cnt = 80; //눈 갯수
            var snow_max_size = 3; // 눈 크기
                            var grain = [];
            for(var i=0; i<snow_cnt; i++) {
                    grain.push({ x:Math.random()*w_width, y:Math.random()*w_height, r:Math.random()*snow_max_size+1, d:Math.random()*snow_cnt });
            }
    
            function draw() {
                    snow.clearRect(0, 0, w_width, w_height);
                    snow.fillStyle = "rgba(250, 250, 250, 0.8)";
                    snow.beginPath();
                    for(var i=0; i<snow_cnt; i++) {
                    var p = grain[i];
                    snow.moveTo(p.x, p.y);
                    snow.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
                    }
                    snow.fill();
                    update();
            }
    
            var angle = 0;
            function update() {
                    angle += 0.01;
                    for(var i=0; i<snow_cnt; i++) {
                    var p = grain[i];
                    p.y += Math.cos(angle+p.d)+1+(p.r/2);
                    p.x += Math.sin(angle)*2;
    
                    if(p.x>w_width+5 || p.x<-5 || p.y>w_height) {
                            if(i%3 > 0) {
                            grain[i] = {x:Math.random()*w_width, y:-10, r:p.r, d:p.d};
                            } else {
                            if(Math.sin(angle)>0)
                                    grain[i] = {x:-5, y: Math.random()*w_height, r:p.r, d:p.d};
                            else
                                    grain[i] = {x:w_width+5, y:Math.random()*w_height, r:p.r, d:p.d};
                            }
                    }
                    }
            }
    
            setInterval(draw, 33);
        } else {
    
            jQuery("#snow, .snowStop").remove();
            jQuery(".snowShow").show();
    
        }
    }

     

    레이아웃에 있는 js,css,html 적용하시면 될겁니다.

    모바일도 작동 될거에요.

  • profile
    웹지기 2016.12.23 17:04:21
    오... 해보고 싶은 충동이 ㅋㅋ 일단 구성해 놓은 사이트 구경좀 할게요 ㅋ
  • profile
    구름이 2016.12.23 17:21:06
    네.. 5시30분 정도 되면 눈송이는 내릴겁니다 ㅎ
    제 사이트 성격이랑은 맞지 않아서요.
  • profile
    웹지기 2016.12.23 17:33:34
    이 소스가 그나마 속도저하가 덜 한 듯 하네요. 요거로 크리스마스때 까지만 써야 겠습니다.
  • profile
    웹지기 2016.12.23 17:28:13
    소스 감사합니다. 일단 그냥 애드온에다가 이 소스를 다 넣어버렸어요 ㅋㅋ
    일단 동작은 되는데요. 속도도 살펴볼게요.
  • profile
    구름이 2016.12.23 17:43:53

    setInterval(draw, 33);
    이부분에서 33 <- 숫자를 높혀주면 브라우저에 부담이 덜할겁니다.
    다만 눈송이 내리는 속도가 느려 질거에요.
    적당히 타협하셔서 세팅하시길

  • profile
    웹지기 2016.12.23 17:45:14

    그렇군요. 노트북이 힘들어해요. 그리고 너무 빨라서 좀 높이는게 좋겠네요 감사합니다!


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
4378 자유 오늘 가입했습니다! 6 민도 2016.12.28 87
4377 자유 조지 마이클 사망 2 구미호 2016.12.26 133
4376 자유 메리 크리스마스 그리고..... 7 file 아파치 2016.12.26 74
4375 자랑해요 일베식 실시간 알림 18 file 후하니 2016.12.26 401
4374 자유 출석 1등이나 2등 할려고 했지만 3 구미호 2016.12.26 78
4373 자유 크리스마스날인데 글 올린 사람이 11 제이엔지 2016.12.25 116
4372 자유 개인 능력 이상의 모듈을 만들려고 합니다. 3 후하니 2016.12.24 207
4371 자유 오랫만에 XE 공홈좀 살펴봤는데 2 도현다크 2016.12.24 193
4370 자유 베네수엘라 윈도우10 대란 막차 꼬리칸 탑승 15 해람 2016.12.24 263
4369 자유 메리 크리스마스 9 제이엔지 2016.12.24 118
4368 자유 이사 끝내고 접햇습니다. 3 언션 2016.12.23 93
» 자유 크리스마스 분위기 내려고~~ 9 웹지기 2016.12.23 122
4366 자유 라이믹스+슈퍼캐시.. 그리고 XE3.. 8 루딩 2016.12.23 199
4365 유머/엽기 패딩 384만원 6 file Hafree 2016.12.22 168
4364 자유 ATOM 이라는 에디터 타격감 굉장하군요 11 file 구름이 2016.12.22 455
4363 자유 XE3 깔아봤습니다. 3 file 고양이 2016.12.22 277
4362 자유 12월 포인트 나눔 추첨 결과입니다. 20 file 기진곰 2016.12.22 160
4361 자유 오늘이 동지라는데 10 제이엔지 2016.12.21 114
4360 하소연 8시인데 ㅠ.ㅠ 아무도 안와여T^T방송 망햇서..ㅠㅠ 3 람보 2016.12.21 184
4359 자유 포인트 나눔합니다 (추첨: 12월 21일까지) 54 file 기진곰 2016.12.18 306
Board Pagination Prev 1 ... 9 10 11 12 13 14 15 16 17 18 ... 232 Next
/ 232
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...