Question

Всем привет, снова прошу помощи, ибо не могу разобраться и исправить, дело в том, что хотел доабвить на старницу промо эффект тумана который плавно передвигается по экрану, но как только я прописываю указанный код в CSS, сразу исчезается на сайте возможность пользоваться листанием, то есть блокируется колесик на мышке, нельзя двигать наверх или вниз........ Может быть своим проффесиональным взглядом вы увидите что нужно исправить? Вот так же источник кода, на движующийся туман: https://codepen.io/kocsten/pen/ErmReY?editors=1111

 

код CSS

@import url(https://fonts.googleapis.com/css?family=Lato:100,200,300,400);

* { margin: 0; padding: 0; box-sizing: border-box; }

body { overflow: hidden; }

 

h1 {

font-family: 'Lato';

font-size: 20vw;

font-weight: 100;

color: #fff;

 

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

 

.fog {

position: relative;

height: 100vh;

width: 100%;

background-image: url(https://avatars.mds.yandex.net/get-pdb/1055791/aebffe8f-ba0e-457f-9560-da547d19709a/orig);

background-position: 50%;

background-repeat: no-repeat;

background-size: cover;

}

 

.fog__img { position: absolute; height: 100vh; width: 300vw; }

 

.fog__img--first {

background: url(https://res.cloudinary.com/dkr52htco/image/upload/v1536173269/fog-1.png) repeat-x;

background-size: contain;

background-position: center;

animation: marquee 60s linear infinite;

}

 

.fog__img--second {

background: url(https://res.cloudinary.com/dkr52htco/image/upload/v1536173269/fog-2.png) repeat-x;

background-size: contain;

background-position: center;

animation: marquee 40s linear infinite;

}

 

@keyframes marquee {

  0% { transform: translate3d(0, 0, 0); }

100% { transform: translate3d(-200vw, 0, 0); }

}

 

Answer 1

удалите из своего тумана это

body { overflow: hidden; }

Comments

Боже, вы просто мастер своего дела!!!!!!!1 Спасибище огромное!