var $layer_0 = $('.layer-0'),
$layer_1 = $('.layer-1'),
$layer_2 = $('.layer-2'),
$x_axis = $('#x-axis'),
$y_axis = $('#y-axis'),
$container = $('body'),
container_w = $container.width(),
container_h = $container.height();
$(window).on('mousemove.parallax', function(event) {
var pos_x = event.pageX,
pos_y = event.pageY,
left = 0,
top = 0;
left = container_w / 2 - pos_x;
top = container_h / 2 - pos_y;
TweenMax.to(
$x_axis,
1, {
css: {
transform: 'translateX(' + (left * -1) + 'px)'
},
ease: Expo.easeOut,
overwrite: 'all'
});
TweenMax.to(
$y_axis,
1, {
css: {
transform: 'translateY(' + (top * -1) + 'px)'
},
ease: Expo.easeOut,
overwrite: 'all'
});
TweenMax.to(
$layer_2,
1, {
css: {
transform: 'translateX(' + left / 12 + 'px) translateY(' + top / 6 +
'px)'
},
ease: Expo.easeOut,
overwrite: 'all'
});
TweenMax.to(
$layer_1,
1, {
css: {
transform: 'translateX(' + left / 4 + 'px) translateY(' + top / 2 +
'px)'
},
ease: Expo.easeOut,
overwrite: 'all'
});
TweenMax.to(
$layer_0,
10, {
css: {
transform: 'rotate(' + left / 200 + 'deg)'
},
ease: Expo.easeOut,
overwrite: 'none'
}
)
});
html,
body {
background-color: #010c0d;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
padding: 50px 0;
}
.axis {
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
z-index: 100;
}
.planet {
background-size: cover;
left: 50%;
position: absolute;
top: 50%;
}
#background {
/* Картинку фона */
background-image: url("https://img1.goodfon.ru/original/1280x800/4/8c/peyzazh-nebo-goluboe-solnce.jpg");
background-repeat: no-repeat;
background-size: cover;
bottom: -20%;
left: -10%;
position: absolute;
right: -10%;
top: -20%;
}
#x-axis {
bottom: -50%;
left: 50%;
top: -50%;
width: 1px;
}
#y-axis {
left: 0;
top: 50%;
right: 0;
height: 1px;
}
#planet-1 {
margin: -75px 0 0 -75px;
height: 150px;
width: 150px;
/* Картинку планеты №1 */
background-image: url("https://purepng.com/public/uploads/thumbnail/purepng.com-earthearthplanetglobethird-planet-from-the-sun-1411526987783s16t2.png");
z-index: 20;
}
#planet-2 {
margin: -100px 0 0 -100px;
height: 200px;
width: 200px;
/* Картинку планеты №2 */
background-image: url("https://purepng.com/public/uploads/thumbnail/purepng.com-earthearthplanetglobethird-planet-from-the-sun-1411526987783s16t2.png");
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Нужно вставить скрипт и поменять 3 изображения, фона, планеты №1, планеты №2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<div id="background" class="layer-0"></div>
<div id="x-axis" class="axis"></div>
<div id="y-axis" class="axis"></div>
<div id="planet-1" class="planet layer-1"></div>
<div id="planet-2" class="planet layer-2"></div>
TweenMax
ну или скажем подгрузка плагина? – RifmaMan 30 апр в 13:12