I'm playing around with Chris Coyiers brilliant approach to full page video with content scrolling over the video, but I'm getting an unwanted gap to the right in Windows browsers. The weird thing is that it's not happening in Mac browsers (currently testing in Safari, Firefox and Chrome). In Windows browsers this happens in all the browsers I'm testing with.
The css for the white main content area looks like this:
main {
background: white;
position: relative;
padding: 1rem;
margin-top: 100vh;
}
main::before {
content: "";
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: -100vh;
}
Could it be scrollbar related? Has anyone found a solution to this or can explain to me why this happens in Windows?
Please see this Fiddle: https://jsfiddle.net/8y2v79nj/
Chris' article: https://css-tricks.com/full-page-background-video-styles/
Chris' example that I'm using: https://codepen.io/chriscoyier/pen/BRvdgK
Mac screenshot with no gap:
Windows screenshot with the unwanted gap:
The problem is from the reserved width for the y-scroller, and you only hide the x-scroller by overflow-x: hidden; on body.
You can add this to your styles that will help you to get rid of the reserved width of the scroller on body.
body::-webkit-scrollbar {
display: none;
}
Full code
var viewportHeader = document.querySelector(".viewport-header");
document.body.addEventListener("scroll", function(event) {
var opacity = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
var scale = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
document.documentElement.style.setProperty('--headerOpacity', opacity);
document.documentElement.style.setProperty('--headerScale', scale);
});
:root {
--headerOpacity: 1;
--headerScale: 1;
}
.video-header {
position: absolute;
text-align: center;
width: 100vw;
height: 100vh;
}
.video-header,
.video-header video,
.video-header .viewport-header {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-header video {
background: brown;
object-fit: cover;
}
.video-header .viewport-header {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
opacity: var(--headerOpacity);
transform: scale(var(--headerScale));
}
html,
body {
height: 100vh;
overflow-x: hidden;
}
body::-webkit-scrollbar {
display: none;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 150%;
line-height: 1.4;
}
body {
margin: 0;
}
h1 {
font-family: "Syncopate", sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 3vw;
line-height: 1.2;
font-size: 3vw;
text-align: center;
}
h1 span {
display: block;
font-size: 10vw;
letter-spacing: -1.3vw;
}
main {
background: white;
position: relative;
padding: 1rem;
margin-top: 100vh;
}
main::before {
content: "";
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: -100vh;
}
main p {
max-width: 600px;
margin: 1rem auto;
}
<header class="video-header">
<video src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/Island%20-%204141.mp4" autoplay loop playsinline muted></video>
<div class="viewport-header">
<h1>
Explore
<span>Montana</span>
</h1>
</div>
</header>
<main>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
</main>
Related
How to start my progressbar counting when i will go to container section of my webpage.I think i have to change my javascript code a bit please help me.
HTML CODE
<div class="container">
<div class="circular-progress">
<span class="progress-value">100%</span>
</div>
<span class="text">HTML & CSS</span>
</div>
<!-- JavaScript -->
<script src="js/script.js"></script>
CSS CODE
/* Google Fonts - Poppins */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7d2ae8;
}
.container{
display: flex;
width: 420px;
padding: 50px 0;
border-radius: 8px;
background: #fff;
row-gap: 30px;
flex-direction: column;
align-items: center;
}
.circular-progress{
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress::before{
content: "";
position: absolute;
height: 210px;
width: 210px;
border-radius: 50%;
background-color: #fff;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
.text{
font-size: 30px;
font-weight: 500;
color: #606060;
}
Javascriptcode
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 90,
speed = 100;
let progress = setInterval(() => {
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`
circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`
if(progressStartValue == progressEndValue){
clearInterval(progress);
}
}, speed);
When i load my page at first then progressbar is count value But i want to start the counting after i go to that section of that webpage.
You could use Intersection Observer. You choose an HTML element to observe and once this element is in view, that will trigger the start of the progress bar.
I'm trying to make a mouse trailer for my site, but when hovering over a YouTube iframe the trailer does not follow it into the iframe area. (I'm using js to extract the x and y coordinates of the mouse from the body) I have like no idea how to make this work so any help or ideas would be much appreciated!
Code below:
there are ">"s next to important code
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homestyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>****************</title>
</head>
<body>
<div id="trailer">
</div>
<script src="homescript.js"></script>
<div class="navbaralign">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
<div id="toppage" class="toppage">
<div class="maintitle">
<h1>****************</h1>
<h2>Front-end web developer, music producer, and 3d animator/artist.</h2>
</div>
</div>
<div id="about" class="about">
<h3>About Me</h3>
</div>
> <div id="mywork" class="mywork">
> <iframe class="interactable" src="https://www.youtube.com/embed/B6ipLAQ7lM4" title="bowling alley
> animations be like" frameborder="0" allow=""></iframe>
> <iframe class="interactable" src="https://www.youtube.com/embed/kJniNIlKIDE" title="Ktashi - HOLD
> ON" frameborder="0" allow=""></iframe>
> </div>
</body>
</html>
css
html {
scroll-behavior: smooth;
}
#trailer {
height: 20px;
width: 20px;
background-color: #ffffff;
border-radius: 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 500ms ease;
}
body:hover > #trailer {
opacity: 1;
}
body {
background-color: #FF4722;
margin: 0;
}
h1 {
font-family: Inter;
font-weight: 900;
color: #FFFFFF;
font-size: 48px;
line-height: 48px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h2 {
font-family: Inter;
font-weight: 300;
color: #FFF9D1;
font-size: 24px;
line-height: 24px;
text-align: center;
padding-left: 10vw;
padding-right: 10vw;
}
h3 {
font-family: Inter;
font-weight: 600;
color: #ffffff;
font-size: 24px;
line-height: 12px;
text-align: left;
}
.toppage {
height: 100vh;
display: grid;
place-items: center;
}
.navbaralign {
display: flex;
justify-content: center;
}
.navbar {
display: flex;
justify-content: space-between;
height: 5vh;
padding: 0;
list-style: none;
align-items: center;
background-color: #000000;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.50);
margin: 0;
position: fixed;
top: 1vh;
width: 80%;
border-radius: 6vh;
padding: 2.5vh;
box-sizing: border-box;
padding-top: 3vh;
padding-bottom: 3vh;
}
.maintitle {
display: grid;
place-items: center;
user-select: none;
}
a {
text-decoration: none;
color: #ffffff;
font-family: Inter;
font-weight: 600;
font-size: 18px;
transition: color 500ms ease;
background-color: linear-gradient(#ffffff, #000000)
}
a:hover {
color: #FFF9D1;
}
#media (max-width: 700px) and (orientation: portrait) {
.navbar {
flex-direction: column;
height: 20vh;
}
}
.mywork {
display: flex;
gap: 2vw;
padding: 2vw;
background-image: linear-gradient(#FF4722, #000000)
}
iframe {
aspect-ratio: 16 / 9;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
.interactable {
transition: background-size 500ms ease, opacity 500ms ease;
}
.interactable:hover {
background-size: 105%;
opacity: 0.8;
}
js
const trailer = document.getElementById("trailer");
window.onmousemove = e => {
const x = e.clientX - trailer.offsetWidth / 2,
y = e.clientY - trailer.offsetHeight / 2;
const keyframes = {
transform: `translate(${x}px, ${y}px)`
};
trailer.animate(keyframes, {
duration: 800,
fill: "forwards"
});
};
I've tried adding
pointer-events: none;
to the iframes' class in css and I had a feeling that that wouldn't work. I was right. but I honestly have no idea what else could work. 😅
For security reasons, browsers don't allow you to get information about interactions made on cross-domain iframes. In this case, youtube.com is a different domain than the original website(ie cross-domain), and thus you can't get mouse information while the user is interacting with youtube. This is done to prevent things like embedding banking websites and getting the user's interactions made on logins etc... You can normally get around this by putting a transparent div over the original iframe, but that would also block any mouse interaction with the youtube iframe in the process. This would mean that while the circle would follow the mouse while you were over the youtube window, you would be unable to start the video since you couldn't interact with the youtube page. There isn't really a way to get around this issue, since it is caused by your web browser's security. Hopefully, this helps :)
I need to make the sticky header in css.
But I got a problem. When I scroll through the google chrome browser page the content in the sticky section jerks. This is annoying. Moves literally 1 pixel but catches the eye.
I have the same task as in this example which I found on stack overflow. You may not notice this bug right away.
But this is clearly visible if you zoom in on the element or look at a monitor with a low expansion. The elements are literally jumping around. I want the elements not to move when the page is scrolled.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
position:relative;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
position: sticky;
top: 0px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100vw;
height: 100vh;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}
.header-2{
top: 50px;
}
.header-3{
top: 100px;
}
<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-2"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-3"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>
I'm trying to vertical-align: middle a text inside a container with different font sizes. This has been asked before, but I can't get any of the solutions to work for me, What I'm missing?
I want the text with different font sizes to align vertically in the middle of the container.
Here is the code:
.
let upperGuideText = document.getElementById("upperGuideText");
let guide = "Some text here"
setTimeout(function(){
upperGuideText.style.fontSize = "3vw";
upperGuideText.innerHTML = `${guide}`;
}, 500);
setTimeout(function(){
upperGuideText.style.fontSize = "5vw";
upperGuideText.innerHTML = `${guide}`;
}, 2500);
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
left: 0.5vw;
top: -11.4vh;
opacity: 1;
vertical-align: middle;
}
<div class = "upperGuideContainer">
<p id="upperGuideText" class="upperGuide"></p>
</div>
You're asking your CSS to do two different things, which is causing your problem.
the below flexbox properties that you included in the parent container are enough to achieve what you want.
.upperGuideContainer {
display: flex;
justify-content: center;
align-items: center;
}
When you tell the child <p> to take an absolute position, you're breaking the flexbox properties of the parent
.upperGuide {
/* position: absolute; */
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
/* left: 0.5vw; */
/* top: -11.4vh; */
opacity: 1;
/* vertical-align: middle; */
}
EDIT: If you want to learn more about the magical properties of flexbox, I highly recommend this article. I reference it constantly.
I think you are using position absolute on the child when you don't really need to do it. once your parent container has "display: flex" as a property you can align things with "align-items" and "justify-content", there is no need for the child to have position absolute unless you need it to for other purposes.
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
/*position: absolute;*/
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
/*left: 0.5vw;*/
/*top: -11.4vh;*/
opacity: 1;
/*vertical-align: middle;*/
}
As a side note, if you are using position absolute in a container inside of an absolute container, you should avoid using vh (viewport height) and vw (viewport width) as these are values coming from the viewport. I recommend using % or px instead as these are more accurate.
Remove position:absolute, and top from .upperGrid. Because when you use absolute it is positioned according to the nearest containing block that is not absolute. Also the element is taken out of the flex display.
.upperGuideContainer {
position: absolute;
overflow: hidden;
left: 10vw;
top: 51vh;
height: 26vh;
width: 88vw;
display: flex;
justify-content: center;
align-items: center;
outline: 0.1vw dashed orange;
}
.upperGuide {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: rgb(128, 128, 128);
left: 0.5vw;
opacity: 1;
vertical-align: middle;
}
Right now when I resize my webpage it messes up my entire website. I have looked up solutions but they have not worked for me. I read that it might be because I have some positions set to absolute, I tried setting them to relative but that did not work. Any help is appreciated :)
Website: http://al-saba.net/
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
* {margin: 0; padding: 0;}
html {
background-color: black;
opacity: .9;
min-height:100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 2000;
}
h1 {
position: absolute;
font-family: 'Passion One';
font-size: 200px;
color: blue;
letter-spacing: 1.6rem;
top: calc(62% - 200px);
text-align: center;
text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
opacity: .8;
width: 100%;
z-index: 2001;
}
h2 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 26px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(64% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2002;
}
h3 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 24px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(38% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2003;
}
body {
}
footer {
position: absolute;
bottom: calc(22% - 100px);
right: calc(16% - 125px);
letter-spacing: .6rem;
z-index: 2002;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
height: 106%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 102%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #5B5B5B;
opacity: .8;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}
nav:hover {
opacity: .9;
}
nav li {
display: inline-block;
padding: 24px 24px;
}
nav li a:hover {
color: black;
}
nav li a{
color: white;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #1061E5;
text-align: center;
}
#screen1 p {
padding-top: 200px;
text-align: center;
}
#screen2 {
background: white;
text-align: center;
}
#screen3 {
background: black;
text-align: center;
}
#media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 16px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<script src = "jquery-3.1.1.min.js"></script>
<script src = "script.js"></script>
<link rel = "stylesheet" href="style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">
<title> AL-SABA.net </title>
</head>
<body>
<header>
<h3> Design • Code • Programs </h3>
<h1> AL-SABA </h1>
<h2> Personal Website </h2>
</header>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>
<div class = "homepage-hero-module">
<div class = "video-container">
<div class = "filter"></div>
<video autoplay loop class = "fillWidth">
<source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
<section id="screen1">
<p>Scroll down</p>
<nav class = "bar">
<ul>
<li class = "bar-home">Home</li>
<li class = "bar-about">About</li>
<li class = "bar-projects">Projects</li>
<li class = "bar-contact">Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<footer>
</footer>
</body>
</html>
It looks like everything is okay except for the "Al-Saba" h1. You can declare the font size using relative values that consider the viewport width.
Change your h1 CSS. Make this: font-size:200px; something like font-size:15vw.
The "Design • Code • Programs" and "Personal Website" overlap "Al-Saba" because you have them all in the same div. Try this instead:
<header>
<div> <h3> Design • Code • Programs </h3></div>
<div> <h1> AL-SABA </h1></div>
<div> <h2> Personal Website </h2></div>
</header>
You can adjust the position.
For example try adjusting the heading element position. You can see a big different.
h1,h2,h3 {
position:static;
}
Just remove this metatag
<meta name = "viewport" content = "width = device-width, initial-scale=1">