카테고리

분류 전체보기 (509)
문학 (128)
찬양 콘티(Continuity) (80)
Business as heritage (6)
IT . Web (148)
Photo (127)
etc. (20)
Total413,431
Today4
Yesterday10






블로그 이미지

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=62574&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B5%FB%B6%F3%B4%D9%B4%CF%B4%C2&sop=and에서 스크랩했습니다.
전 게을러서 재사용성 고려가 늘 D+인데 프로토타입까지.. 너무 고마운 작성자님이십니다.

사용법도 작성자님의 디자인덕에 매우 쉽습니다. 선언본문을 어딘가에 배치하거나 링크하신 다음,

StickerManager.add("self_banner",1360,"Bounce");
1: 배너의 id
2: 애니메이션 타임 - 짧으면 빨리 움직입니다.
3: 효과이름 - 수학이랑 친하질 못해서 정확한 설명은 못드리지만 Elastic, Bounce, Expo 가운데 골라 쓰실 수 있습니다.

* 스크롤되어도 유지되는 '브라우저 내용 최상단으로부터의 pixel값'은 '최초 배너가 위치한 높이값'입니다.


== 이하 선언본문 ==

var StickerAnimation = function(){};
StickerAnimation.prototype = {
    duration : null,
    obj : null,
    from : null,
    to : null,
    timer : 0,
    step : 0,
    start : function(obj, from, to, duration, type){
        var self = this;
        this.obj = obj;
        this.from = from;
        this.to = to;
        this.now = new Date;
        this.duration = duration || 1000;
        this._delta = this['_delta' +(type || 'Elastic')];
        if(this.timer)
            this.stop();
        this.timer = setInterval(function(){self.run();}, 10);
    },
    run : function(){
        var time = ((new Date) - this.now) / this.duration;
        var delta = this._delta(time);
        var step = Math.pow(2, this.step);
        var dep_x = (this.to.x - this.from.x) * delta;
        var dep_y = (this.to.y - this.from.y) * delta;
        if(time > 1){
            this.stop();
            this.end();
        }else{
            this.obj.style.marginLeft = this.from.x + dep_x + "px";
            this.obj.style.marginTop = this.from.y + dep_y + "px";
        }
    },
    end : function(){
        this.obj.style.marginLeft = (this.to.x) + "px";
        this.obj.style.marginTop = (this.to.y) + "px";
    },
    stop : function(){
        clearInterval(this.timer);
        this.timer = 0;
    },
    _deltaBounce : function(pos){
        var p = 1 - pos;
        var value;
        for (var a = 0, b = 1; 1; a += b, b /= 2){
            if (p >= (7 - 4 * a) / 11){
                value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
                break;
            }
        }
        return 1 - value;
    },
    _deltaExpo : function(pos){
        var p = 1 - pos;
        return 1 - Math.pow(2, 8 * (p - 1));
    },
    _deltaElastic : function(pos){
        var p = 1 - pos;
        return 1 - Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * 1 / 3);
    },
    _deltaStatic : function(pos){
        return 1;
    }
}
var StickerManager = {
    init : false,
    stickers : [],
    opts : [],
    add : function(id, duration, type){
        if(!this.init){
            var self = this;
            var init_event = function(){self.oninit();};
            var scroll_event = function(){self.onscroll();};
            if(window.attachEvent){
                window.attachEvent('onload', init_event);
                window.attachEvent('onscroll', scroll_event);
            }else{
                window.addEventListener('load', init_event, false);
                document.addEventListener('scroll', scroll_event, false);
            }
            this.init = true;
        }
        this.stickers.push(id);
        this.opts.push({duration:duration,type:type});
    },
    oninit : function(){
        var sticker;
        for(var x = 0, len = this.stickers.length; x < len; x++){
            sticker = document.getElementById(this.stickers[x]);
            if(!sticker){
                alert(this.stickers[x] + ' is bad id.');
                this.stickers[x] = null;
                continue;
            }
            this.stickers[x] = sticker;
            sticker.style.marginLeft = sticker.style.marginTop = "0px";
        }
    },
    onscroll : function(){
        var left = parseInt(document.body.scrollLeft);
        var top = parseInt(document.body.scrollTop);
        var sticker;
        for(var x = 0, len = this.stickers.length; x < len; x++){
            sticker = this.stickers[x];
            if(!sticker)
                continue;
            if(!sticker.animation){
                sticker.animation = new StickerAnimation();
            }else{
                sticker.animation.stop();
            }

            sticker.animation.start(
                sticker,
                {x:parseInt(sticker.style.marginLeft), y:parseInt(sticker.style.marginTop)},
                {x:left, y:top},
                this.opts[x].duration,
                this.opts[x].type
            );
        }
    }
}
Posted by One of Remnants

댓글을 달아 주세요

달력

« » 2021.6
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

최근에 받은 트랙백

글 보관함