Простая проблема
Долго не хотел писать сюда, так как мне кажется проблема пустяковая, но все перебрал и не нашел решение.
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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:02. |