Форум

Сергей Ракипов · #11 (**permalink**) 17.04.2020, 09:01

Сообщение от Malleys

Вы видите браузерную ошибку, «баг» — согласно спецификации, это свойство анимируется дискретно, т. е. переключается между двумя адресами картинок. (https://drafts.csswg.org/css-backgro...ckground-image)

У картинки в будущем будет функция cross-fade(), которая позволяет свести несколько картинок при определённой непрозрачности.

Ничего не делать, а то что вы видите в Chrome — это cross-fade со старым синтаксисом.

Потому что в webkit-браузерах используется cross-fade, который не может далее анимироваться, пока предыдущая анимация не завершилась (а она не успевает завершиться, поскольку вы резко убираете курсор, запуская следующую анимацию)

То, что вы хотите сделать, можно сделать так (без дополнительных и лишних элементов)...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	</head>
	<body>
		<nav>
			<a href="#" class="default">Default</a>
			<a href="#" style="--image: url('https://placeimg.com/640/480/nature');">Nature</a>
			<a href="#" style="--image: url('https://placeimg.com/640/480/tech');">Tech</a>
			<a href="#" style="--image: url('https://placeimg.com/640/480/animals');">Animals</a>
		</nav>
		<style>
			
		body {
			margin: 0;
			overflow: hidden;
			height: 100vh;
			background: radial-gradient(circle at calc(100vw - 10rem) 25vh, #f1f1f1, #888);
		}

		nav {
			display: grid;
			align-content: end;
			justify-content: center;
			height: 100vh;
			overflow: auto;
			grid-auto-flow: column;
		}
			
		a {
			padding: .5em 1em;
			margin: .5em;
			border: .1em solid;
			color: deepskyblue;
			text-decoration: none;
			display: inline-block;
			border-radius: .5em;
			overflow: auto;
			font: bold 200% "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif;
		}
		
		a.default {
			visibility: hidden;
			position: absolute;
		}
			
		a::after, .default::after {
			content: "";
			position: fixed;
			top: 0; bottom: 0;
			left: 0; right: 20rem;
			background:
				center / cover
				no-repeat #333;
			background-image:
				var(--image, url('https://placeimg.com/800/600/people')),
				radial-gradient(#333, black);
			padding: 1em;
			pointer-events: none;
			transition: opacity 350ms 200ms, transform 350ms 200ms, visibility 0s 550ms;
			opacity: 0;
			transform: scale(2);
			visibility: hidden;
			will-change: opacity, transform, visibility;
			z-index: -1;
		}
			
		@media (max-width: 75em) {
			a::after, .default::after {
				right: 0rem;
			}
		}
			
		.default::after {
			z-index: -2;
		}
			
		a:hover::after, .default:after {
			opacity: 1;
			transform: scale(1);
			visibility: visible;
			transition: opacity 350ms, transform 350ms, visibility 0s 0s;
		}
		</style>
	</body>
</html>

а как он понял что нужно именно по наведению на определенный элемент менять картинку.

И все таки можно ли как то сделать с помощью JS

Сергей Ракипов · #12 (**permalink**) 19.05.2020, 15:10

Вроде все сделал правильно и логично

а ширина .slider_after не меняется

const slider = document.querySelector(".slider");

function sliderPic(){
	let x = slider.offsetX;
	console.log(x);
	document.querySelector(".slider_after").style.width = x + "px";
}

slider.addEventListener("mousemove", sliderPic)

рони · #13 (**permalink**) 19.05.2020, 15:25

Сообщение от Сергей Ракипов

Вроде все сделал правильно и логично

может макеты начать делать, а не загадки загадывать?

рони · #14 (**permalink**) 19.05.2020, 15:29

Сообщение от Сергей Ракипов

а ширина .slider_after не меняется

а почему она должна меняться, если x неизвестно что.

Сергей Ракипов · #15 (**permalink**) 19.05.2020, 16:43

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
	font-size: .8rem;
	line-height: 160%;
}
.main{
	max-width: 1024px;
	margin: 0 auto;
}
.slider{
	position: relative;
	overflow: hidden;
	width: 1024px;
	height: 495px;
}
.slider_befor, .slider_after{
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	overflow: hidden;
	-webkit-transition: all easy .1s;
    -o-transition: all easy .1s;
	-moz-transition: al easyl .1s;
	-ms-transition: all easy .1s;
    transition: all easy .1s;
}
.slider_after{
	width: 50%;
	border-right:  1px solid #fff;
}

	</style>
</head>

<body>
<div class="main">
	<div class="slider">
		<div class="slider_befor"><img src="https://rakipov.ru/files/picture_1.jpg" alt=""></div>
		<div class="slider_after"><img src="https://rakipov.ru/files/picture_2.jpg" alt=""></div>
	</div>
</div>
<script>
const slider = document.querySelector(".slider");

function sliderPic(){
	let x = slider.offsetX;
	console.log(x);
	document.querySelector(".slider_after").style.width = x + "px";
}

slider.addEventListener("mousemove", sliderPic)
</script>
</body>
</html>

Сергей Ракипов · #16 (**permalink**) 19.05.2020, 16:43

Сообщение от рони

а почему она должна меняться, если x неизвестно что.

х это const slider = document.querySelector(".slider");

рони · #17 (**permalink**) 19.05.2020, 17:42

Сергей Ракипов,
в x у вас бред!!!

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
    font-size: .8rem;
    line-height: 160%;
}
.main{
    max-width: 1024px;
    margin: 0 auto;
}
.slider{
    position: relative;
    overflow: hidden;
    width: 1024px;
    height: 495px;
}
.slider_befor, .slider_after{
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    overflow: hidden;
    -webkit-transition: all easy .1s;
    -o-transition: all easy .1s;
    -moz-transition: al easyl .1s;
    -ms-transition: all easy .1s;
    transition: all easy .1s;
}
.slider_after{
    width: 50%;
    border-right:  1px solid #fff;
}

    </style>
</head>

<body>
<div class="main">
    <div class="slider">
        <div class="slider_befor"><img src="https://rakipov.ru/files/picture_1.jpg" alt=""></div>
        <div class="slider_after"><img src="https://rakipov.ru/files/picture_2.jpg" alt=""></div>
    </div>
</div>
<script>
const slider = document.querySelector(".slider");

function sliderPic(event){
    let x = event.offsetX;
    console.log(x);
    document.querySelector(".slider_after").style.width = x + "px";
}

slider.addEventListener("mousemove", sliderPic)
</script>
</body>
</html>

рони · #18 (**permalink**) 19.05.2020, 17:44

Сергей Ракипов,
offsetX

Сергей Ракипов · #19 (**permalink**) 19.05.2020, 17:54

Сообщение от рони

Сергей Ракипов,
offsetX

Спасибо более внимательно почитаю, я пока не понимаю эти скобки в функции, только знаю что это параметры называется, и больше не чего.

Изучаю JS только свободное время, по этому много еще что не знаю.

Если у вас есть ссылка на объяснение этих скобок скиньте пожалуйста.

Сергей Ракипов · #20 (**permalink**) 19.05.2020, 17:56

рони,
не могу найти ссылку которую вы мне давали, которая я надеюсь мне объяснить как нужно делать что бы тут просмотр был в полный размер, не как у меня не большое окно а как у вас нормальное

Форум

Справочник

Discord чат

Курсы javascript