How to make a video background fixed while the text is scrolling? - javascript

When I did add the video for the background it's only there for the top part of the page but I what it to be there for the rest of the page is scrolling
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="/pexels-rostislav-uzunov-5680034.mp4" type="video/mp4">
</video>
<div>
<nav>
<img src="/401-logo.png" class="logo">
<ul>
<li>HOME</li>
<li>POPULAR</li>
<li>ABOUT</li>
</ul>
</nav>
</div>
<div class="content">
<h1>Code Engine</h1>
Get Started
</div>
CSS
.hero{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(12,3,51,0.3),rgba(12,3,51,0.3));
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
text-align:center;
}
.content h1{
font-size: 160px;
color: #fff;
transition: 0.5s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
background-attachment: fixed;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
#media(min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media(max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}

Your .back-video is an video tag, so background-attachment will not work here (this property only works on elements with background such as an background-image);
To use the video as an background to the actual page you must use position:fixed and object-fit:cover (so the video doesn't stretch while fitting in the aspect-ratio).
The video should also be height: 100vh and width: 100vw (or 100%) to fit the whole screen. There is no need to add #media to check min and max aspect-ratio of the window since object-fit:cover will do the job to fit your video correctly in all window sizes.

Related

Overlap text over an image, and as screen is being decreased, change color of overlapping letters

I'm trying to achieve this effect:
And as the screen is being reduced in size, and more letters of my H1 start to overlap the image, I would like them to change color to white. Eventually, when the screen is small enough, the text can just be inside the container that has a background image.
Here's the code I have so far:
.container {
max-width:1350px;
margin:0 auto;
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
padding-top:15em;
padding-bottom:15em;
position:relative;
}
.overlay {
background-color: transparent;
background-image: linear-gradient(90deg, #FFFFFF 30%, #F2295B00 0%);
opacity: 1;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
h1 {
font-size:60px;
letter-spacing:9px;
text-transform:uppercase;
}
.custom-cta {
display:block;
max-width:100px;
margin-top:10px;
text-align:center;
background:gold;
padding:20px 40px;
}
<div class="container">
<div class="overlay">
<div class="text-box">
<h1>Complete </br>Remodeli<span style="color:white;">ng</span></h1>
<p style="max-width:300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
</div>
I would solve this by making layers. Consider having 2 layers:
A front layer with black text
A back layer with white text and the image.
Now the trick is getting the texts of both the texts to overlap perfectly. Use CSS Grid to create the layout and place the text and image where you need them. With some creative clipping (overflow: hidden) and layer ordering (z-index) you can control where the black text stops and where the white continues.
This will create an illusion of the color changing based on the screen size.
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
max-width: 1350px;
width: 100vw;
height: 100vh;
}
.layer {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 30vw 70vw;
}
:is(.layer--front, .layer--back) .layer__title {
display: block;
font-weight: 700;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
margin: 0 0 1rem;
}
.layer--front {
z-index: 2;
}
.layer--front .layer__title {
color: black;
}
.layer--back .layer__title {
color: white;
}
.layer__content {
grid-area: 1 / 1;
padding: 6rem 2rem;
z-index: 1;
}
.layer--front .layer__content {
overflow: hidden;
}
.layer__image {
grid-area: 1 / 2;
position: relative;
}
.layer__image img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
padding: 1rem 1rem 1rem 0;
object-fit: cover;
object-position: left;
}
.custom-cta {
display: block;
margin-top: 10px;
text-align: center;
background: gold;
padding: 10px 20px;
}
<div class="container">
<div class="layer layer--front">
<div class="layer__content">
<h1 class="layer__title">Complete <br>Remodeling</h1>
<p style="max-width: 300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
<div class="layer layer--back">
<div class="layer__content">
<span class="layer__title" aria-hidden="true">Complete <br>Remodeling</span>
</div>
<div class="layer__image">
<img src="https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg" alt="" />
</div>
</div>
</div>
Be sure to watch the example in Full page mode.
Here is an approach using flexbox, three overlapping containers, and backdrop-filter: invert(100%).
Basically, the solution is to create three overlapping containers (using z-index) to put one on top of the other.
The image goes as a background image on the under container. The image is then inverted using backdrop-filter: invert(100%) twice to avoid getting a negative. However, when when the text slides over the top of the image, then it is inverted only once, giving the sliding negative effect that is asked for.
The effect is best seen in a fiddle of the solution below as the vertical bar can be dragged left or right to see the sliding effect.
The yellow button changes to blue on sliding over the image, but I am sure that this is not a critical issue.
:root {
--image-height: 500px;
--image-width: 600px;
--top-offset: 350px;
--sidebar-width: 100px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
h1 {
margin-top: 50px;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
}
p {
max-width: 300px;
}
.text-container {
margin-left: 20px;
}
.container {
display: flex;
align-items: stretch;
height: var(--image-height);
position: relative;
}
.sidebar {
flex: 1 1 var(--sidebar-width);
height: var(--image-height);
}
.image {
flex: 0 0 var(--image-width);
height: var(--image-height);
}
.container-under {
top: calc(0px - var(--top-offset));
z-index: -2;
}
.image-under {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg");
background-size: cover;
}
.container-middle {
top: calc(0px - calc(var(--top-offset) + var(--image-height)));
z-index: -1;
}
.image-middle {
background-color: transparent;
backdrop-filter: invert(100%);
}
.container-over {
top: calc(0px - calc(var(--top-offset) + var(--image-height) * 2));
}
.image-over {
background-color: transparent;
backdrop-filter: invert(100%);
}
.custom-cta {
display: block;
margin-top: 10px;
background: gold;
padding: 10px 20px;
width: 150px;
}
<div class="text-container">
<h1>Complete<br/>Remodeling</h1>
<p>With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
<div class="container container-under">
<div class="sidebar"></div>
<div class="image image-under"></div>
</div>
<div class="container container-middle">
<div class="sidebar"></div>
<div class="image image-middle"></div>
</div>
<div class="container container-over">
<div class="sidebar"></div>
<div class="image image-over"></div>
</div>

Why won’t this section stay contained when I change my browser screen size? HTML, CSS

Why won’t this section stay contained when I change my browser screen size? I used HTML and CSS. It looks fine when I made my screen full size but then if I make my browser smaller it doesn’t show the full content. (it only shows half of the image but shows the full text) screenshot of how it looks on smaller browser](https://i.stack.imgur.com/i9qiK.jpg)
.whoweare{
padding:80px 0px 50px;
background-color: #000000;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
}
.whoweare .content .box{
padding:5px;
flex:0 0 100%;
max-width: 100%;
}
.whoweare .content .item-img {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content .item-text h2{
font-size: 50px;
font-weight: 500;
margin:20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content .item-text p{
font-size: 20px;
line-height:50px;
color:#ffffff;
margin:20px;
padding:0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
.whoweare .content .class-items .item{
margin-bottom: 30px;
display: flex;
}
.whoweare .content .class-items .item .item-text{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
` <section class="whoweare" id="whoweare">
<dic class="container">
<div class="content">
<div class="box text wow slideInRight">
<div class="class-items">
<div class="item wow bounceInUp">
<div class="item-img">
<img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" width="601"
height="751" />
</div>
<div class="item-text">
<h2>Who we are</h2>
<p>Our gym provides a unique experience </p>
</div>
</div>
</section>````
Change the height width of img tags.
Use % parameters
for example
height=50%
width=60%.
I think 🤔 you need also change the height width of other container tags
If design is not look like good
You should add to all importan containers`
.container
{
width:100%:
height: auto;
margin: auto;
}
//Also can try
.container
{
width: auto;
padding: 0;
}
that should work...
Problem
img has specific width and height, hence it overflows even though its container (in your case .item-img has width:50%;).
Answer
Give the img of width: 100%; and object-fit: contain or object-fit: cover if you want it cropped.

Header for website bleeds over 100% width [duplicate]

This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
This is my CSS for the header:
#header {
font-size: 3rem;
width: 100%;
height: 4.5em;
display: flex;
align-items: center;
padding-left: 1em;
}
As you can see, it is set to 100% width.
On the website however, it shows up like this, with a horizontal scroll bar at the bottom:
For some reason, the header extends past the html tag. overflow: hidden does nothing. 100vw doesn't change anything either. My other divs' width is also 100%. Not getting any errors in the console. Here is my html:
<body onload="setBgColors()"> <!-- function that sets certain background colors using Colorthief is called on load -->
<div id='header'>
<div class='flag-container'><img src="images/tree.png" alt="Flag" id="flag"></div>
<h1 id="title">Fussajle</h1>
<button id='edit-button'>Edit</button>
</div>
<ul class="tabs">
<li data-tab-target="#overview">
<div class="tab-button" id='default-button'>
Overview
</div>
</li>
<li data-tab-target="#learn">
<div class="tab-button">
Learn
</div>
</li>
<li data-tab-target="#more">
<div class="tab-button">
More
</div>
</li>
</ul>
...
</body>
The rest of my CSS:
.flag-container {
width: calc(2.75em + 10px);
height: calc(2.75em + 10px);
background-color: #fcfcfc;
border-radius: 50%;
}
#flag {
width: 2.75em;
height: 2.75em;
object-fit: cover;
border-radius: 50%;
border: 5px solid #ffffff;
}
#title {
margin-left: 1em;
}
#edit-button {
font-size: 1.5rem;
width: 3em;
height: 2em;
border-radius: 5px;
margin-left: calc(100vw - 33em); /* for edit button to be always on the right side of the screen relative to the vw*/
}
/* tabs */
.tabs {
width: 100%;
height: 3.5rem;
display: flex;
}
.tabs li {
width: calc(100% / 3);
height: 100%;
}
.tabs div {
font-size: 1.5rem;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Help would be appreciated.
The problem seems to be with the padding-left property on the header.
#header {
font-size: 3rem;
width: 100%;
height: 4.5em;
display: flex;
align-items: center;
padding-left: 1em; /* Here is the issue */
box-sizing:border-box; /* Try this solution */
}
You can make sure box-sizing:border-box is set either on header or on all the elements.
From MDN:
The box-sizing CSS property sets how the total width and height of an element is calculated. [See More]
You can also set box-sizing:border-box on all the elements by using basic reset at the top of your CSS file:
*{
margin:0;
padding:0;
box-sizing:border-box;
}

Hover works fine on chrome but on safari the div that shows up on hover is displayed next to the first div?

So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great!
Here is the HTML:
<div class="appdesign">
<img class="appmockup" src="img.jpg"/>
<div class="apptext" style="display:none">
<p class="apptexttitle">Name</p>
<p class="apptextinfo">Mobile App Design<br><br>Insert info</p>
<button>
View Project
</button>
</div>
</div>
Here is the CSS
.appdesign{
display: inline-flex;
img{
height: 450px;
width: 650px;
margin-bottom: 30px;
}
.appdesign img:hover .apptext{
opacity: 0.5;
}
.apptext{
display: block;
opacity: 0.8;
position: absolute;
background-color: $customgrey;
height: 450px;
width: 650px;
margin-bottom: 30px;
z-index: 100;
.apptexttitle{
color: $white;
font-size: 30px;
border-bottom: 2px solid $white;
border-top: 2px solid $white;
width: 15vw;
padding: 10px;
text-align: center;
}
}
.apptextinfo{
width: 40vw;
font-size: 18px;
font-family: Merriweather;
}
}
Here is the JS
<script>
$('.appdesign').hover(function(){
$(this).find('.apptext').fadeIn('slow');
},
function(){
$(this).find('.apptext').stop().fadeOut('slow');
});
</script>

Trying to center a link in CSS with the top header but wont move

Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg

Categories

Resources