Buongiorno,
Ho un grande problema...
In pratica ho inserito un video backround responsive, fin qua tutto bene solo che provando ad inserire
nuovi elementi nella home page, la scroll bar non scorre e rimane bloccata nel div del video.
Vi prego potreste aiutarmi?
Grazie
Cosa ho sbagliato??
Grazie a tutti.
Ho un grande problema...
In pratica ho inserito un video backround responsive, fin qua tutto bene solo che provando ad inserire
nuovi elementi nella home page, la scroll bar non scorre e rimane bloccata nel div del video.
Vi prego potreste aiutarmi?
Grazie
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="index.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>morelli</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<header>
<nav>
<div class="menu-icon" onClick="myfunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li class="active"><a href="#"></a></li>
<li><a style="text-decoration: none" href="#"></a></li>
<li><a style="text-decoration: none" href="#"></a></li>
<li><a style="text-decoration: none" href="#"></a></li>
<li><a style="text-decoration: none" href="#"></a></li>
</ul>
</div>
</nav>
<!-- video -->
<div class="full-video">
<video id="video" autoplay loop muted>
<source src="../foto/video" type="video/mp4" />
</video>
<div class="full-video-content">
<div class="content">
<div class="slider-wrapper">
prova
<div class="slider">
<div class="slider-text1">testo1'</div>
<div class="slider-text2">testo2</div>
<div class="slider-text3">testo3</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- main -->
<main>
<div class="container">
<div class="box">
<div class="imgbox">
<img src="../foto/Grand_Teton_National_Park_sunset_clouds_evening_mountains_field_flowers_herbs_woods_trees_pine_trees_4579x3057.jpg">
</div>
<div class="contentpt">
<h3>POST TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatibus, debitis facilis nulla dicta quibusdam, culpa? Hic laboriosam saepe sint corporis quibusdam iure rerum ducimus. Rerum nesciunt minus impedit a.</p>
</div>
</div>
</div>
</main>
Codice:
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins');
html, body {
margin: 0;
padding: 0;
overflow-x:hidden;
}
.full-video{
position: static;
height: 100vh;
widows: 100vw;
display: flex;
justify-content: center;
align-items: flex-start;
}
.full-video video {
z-index: -100;
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* slider text */
.content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider-wrapper {
font-size: 40px;
color:#aaa;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.slider{
height: 40px;
padding-left:15px;
overflow: hidden;
}
.slider div {
color:#fff;
height: 50px;
margin-bottom: 50px;
padding: 2px 15px;
text-align: center;
box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 5s linear infinite;
}
.slider-text2 {
background: skyblue;
}
.slider-text3 {
background: lightcoral;
}
@keyframes slide {
0% {margin-top:-300px;}
5% {margin-top:-200px;}
33% {margin-top:-200px;}
38% {margin-top:-100px;}
66% {margin-top:-100px;}
71% {margin-top:0px;}
100% {margin-top:0px;}
}
@media (max-width: 779px){
.slider{
font-size: 20px;
height: 30px;
}
.slider-wrapper{
font-size: 20px;
}
}
@media (min-width: 780px){
.slider{
font-size: 40px;
height: 50px;
}
.slider-wrapper{
font-size: 50px;
}
}
/* navbar */
.logo{
position: absolute;
float: left;
padding: 16px;
color: #fff;
font-weight:bold;
font-size: 3vw;
text-decoration: none;
}
nav{
position: fixed;
width: 100%;
z-index: 100;
opacity: 75%;
text-decoration:none;
}
nav ul {
list-style: none;
background: rgba(4,0,0,1.00);
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
text-decoration: none;
}
nav.black ul{
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px ;
text-decoration: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 2.5vw;
}
ul li a{
text-decoration: none;
border: 2px solid transparent;
transition: 0.6s;
}
ul li a:hover{
background-color: #fff;
color: #000;
text-decoration: none;
}
ul li.active a{
background-color: #fff;
color: #000;
text-decoration: none;
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
text-decoration: none;
}
.bar1,.bar2,.bar3{
width: 35px;
height: 5px;
background-color: #333;
margin-top: 6px;
margin-right: 2%;
margin-left: 95%;
margin-bottom: 6px;
transition: 0.4s ease;
}
.change .bar1{
transform: rotate(-45deg) translate(-9px,6px);
}
.change .bar3{
transform: rotate(45deg) translate(-9px,-8px);
}
.change .bar2{
opacity: 0;
}
@media(max-width: 580px){
.logo {
position: fixed;
top: 0;
padding: 3px 60px 140px 3px;
z-index: 1;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 21em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 16px 0;
text-align: center;
text-decoration: none;
}
.logo{
position: fixed;
float: left;
margin: 14px 36px;
color: #fff;
font-weight:bold;
font-size: 28px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 5vw;
}
.menu-icon {
display: block;
}
}Cosa ho sbagliato??
Grazie a tutti.
