Javascript-форум - Простая проблема

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Простая проблема (https://javascript.ru/forum/dom-window/79996-prostaya-problema.html)

Цитата:

Сообщение от Malleys (Сообщение 522845)

Вы видите браузерную ошибку, «баг» — согласно спецификации, это свойство анимируется дискретно, т. е. переключается между двумя адресами картинок. (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

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

а ширина .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)

Цитата:

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

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

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

Цитата:

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

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

а почему она должна меняться, если 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(){
	let x = slider.offsetX;
	console.log(x);
	document.querySelector(".slider_after").style.width = x + "px";
}

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

Цитата:

Сообщение от рони (Сообщение 524552)

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

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

Сергей Ракипов,
в 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>

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

Цитата:

Сообщение от рони (Сообщение 524558)

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

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

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

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

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