Section 2 is going behind my video background. Resizing the browser messes everything up.
I really don't know CSS, so?
HTML:
<body>
<script src="Assets/main.js" type="text/javascript"></script>
<!-- The video -->
<video autoplay muted id="myVideo">
<source src="Images/banner.mp4" type="video/mp4">
</video>
<div class="content">
<h1>
<a href=""
class="typewrite"
data-period="1800"
data-type='["hi", "I'm james", "I am creative", "I enjoy designing stuff", ""]'>
<span class="wrap"></span>
</a>
</h1>
"*"
</div>
<div>
<h2 id="section2"> Section 2 <br> jb <br> jb <br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb</h2>
</div>
</body>
I have it so some text types out a few small sentences over a video.
CSS:
body {
background-color: black;
text-align: center;
color: #FFF;
/* padding-top: 10em; */
}
* {
color: #FFF;
text-decoration: none;
font-family: 'CustomFont';
font-weight: 80;
font-size: 80px;
}
#slide {
background-color: red;
padding: 0;
position: absolute;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
/* Add some content at the bottom of the video/page */
.content {
overflow: hidden;
position: absolute;
font-size: 800;
font-family: 'CustomFont';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #F1F1F1;
width: 100%;
padding: 0px;
}
The video tag is on top of other elements by default, and you can send it to back by:
#myVideo {
z-index: -1;
}
body {
background-color: black;
text-align: center;
color: #fff;
/* padding-top: 10em; */
}
* {
color: #fff;
text-decoration: none;
font-family: 'CustomFont';
font-weight: 80;
font-size: 80px;
}
#slide {
background-color: red;
padding: 0;
position: absolute;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
/* Add some content at the bottom of the video/page */
.content {
overflow: hidden;
position: absolute;
font-size: 800;
font-family: 'CustomFont';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f1f1f1;
width: 100%;
padding: 0px;
}
#myVideo {
z-index: -1;
}
<script src="Assets/main.js" type="text/javascript"></script>
<!-- The video -->
<video autoplay muted id="myVideo">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="content">
<h1>
<a href="" class="typewrite" data-period="1800" data-type='[ "Hi", "I'm james", "I am creative", "I enjoy designing stuff", "" ]'>
<span class="wrap"></span>
</a>
</h1>
"*"
</div>
<div>
<h2 id="section2"> Section 2 <br> jb <br> jb <br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb</h2>
</div>
You can also see it here.
Related
I would like to replace and change my css background-image to video, does someone know how to make it ?
Any way to change the image to uploaded video src? Without breaking the split left and right.
The images was path under css. with .side-left {background-image: url('left.jpg');} i did try to change the source left.jpg to myvideo.mp4 but it seems doesnt work.
my html
<body>
<div class="container">
<div id="splitlayout" class="splitlayout">
<div class="intro">
<header class="codropsheader clearfix">
<!--
<span>Rex Photography<span class="bp-icon bp-icon-about" data-content="Photography is the science, art, application and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically ..."></span></span>
-->
<img class="headerlogo" src="logo2.jpg" title="PixPodium" alt="PixPodium"/>
<!--
<nav>
<a href="project.html" class="bp-icon bp-icon-prev" data-info="Go to Projects" ><span>Go to Commercials</span></a>
<span>Go to Weddings</span>
<!--
<span>back to the Codrops article</span>
-->
<!--
<span>Contact Us</span>
<!--
</nav>
-->
<div class="demos">
Commercials
Weddings
Contact Us
</div>
</header>
<div class="topWrapper" style ="display:none;">
<div class="side side-left" >
<div class="intro-content">
<!--
<div class="profile"><img src="img/profile1.jpg" alt="profile1"></div>
-->
<h1 ><span></span><span>Commercials</span></h1>
</div>
<div class="overlay"></div>
</div>
</div>
<div class= "bottomWrapper" style = "display:none;">
<div class="side side-right" >
<div class="intro-content">
<!-- Original Code Start
<h1 style="background-color:rgba(0, 0, 0, 0.5);"><span >Weddings</span><span>Weddings</span></h1>
Original Code End -->
<h1><span></span><span>Weddings</span></h1>
</div>
<div class="overlay"></div>
</div>
</div>
</div><!-- /intro -->
</div><!-- /splitlayout -->
</div><!-- /container -->
</body>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".topWrapper").fadeIn(1000);
$(".bottomWrapper").fadeIn(1000);
//$(".topWrapper").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
</script>
</html>
my css
html, body,
.container {
position: relative;
width: 100%;
height: 100%;
}
body {
overflow-y: scroll;
/*
background: #fff;
*/
background: #fff;
}
.splitlayout {
position: relative;
overflow-x: hidden;
min-height: 100%;
width: 100%;
}
/* Intro sides */
.side {
position: fixed;
/*top: 0; */
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
.open-left .side,
.open-right .side {
cursor: default;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 499;
visibility: hidden;
width: 100%;
height: 100%;
opacity: 0;
}
.side-left .overlay {
background: rgba(0,0,0,0.7);
}
.side-right .overlay {
background: rgba(0,0,0,0.3);
}
.side-left {
/* Original code Start
left: 0;
background: #47a3da;
color: #fff;
outline: 1px solid #47a3da; /* avoid gap
Original Code End */
left: 0;
float: left;
background-image: url('left.jpg');
/* <------ */
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
/*background: #47a3da;*/
color: #fff;
/*outline: 1px solid #47a3da; /* avoid gap */
}
.side-right {
/* Original code Start
right: 0;
background: #fff;
color: #47a3da;
/*outline: 1px solid #fff; /* avoid gap */
right: 0;
background-image: url('right.jpg');
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
color: #fff;
}
You can do it using video tag in html:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
Any alternate text.
</video>
And in css:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
This will help you to learn and implement the feature that you need.
Make the video a static or absolute div within the body.
Set it to width and height 100%.
Position the content over it.
See this example:
https://jsfiddle.net/zrjqctov/7/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#videobackground {
width: 100%;
height: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#videobackground iFrame {
width: 100%;
height: 100%;
}
#container {
height: 100%;
width: 100%;
font-family: sans-serif;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#container > div {
background-color: rgba(255,255,255,0.5);
}
<div id="videobackground">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ztc6_elMg60" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="container">
<div>
<h1>
Content here
</h1>
</div>
<div class="demos">
Commercials
Weddings
Contact Us
</div>
</div>
I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.
You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>
You can check out how to add a video Tutorial
Edit: Edited fiddle
var $vid = $('video','#container');
var $msg = $('#custom-message');
$msg.css({
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});
video {
position: relative;
z-index: -1;
}
#custom-message {
position: absolute;
color: rgb(230, 200, 200);
z-index: 1;
}
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div id="container" align="center">
<video width="640" height="320" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
<div id="custom-message">
Need a Network?</div>
<div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
</div>
</div>
</div>
</div>
</div>
</section>
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);
I have a container div. Inside that I have 6 things. A banner div, an upperstrip div, a video div, a counter div and a bottom div. Inside the bottom div is a lowerstrip div.
When the delayed item displays it bumps the lowerstip div down the page by the amount the the counter is located. All of these divs except for the container have z-indexes called out in my CSS.
<div id="container" style="text-align: center;">
<div id="banner">
<img src="banner.png" alt="banner" />
</div>
<div id="upperstrip">
<p><h2 style="color:white; background-color: #0f2781;">
Puzzle Registration </h2></p>
</div>
<div id="video">
<video controls autoplay>
<source src="prsm_animation.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="counter" data-delay="9" style="display:none; width: 100%">
</br>
<a href="http://www.xxxx.com">
<img src="bluebar.jpg" alt="bluebar" /></a>
</div>
</div>
<div id="bottom">
<div id="lowerstrip">
<p><h4 style=" color: white; vertical-align:bottom;
background-color: #0f2781; text-transform: uppercase;">
Enter your puzzle number in the blue bar above to
register for these
great prizes! </h4></p>
</div>
</div>
</div>
My CSS looks like this:
#video {
position: absolute;
z-index: -10;
}
#counter {
position: absolute;
top: 0px;
width: 803px;
margin: auto;
text-align: center;
z-index: 10;
}
#upperstrip {
position: static;
width: 850px;
text-transform: uppercase;
z-index: 40;
}
#lowerstrip {
position: static;
width: 850px;
top: 400px;
height: 19px;
z-index: 60;
}
#bottom {
position: absolute;
width:850px: height: 1300px;
z-index: 80;
background-color: #ff0000;
}
I am trying to build a parallax scrolling website, but I have run into some trouble. All of my content divs are stacking on top of each other, and I can't figure out what to do to make them stop.
HTML
<body>
<div id="container">
<div id="depth0" class="parallax">
<div id="home" class="parallax">A Greener Home scroll down</div>
<div id="depth1" class="parallax">
<div id="nav">
home
go green
your area
how to
benefits
</div>
<div id="depth2" class="parallax">
<div id="gogreen"><img src="assets/images/go green bg.png" width="1280" height="909"><img src="assets/images/go green bg2.png" width="1280" height="94"></div>
<div id="depth3" class="parallax">
<div id="yourarea" class="parallax">
<img src="assets/images/in your area bg.png" width="1280" height="576">
<p><iframe src="http://batchgeo.com/map/2a9f0604b3bad18c47d7d2ab3dee7577" frameborder="0" width="80%" height="550" style="border:1px solid #aaa;border-radius:10px;"></iframe></p><p><small>View
In Your Area in a full screen map</small></p>
</div>
<div id="depth4" class="parallax">
<div id="howto" class="parallax">
<img src="assets/images/how to bg.png" width="1280" height="960">
<img src="assets/images/how to bg2.png" width="1280" height="520">
</div>
<div id="depth5" class="parallax">
<div id="benefits" class="parallax">
<img src="assets/images/benefits bg.png" width="1280" height="491">
<img src="assets/images/benefits bg2.png" width="1280" height="71">
</div>
</div>
</body>
CSS
#font-face {
font-family: 'capone_lightregular';
src: url('caponelight-webfont.eot');
src: url('caponelight-webfont.eot?#iefix') format('embedded-opentype'),
url('caponelight-webfont.woff') format('woff'),
url('caponelight-webfont.ttf') format('truetype'),
url('caponelight-webfont.svg#capone_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin: 0px;
padding: 0px;
height: 7000px;
background-color: #FDFDFD;
}
.parallax {
position: fixed;
height: 100%;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#nav {
position: fixed;
text-align:center;
width: 100%;
}
#nav a {
text-decoration: none;
text-align: center;
padding-right: 4%;
width: 100%;
font-size: 55px;
font-family: "Capone Light";
color: #093;
font-style: normal;
text-transform: none;
}
#home {
height: 500px;
background-color: #FDFDFD;
}
#howto img {
width: 100%;
}
#depth5 #benefits img {
width: 100%;
}
#yourarea img {
width: 100%;
}
#gogreen img {
width: 100%;
}
#depth2 #yourarea p iframe {
margin-right: 10%;
margin-left: 10%;
}
#gogreen {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #090;
}
#yourarea {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #30C;
}
#howto {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #CF3;
}
#benefits {
height: 500px;
border: 5px solid #90F;
}
body {
margin: 0;
padding: 0;
height: 7000;
}
jQuery
$(document).ready(function(){
//running scrollCheck()
scrollCheck();
$(window).scroll(function(){
scrollCheck();
});
function scrollCheck(){
//initialize variables
var pos = $(window).scrollTop(), //position of the scroll bar in pixels
q = .5; //speed modifier
//parallax
$("#depth0").stop().animate({
top: (-pos*1*q)+"px"
});
$("#depth1").stop().animate({
top: (-pos*2*q)+"px"
});
$("#depth2").stop().animate({
top: (-pos*3*q)+"px"
});
$("#depth3").stop().animate({
top: (-pos*4*q)+"px"
});
//nav bar
$("#nav").stop().animate({
top: Math.max(Math.min(1000,1000-pos),0)+"px"
});
}
});
Here's the jsfiddle: http://jsfiddle.net/yKT9W/
Here I am just trying to answer by looking at the code you have given (I have not tried it on my system). Looking at the CSS given above, i don't see Z-index mentioned any where.
Most of the times such overlapping issue will be fixed by z-index.
I would suggest you to try the same once.
Ref: Link