이벤트스티커 모듈을 이용해 이미 포인트담긴 스티커를 뿌리는 이벤트는 진행하고 있구요.
오늘 눈송이애드온 구매해서 사이트에 적용했는데...
포함된 플러그인이 동작하면 속도에 영향을 많이 주네요. 그래서 메인페이지는 속도차이가 느껴질 정도라 적용 못하고
게시판도 적용하지 못하고 나머지 주요 게임들과 이벤트페이지 소개페이지 등에 눈 내리는 것으로 만족하게 되네요~~
앱 로딩 이미지도 살짝 크리스마스 이미지 넣어서 앱 실행시 보이게 했구요...(푸시앱 최신버전은 모듈에서 로딩이미지 업로드하면 그게 앱 실행자들에게 보여요.... 수시로 바꿀수 있....)
한줄요약 : 눈송이 애드온 이쁜데 속도에 영향을 줌.... ㅋ
#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 적용하시면 될겁니다.
모바일도 작동 될거에요.
setInterval(draw, 33);
이부분에서 33 <- 숫자를 높혀주면 브라우저에 부담이 덜할겁니다.
다만 눈송이 내리는 속도가 느려 질거에요.
적당히 타협하셔서 세팅하시길
그렇군요. 노트북이 힘들어해요. 그리고 너무 빨라서 좀 높이는게 좋겠네요 감사합니다!