На чем сделана такая анимация?

Question

[Александр Осадчий]

Здравствуйте!

Подскажите пожалуйста, на чем сделана такая анимация - летающие объекты на странице + реагируют на движение курсора

multimed.com.ua

Answer 1

[WapSter]

Кусок кода отвечающий за это с сайта примера разбирайся)

//first window parallax petel
    var $parallaxContainer = $(".plx-wrap-main"); //our container
    var $parallaxItems = $parallaxContainer.find(".plx-wrap-main__petel-plx");  //elements
    var $parallaxContainerSecond = $(".features-window__container"); //our container
    var $parallaxItemsSecond = $parallaxContainerSecond.find(".features-window__petel-plx");  //elements
    var fixer = 0.0007;		//experiment with the value
    var wait = false;
    var waitSecond = false;
    var speedX, speedY, pageX, pageY;

    //main window petel init
    function mainPetelMouseMoveInit() {
        $(document).on("mousemove", function(event){
            if(!wait){
                pageX =  event.pageX - ($parallaxContainer.width() * 0.5);
                pageY =  event.pageY - ($parallaxContainer.height() * 0.5);

                $parallaxItems.each(function(){
                    var item 	= $(this);
                    speedX	= item.data("speed-x");
                    speedY	= item.data("speed-y");

                    TweenLite.to(item,1.3, {
                        x: -(item.position().left + pageX * speedX )*fixer,
                        y: -(item.position().top + pageY * speedY)*fixer,
                        ease: Power3.easeNone
                    });
                });
                wait = true;
                setTimeout(function(){ wait = false; },120);
            }
        });
    }

    //main window petel disable
    function petelMouseMoveUnbind() {
        $(document).off('mousemove');
    }

    //second window petel init
    function secondPetelMouseMoveInit() {
        $(document).on("mousemove", function(event){
            if(!waitSecond){
                pageX =  event.pageX - ($parallaxContainerSecond.width() * 0.5);
                pageY =  event.pageY - ($parallaxContainerSecond.height() * 0.5);

                $parallaxItemsSecond.each(function(){
                    var item 	= $(this);
                    speedX	= item.data("speed-x");
                    speedY	= item.data("speed-y");

                    TweenLite.to(item,1.3, {
                        x: -(item.position().left + pageX * speedX )*fixer,
                        y: -(item.position().top + pageY * speedY)*fixer,
                        ease: Power3.easeNone
                    });
                });
                waitSecond = true;
                setTimeout(function(){ waitSecond = false; },120);
            }
        });
    }

Comments

[Александр Осадчий]

Быстро вы))
Спасибо!)