Доброго времени суток. Переписывая слайдер, столкнулся с проблемой: событие мыши .mousemove() мне не совсем понятно. Представляю, как оно работает, однако не могу написать правильные строчки кода. Необходимо, чтобы при наведении курсора мыши на слайд, тот разворачивался на 75% экрана, а остальные разбегались в стороны и уменьшались до 5% каждый.
Демо
Кадр из презентации:
$(document).ready(function() {
const $cont = $('.cont');
const $slide = $('.slide');
const $closeBtn = $('.slide__close')
const $text = $('.slide__text');
const $iconTwitter = $('.icon-link--twitter');
const numSlides = 6;
const initialAnimDur = 5705;
const animDelay = 1000;
let initialAnim = true;
let clickAnim = false;
$(document).on('click', '.slide__bg-dark', function() {
if (initialAnim || clickAnim) return;
let _this = $(this).parent();
let target = +_this.attr('data-target');
clickAnim = true;
_this.css({
'transform': 'translate3d(-100%, 0, 0)',
'transition': '750ms',
'cursor': 'default'
})
_this.find('.slide__img-wrapper').css({
'transform': 'translate3d(0, 0, 0) scale(.95, .95)',
'transition': '2000ms'
})
for (let i = target, length = $slide.length; i < length; i++) {
$('.slide--' + (i + 1)).css({
'transform': 'translate3d(0, 0, 0)',
'transition': '750ms'
})
}
for (let i = target, length = $slide.length; i > 1; i--) {
$('.slide--' + (i - 1)).css({
'transform': 'translate3d(-125%, 0, 0)',
'transition': '750ms'
})
}
setTimeout(function() {
$slide.not(_this).find('.slide__bg-dark').css({
'opacity': '0'
})
}, 750)
$closeBtn.addClass('show-close');
$iconTwitter.addClass('icon-show');
_this.find('.slide__text').css({
'transform': 'translate3d(150px, -40%, 0)',
'opacity': '1',
'transition': '2000ms',
'-webkit-transition': '2000ms'
})
});
$(document).on('mousemove', '.slide', function() {
if (initialAnim || clickAnim) return;
let _this = $(this);
let target = +_this.attr('data-target');
_this.css({
'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - (target - 1))) + 7) + '%, 0, 0)',
'transition': '750ms'
})
_this.find('.slide__text').css({
'transform': 'translate3d(0, -20%, 0) rotate(0.01deg)',
'-moz-transform': 'translate3d(0, -20%, 0) rotate(0.01deg)',
'opacity': '1',
'transition': '750ms',
'-webkit-transition': '750ms'
})
for (let i = target, length = $slide.length; i < length; i++) {
$('.slide--' + (i + 1)).css({
'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - ((i + 1) - 1))) - 7) + '%, 0, 0)',
'transition': '750ms'
})
}
for (let i = target; i > 1; i--) {
$('.slide--' + (i - 1)).css({
'transform': 'translate3d(-' + (((100 / numSlides) * (numSlides - ((i - 1) - 1))) + 7) + '%, 0, 0)',
'transition': '750ms'
})
}
_this.find('.slide__img-wrapper').css({
'transform': 'translate3d(-200px, 0, 0) scale(.85, .85)',
'transition': '750ms'
})
$slide.not(_this).find('.slide__img-wrapper').css({
'transform': 'translate3d(-200px, 0, 0) scale(.90, .90)',
'transition': '1000ms'
})
$slide.not(_this).find('.slide__bg-dark').css({
'opacity': '0'
})
});
$(document).on('mouseleave', '.slide', function() {
if (initialAnim || clickAnim) return;
let _this = $(this);
let target = +_this.attr('data-target');
for (let i = 1, length = $slide.length; i <= length; i++) {
$('.slide--' + i).css({
'transform': 'translate3d(-' + (100 / numSlides) * (numSlides - (i - 1)) + '%, 0, 0)',
'transition': '1000ms'
})
}
$slide.find('.slide__img-wrapper').css({
'transform': 'translate3d(-200px, 0, 0) scale(1, 1)',
'transition': '750ms'
})
$slide.find('.slide__bg-dark').css({
'opacity': '0'
})
$text.css({
'transform': 'translate3d(0, -50%, 0) rotate(0.01deg)',
'opacity': '0',
'transition': '200ms',
'-webkit-transition': '200ms'
})
});
$(document).on('click', '.slide__close', function() {
setTimeout(function() {
clickAnim = false;
}, 1000);
$closeBtn.removeClass('show-close');
$iconTwitter.removeClass('icon-show');
for (let i = 1, length = $slide.length; i <= length; i++) {
$('.slide--' + i).css({
'transform': 'translate3d(-' + (100 / numSlides) * (numSlides - (i - 1)) + '%, 0, 0)',
'transition': '1000ms',
'cursor': 'pointer'
})
}
$text.css({
'transform': 'translate3d(150px, -40%, 0)',
'opacity': '0',
'transition': '200ms',
'-webkit-transition': '200ms'
})
setTimeout(function() {
$text.css({
'transform': 'translate3d(0, -50%, 0)'
})
}, 200)
})
setTimeout(function() {
$cont.addClass('active');
}, animDelay);
setTimeout(function() {
initialAnim = false;
}, initialAnimDur + animDelay);
});
@font-face {
font-family: Adineue;
src: url(../fonts/adineue.ttf);
}
header {
height: 100vh;
background-color: #141516;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Adineue', sans-serif;
}
.logo {
position: fixed;
cursor: pointer;
margin-top: 48vh;
margin-left: 1.5vw;
}
.lang {
position: fixed;
cursor: pointer;
margin-top: 90vh;
margin-left: 3.25vw;
color: #fff;
}
.lang h2 {
font-size: 18px;
font-weight: 100;
}
.nav-active {
z-index: 1;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
}
@media screen and (max-width: 640px) {
header {
height: 10vh;
}
}
.cont {
position: relative;
height: 100vh;
overflow: hidden;
background-image: url('http://imgur.com/jDhPVtQ.png');
background-size: cover;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
overflow: hidden;
cursor: pointer;
border-left: 1px solid black;
}
.slide__bg {
position: absolute;
top: 0;
left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1;
-webkit-transition: 950ms;
transition: 950ms;
will-change: transform;
}
.slide__img {
position: relative;
height: 100%;
}
.slide__img-wrapper {
position: absolute;
top: -10%;
left: -10%;
width: 125%;
height: 120%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: 950ms;
transition: 950ms;
will-change: transform;
}
.slide__close {
position: absolute;
top: 5%;
left: 5%;
width: 100px;
height: 100px;
z-index: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: opacity 200ms, z-index 0ms 200ms;
transition: opacity 200ms, z-index 0ms 200ms;
}
.slide__close:after,
.slide__close:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 115px;
height: 20px;
border-radius: 20px;
background-color: #fff;
-webkit-transition: 500ms 500ms;
transition: 500ms 500ms;
}
.slide__text--1 {
opacity: 1;
}
@media screen and (max-width: 960px) {
.slide__close:after,
.slide__close:before {
width: 75px;
height: 15px;
}
}
.slide__close:after {
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(45deg) scale(0, 0);
transform: rotate(45deg) scale(0, 0);
}
.slide__close:before {
left: -33px;
-webkit-transform-origin: center right;
transform-origin: center right;
-webkit-transform: rotate(-45deg) scale(0, 0);
transform: rotate(-45deg) scale(0, 0);
-webkit-transition: 500ms 650ms;
transition: 500ms 650ms;
}
@media screen and (max-width: 960px) {
.slide__close:before {
left: -21px;
}
}
.slide__bg-dark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: 350ms;
transition: 350ms;
z-index: 2;
}
.slide__text {
position: absolute;
top: 50%;
left: 5%;
width: 23%;
text-transform: uppercase;
word-wrap: break-word;
color: #fff;
font-size: 45px;
font-weight: 800;
-webkit-transform: translate3d(0, -50%, 0) rotate(0.01deg);
transform: translate3d(0, -50%, 0) rotate(0.01deg);
will-change: transform, opacity;
-webkit-transition: 750ms;
transition: 750ms;
opacity: 0;
z-index: 3;
text-decoration: none;
}
.slide__text a {
text-decoration: none;
color: #fff;
}
.slide-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.arrow {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
color: #e64e4e;
font-size: 18px;
margin-left: -20vw;
margin-top: -20vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 960px) {
.slide__text {
font-size: 30px;
}
}
.slide__text--1 {
left: 8%;
}
.slide {
left: 100%;
}
.slide--1 {
z-index: 0;
}
.slide--2 {
z-index: 0;
}
.slide--3 {
z-index: 0;
}
.slide--4 {
z-index: 0;
}
.slide--5 {
z-index: 0;
}
.slide--6 {
z-index: 0;
}
.page-content {
position: absolute;
bottom: 10px;
right: 10px;
width: 50px;
opacity: 0;
z-index: -1;
}
.page-show {
opacity: 1;
z-index: 7;
}
.active .slide--1 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 950ms;
transition: 950ms;
}
.active .slide--1 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms;
transition: 2000ms;
}
.active .slide--1 {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 950ms 0ms;
transition: -webkit-transform 950ms 0ms;
transition: transform 950ms 0ms;
transition: transform 950ms 0ms, -webkit-transform 950ms 0ms;
}
.active .slide--1 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 0ms;
transition: 1900ms 0ms;
}
.active .slide--1 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 0ms;
transition: 2000ms 0ms;
}
.active .slide--2 {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
-webkit-transition: -webkit-transform 950ms 1235ms;
transition: -webkit-transform 950ms 1235ms;
transition: transform 950ms 1235ms;
transition: transform 950ms 1235ms, -webkit-transform 950ms 1235ms;
}
.active .slide--2 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 1235ms;
transition: 1900ms 1235ms;
}
.active .slide--2 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 1235ms;
transition: 2000ms 1235ms;
}
.active .slide--3 {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
-webkit-transition: -webkit-transform 950ms 2470ms;
transition: -webkit-transform 950ms 2470ms;
transition: transform 950ms 2470ms;
transition: transform 950ms 2470ms, -webkit-transform 950ms 2470ms;
}
.active .slide--3 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 2470ms;
transition: 1900ms 2470ms;
}
.active .slide--3 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 2470ms;
transition: 2000ms 2470ms;
}
.active .slide--4 {
-webkit-transform: translate3d(-15%, 0, 0);
transform: translate3d(-15%, 0, 0);
-webkit-transition: -webkit-transform 950ms 3705ms;
transition: -webkit-transform 950ms 3705ms;
transition: transform 950ms 3705ms;
transition: transform 950ms 3705ms, -webkit-transform 950ms 3705ms;
}
.active .slide--4 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 3705ms;
transition: 1900ms 3705ms;
}
.active .slide--4 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 3705ms;
transition: 2000ms 3705ms;
}
.active .slide--5 {
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
-webkit-transition: -webkit-transform 950ms 5040ms;
transition: -webkit-transform 950ms 5040ms;
transition: transform 950ms 5040ms;
transition: transform 950ms 5040ms, -webkit-transform 950ms 5040ms;
}
.active .slide--5 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 5040ms;
transition: 1900ms 5040ms;
}
.active .slide--5 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 5040ms;
transition: 2000ms 5040ms;
}
.active .slide--6 {
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0);
-webkit-transition: -webkit-transform 950ms 6275ms;
transition: -webkit-transform 950ms 6275ms;
transition: transform 950ms 6275ms;
transition: transform 950ms 6275ms, -webkit-transform 950ms 6275ms;
}
.active .slide--6 .slide__bg {
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: 1900ms 6275ms;
transition: 1900ms 6275ms;
}
.active .slide--6 .slide__img-wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
-webkit-transition: 2000ms 6275ms;
transition: 2000ms 6275ms;
}
.show-close {
z-index: 6;
opacity: 1;
}
.show-close:after {
-webkit-transform: rotate(45deg) scale(1, 1);
transform: rotate(45deg) scale(1, 1);
}
.show-close:before {
-webkit-transform: rotate(-45deg) scale(1, 1);
transform: rotate(-45deg) scale(1, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROFAS</title>
<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/experiment.css">
<link rel="stylesheet" href="css/overlay.css">
<link rel="stylesheet" href="https://use.fontawesome.com/8770d2be1c.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->
<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1 pure-u-md-11-12 cont">
<div data-target='1' class="slide slide--1">
<div class="slide__text slide__text--1">
<div class="slide-roof">
Rofas <br />Roof
<a href="slide1.html">
<div class="arrow">
<span class="fa fa-arrow-left" style="margin-right: 15px"></span>
<span class="rotate">Rofas Roof</span>
</div>
</a>
</div>
</div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
</div>
<div class="slide__bg-dark"></div>
</div>
<div data-target='2' class="slide slide--2">
<div class="slide__text"><a href="slide2.html">Rofas <br />Фасад</a></div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
<div class="slide__img-wrapper">
</div>
</div>
<div class="slide__bg-dark"></div>
<div class="content-page">LOREM IPSUM</div>
</div>
<div data-target='3' class="slide slide--3">
<div class="slide__text"><a href="slide3.html">Rofas <br />Design</a></div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
<div class="slide__img-wrapper">
</div>
</div>
<div class="slide__bg-dark"></div>
<div class="content-page">LOREM IPSUM</div>
</div>
<div data-target='4' class="slide slide--4">
<div class="slide__text"><a href="slide4.html">Rofas <br />Industry</a></div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
<div class="slide__img-wrapper">
</div>
</div>
<div class="slide__bg-dark"></div>
<div class="content-page">LOREM IPSUM</div>
</div>
<div data-target='5' class="slide slide--5">
<div class="slide__text"><a href="slide5.html">Rofas <br />Eco</a></div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
<div class="slide__img-wrapper">
</div>
</div>
<div class="slide__bg-dark"></div>
<div class="content-page">LOREM IPSUM</div>
</div>
<div data-target='6' class="slide slide--6">
<div class="slide__text"><a href="slide6.html">Rofas <br />Stone</a></div>
<div class="slide__bg"></div>
<div class="slide__img">
<div class="slide__close"></div>
<div class="slide__img-wrapper">
</div>
</div>
<div class="slide__bg-dark"></div>
<div class="content-page">LOREM IPSUM</div>
</div>
</div>
</div>
<script src="js/overlay.js"></script>
<script src="js/slider.js"></script>
<script>
$(function() {
$('.slide--1').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/hB8aJFm.png")');
});
$('.slide--2').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/W1Ls4no.png")');
});
$('.slide--3').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/WxvtKPn.png")');
});
$('.slide--4').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/kX6ESJC.png")');
});
$('.slide--5').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/F8gOvF4.png")');
});
$('.slide--6').mousemove(function() {
$('.cont').css('background-image', 'url("http://imgur.com/rMfd0mo.png")');
});
$('.slide--1').mouseleave(function() {
$('slide__text--1').css('opacity', 0);
});
});
</script>
</body>
</html>
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники