Простая проблема
Долго не хотел писать сюда, так как мне кажется проблема пустяковая, но все перебрал и не нашел решение.
let main = document.querySelector("main");
let li_1 = document.querySelector("li:nth-child(1)");
let li_2 = document.querySelector("li:nth-child(2)");
let li_3 = document.querySelector("li:nth-child(3)");
let li_4 = document.querySelector("li:nth-child(4)");
let li_5 = document.querySelector("li:nth-child(5)");
li_1.onmouseover = test1;
function test1(){
main.style.backgroundImage = "url('images/pic6.jpg')";
}
li_1.onmouseout = test2;
function test2(){
main.style.backgroundImage = "url('images/color.png')";
}
background-image: url("../images/color.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 2s;
При наведении скорость 2сек, а когда убирает установления скорость пропадает как сделать что бы и когда мышка уходит скорость тоже была 2 сек. |
Цитата:
И где коды связанные с наведением мыши? |
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<style>
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
main{
width: 100vw;
height: 100vh;
background-image: url("../images/color.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: background-image 2s;
display: grid;
justify-items: center;
justify-content: center;
grid-template-rows: minmax(320px, 640px) auto;
grid-template-columns: 1fr;
grid-area:
"header"
"nav";
}
header{
grid-area: "header";
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 5.5rem;
color: #fff;
text-shadow: 0px 0px 3px #423F3B;
align-self: end;
}
nav{
grid-area: "nav";
margin: 60px 0px 0px 0px;
}
ul{
display: flex;
justify-content: center;
}
li{
list-style: none;
cursor: pointer;
margin: 0px 20px 0px 20px;
}
li:nth-child(1){
}
li:nth-child(2){
}
li:nth-child(3){
}
li:nth-child(4){
}
li:nth-child(5){
}
</style>
</head>
<body>
<main>
<header>
Шарлин Корзе
</header>
<nav>
<ul>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</nav>
</main>
<script>
let main = document.querySelector("main");
let li_1 = document.querySelector("li:nth-child(1)");
let li_2 = document.querySelector("li:nth-child(2)");
let li_3 = document.querySelector("li:nth-child(3)");
let li_4 = document.querySelector("li:nth-child(4)");
let li_5 = document.querySelector("li:nth-child(5)");
li_1.onmouseover = test1;
function test1(){
main.style.backgroundImage = "url('images/pic6.jpg')";
}
li_1.onmouseout = test2;
function test2(){
main.style.backgroundImage = "url('images/color.png')";
}
</script>
</body>
</html>
|
Я сейчас методом тыка понял что если убрать из style
background-image: url("../images/color.png");
то будет работать так как нужно, не понимаю логику почему но работает а можно как то сделать что бы плавность была за счет скрипта |
И почему когда резко убираешь то плавность пропадает при уходе с элемента
|
background-image: - вообще не анимируется.
https://developer.mozilla.org/en-US/...ted_properties |
Цитата:
|
Note: The set of properties that can be animated is changing as the specification develops.
https://developer.mozilla.org/en-US/...SS_transitions Это означает, что в спецификацию для анимирования это свойство пока не включено. И браузер имеет полное право делать с ним что угодно. Файрфокс вообще не анимирует, Хром что то пытается сделать, но кривовато пока. Вообще не понятно что анимировать. При анимации параметр должен плавно изменяться от начального значения до конечного. Значение может быть каким то размером, цветом, прозрачностью, т.е. иметь какую то числовую величину. А что у картинки? Можно менять прозрачность, например. Наложить две картинки друг на друга и менять прозрачность верхней от 0 (прозрачная) до 1 (не прозрачная) Может хром и пытается это делать как то, но пока не всегда успешно. |
Цитата:
Цитата:
Цитата:
Цитата:
То, что вы хотите сделать, можно сделать так (без дополнительных и лишних элементов)... <!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)
|
Цитата:
|
Цитата:
|
<!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>
|
Цитата:
|
Сергей Ракипов,
в 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 |
Цитата:
Изучаю JS только свободное время, по этому много еще что не знаю. Если у вас есть ссылка на объяснение этих скобок скиньте пожалуйста. |
рони,
не могу найти ссылку которую вы мне давали, которая я надеюсь мне объяснить как нужно делать что бы тут просмотр был в полный размер, не как у меня не большое окно а как у вас нормальное |
Цитата:
[html run height=500] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
рони,
Спасибо |
| Часовой пояс GMT +3, время: 21:18. |