[Tistory] 블로그에 눈 내리게 하기

출처 : https://codepen.io/massiebn/pen/vmkwJ

 

 

 

우선 출처에 해당하는 스크립트를 적용만 하면 되는데,

 

본인은 겨울에 해당하는 달에만 눈이 내리게끔 수정을 했다.

 

function doStart() {

    var winter = [11, 12, 1, 2];
    var ctim = new Date();
    var month = parseInt(ctim.toISOString().replace(/-/g,"").slice(4,6));

    if(winter.includes(month)) {
        if (!storm.excludeMobile || !isMobile) {
            doDelayedStart();
        }
        // event cleanup
        storm.events.remove(window, 'load', doStart);
    }
}

 

 

 

 

그리고 기타 나머지 옵션들 설정은 이렇게.

// --- common properties ---

this.autoStart = true;          // Whether the snow should start automatically or not.
this.excludeMobile = false;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 128;      // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 40;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
this.className = null;          // CSS class name for further customization on snow elements
this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.followMouse = false;        // Snow movement can respond to the user's mouse
this.snowColor = '#e8e8e8';        // Don't eat (or use?) yellow snow.
this.snowCharacter = '•';  // • = bullet, · is square on some systems etc.
this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.

// --- less-used bits ---

this.freezeOnBlur = false;       // Only snow when the window is in focus (foreground.) Saves CPU.
this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
this.flakeWidth = 8;            // Max pixel width reserved for snow element
this.flakeHeight = 8;           // Max pixel height reserved for snow element
this.vMaxX = 1;                 // Maximum X velocity range for snow
this.vMaxY = 1;                 // Maximum Y velocity range for snow
this.zIndex = 1000;                // CSS stacking order applied to each snowflake

 

freezeOnBlur 속성을 false 로 해야 백그라운드에서도 실행이 된다.

 

 

 

 

그럼 Happy New Year~☆