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

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

Подскажите пожалуйста, на чем сделана такая анимация - летающие объекты на странице + реагируют на движение курсора
multimed.com.ua
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript
Сверстаю что-нибудь интересное на халяву
Кусок кода отвечающий за это с сайта примера разбирайся)
//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);
            }
        });
    }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы