<div class="main-page-js">
<div class="plx-wrap-main">
  <div class="section"></div>
<div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="70" data-speed-y="10"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="-20" data-speed-y="-30"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="30" data-speed-y="60"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="250" data-speed-y="110"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="-100" data-speed-y="-50"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="100" data-speed-y="100"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="140" data-speed-y="100"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="40" data-speed-y="40"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="-70" data-speed-y="-90"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="-30" data-speed-y="-60"></div>
	<div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="10" data-speed-y="30"></div>
    <div class="plx-wrap-main__petel-plx hide-tab hide-mob" data-speed-x="250" data-speed-y="110"></div>
</div>
  </div>
body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
}

.section {
  height: 600px;
  position: relative;
}

.plx-wrap-main__petel-plx {
    position: absolute;
    z-index: 15;

    &:nth-child(2) {
        background: #ef3731;
        border-radius: 50%;
        width: 199px;
        height: 199px;
        top: 12%;
        left: -5%;
    }

    &:nth-child(3) {
        background: #ef3731;
        border-radius: 50%;
        width: 2px;
        height: 2px;
        top: 12%;
        left: 25%;
    }
    &:nth-child(4) {
        background: #ef3731;
        border-radius: 50%;
        width: 7px;
        height: 7px;
        top: 16%;
        left: 22%;
    }

    &:nth-child(5) {
        background: #ef3731;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        top: 18%;
        left: 27%;
    }

    &:nth-child(6) {
        background: #ef3731;
        border-radius: 50%;
        width: 7px;
        height: 7px;
        top: 55%;
        left: 3%;
    }

        
    &:nth-child(7) {
        background: #ef3731;
        border-radius: 50%;
        width: 2px;
        height: 2px;
        top: 58%;
        left: 5%;
    }

    &:nth-child(8) {
        background: #ef3731;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        top: 62%;
        right: 55%;
    }

    &:nth-child(9) {
        background: #ef3731;
        border-radius: 50%;
        width: 71px;
        height: 71px;
        top: 20%;
        right: 35%;
    }

    &:nth-child(10) {
        background: #ef3731;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        top: 53%;
        right: 45%;
    }

    &:nth-child(11) {
        background: #ef3731;
        border-radius: 50%;
        width: 29px;
        height: 29px;
        top: 15%;
        right: 17%;
    }

    &:nth-child(12) {
        background: #ef3731;
        border-radius: 50%;
        width: 7px;
        height: 7px;
        top: 30%;
        right: 3%;
    }

    &:nth-child(13) {
        background: #ef3731;
        border-radius: 50%;
        width: 2px;
        height: 2px;
        top: 33%;
        right: 15%;
    }
}

@-webkit-keyframes open{
	0%{
		-webkit-transform: scale(1,0);
	}
	100%{
		-webkit-transform: scale(1,1);
	}
}
@-webkit-keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes slideLeft{
	0%{
		-webkit-transform: translateX(120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes slideLeftS{
	0%{
		-webkit-transform: translateX(120%) skewY(-5.75deg);
	}
	100%{
		-webkit-transform: translateX(0%) skewY(-5.75deg);
	}
}
@-webkit-keyframes slideRight{
	0%{
		-webkit-transform: translateX(-120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes moveUp{
	0%{
		-webkit-transform: translateY(0px);
	}
	100%{
		-webkit-transform: translateY(-170px);
	}

}
@-webkit-keyframes zoomIn{
	0%{
		-webkit-transform: scale(0);
	}
	100%{
		-webkit-transform: scale(1);
	}
}
/**/
@-moz-keyframes open{
	0%{
		-moz-transform: scale(1,0);
	}
	100%{
		-moz-transform: scale(1,1);
	}
}
@-moz-keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@-moz-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes slideLeft{
	0%{
		-moz-transform: translateX(120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes slideRight{
	0%{
		-moz-transform: translateX(-120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes moveUp{
	0%{
		-moz-transform: translateY(0px);
	}
	100%{
		-moz-transform: translateY(-170px);
	}

}
@-moz-keyframes zoomIn{
	0%{
		-moz-transform: scale(0);
	}
	100%{
		-moz-transform: scale(1);
	}
}
/**/
@keyframes open{
	0%{
		transform: scale(1,0);
	}
	100%{
		transform: scale(1,1);
	}
}
@keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes slideLeft{
	0%{
		transform: translateX(120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes slideRight{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes moveUp{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(-170px);
	}

}
@keyframes zoomIn{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}
View Compiled

$(document).ready(function () {
    let windowQuery;
    const petelStartWindowPreloader = $('.plx-wrap-main__petel-plx');

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

    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 () {
                    const 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);
            }
        });
    }

    if ($('.main-page-js').length) {
        var loadTime = 0.2;
        TweenMax.from(petelStartWindowPreloader, 1, {
            autoAlpha: 0, y: 60, delay: loadTime, onComplete: function () {
                mainPetelMouseMoveInit();
            }

        });
  
            gsap.utils.toArray(".plx-wrap-main__petel-plx").forEach(star => {
            // tweenProperty(star, "scale", 0.5, 2);
            tweenProperty(star, "x", -10, 20);
            tweenProperty(star, "y", -10, 20);
          });
      
      function tweenProperty(target, prop, min, max) {
  
  var randomDur = gsap.utils.random(1, 4, 0.2, true);
  var randomDelay = gsap.utils.random(0.2, 1.5, 0.2, true);

  gsap.to(target,  {
    [prop]: gsap.utils.random(min, max),
    duration: randomDur(), 
    delay: randomDelay(), 
    ease: 'none',
    onComplete: tweenProperty,
    onCompleteParams: [target, prop, min, max]
  });

}
  
  
    }

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js