I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.
let text = document.getElementById('text');
let moon = document.getElementById('moon');
let snow = document.getElementById('snow');
let leftMountain = document.getElementById('left-mountain');
let rightMountain = document.getElementById('right-mountain');
let btn = document.getElementById('btn');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
moon.style.top = value * -0.5 + '%';
snow.style.top = value * 1 + 'px';
leftMountain.style.left = value * -0.5 + 'px';
rightMountain.style.left = value * 0.5 + 'px';
btn.style.marginTop = value * 2 + 'px';
})
/* To reset all margin and padding */
* {
margin: 0;
padding: 0;
}
/* Now To remove horizontal scroll bar we have to use box sizing properties */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'lato', sans-serif;
/* min-height: 100vh; */
background: #fff;
transition: all 0.2s linear;
color: #000;
overflow-x: hidden;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
/* position: relative;
z-index: 1000; */
}
.logo {
font-size: 2rem;
}
header a {
text-decoration: none;
padding: 10px 20px;
position: relative;
z-index: 1000;
}
header a:hover {
color: #ff556e;
}
header a.active {
border: 0.125rem solid #ff556e;
border-radius: 2rem;
color: #ff556e;
}
.hero-section {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
.hero-section h1 {
font: italic bold 4rem lato, sans-serif;
position: absolute;
}
.hero-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none;
}
#base {
transform: translateY(200px);
}
.btn {
position: absolute;
display: inline-block;
text-decoration: none;
background: #ff0;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.2rem;
font-weight: bold;
transform: translateY(50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id="header">
Chrismas
<nav id="navigation">
Home
Description
Features
Contact Us
</nav>
</header>
<section id="heroSection" class="hero-section">
<img src="https://i.ibb.co/R605wLx/bg.png" alt="bg" id="bg">
<img src="https://i.ibb.co/LZpM2k2/moon.png" alt="moon" id="moon">
<img src="https://i.ibb.co/QnPgdXG/snow.png" alt="snow" id="snow">
<img src="https://i.ibb.co/mGgD2s7/back-mountain.png" alt="back-mountain" id="back-mountain">
<h1 id="text">Merry Chrismas</h1>
<img src="https://i.ibb.co/wCx7SMd/left-mountain.png" alt="left-mountain" id="left-mountain">
<img src="https://i.ibb.co/4YnDZTM/right-mountain.png" alt="right-mountain" id="right-mountain">
Explore
<img src="https://i.ibb.co/3kdcSVZ/base.png" alt="base" id="base">
</section>
</body>
</html>
[JSBIN Demo]
Try modifying to this:
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
You can adjust to the speed that you need
Related
I have this logo which has 2 eyes in it. I'd like to get the animated effect which will track the cursor position and look at it whole time.
I need this:
I have created this solution but still have some problem with the width of the eyes and once I get it more wide, it gets out of the border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.container .eyes {
position: relative;
width: 80px;
height: 80px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 2px solid black;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
1- don't style container and eye together. actually, you have some unnecessary styles.
2- add overflow: auto; to the eye.
3- you better differentiate the eye border color from the eyeballs, because if it's the same, the eyeballs look extended a little. it's up to you.
here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.eyes {
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 1px solid orange;
overflow: auto;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.
This is how it looks like:
I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)
I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...
Index.html :
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 1;
background-image: url("hero-img.jpeg");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
}
.text span {
position: relative;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Text On Scroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
<script>
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
</script>
</body>
</html>
You need to commented highlight css property on class .image-container{overflow: hidden; z-index: 1;} and increase top:50% to top:70% on class .text.text-dark{top: 70%;}
Note: Check on Full page
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
/* overflow: hidden; */
/* z-index: 1; */
background-image: url("https://i.stack.imgur.com/fcbpv.jpg?s=48&g=1");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
top: 70%;
}
.text span {
position: relative;
display: block;
}
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
< script >
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
<
/script>
<style>body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.container1 {
height: 10vh;
background-color: white;
z-index: 100;
position: absolute;
top: 0;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
z-index: 100;
}
.backgroundimage {
background-image: url("M0000-021-014_edited.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
position: relative;
}
.leftthing {
width: calc(100% - 400px);
float: left;
}
.leftthing img {
width: 100%;
}
.clear {
clear: both;
}
.show {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 10vh;
background-color: white;
}
a {
text-decoration: none;
font-family: 'Karla';
}
a:visited {
text-decoration: none;
}
/* menu*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* menu moving footer*/
#bottommenu {
position: fixed;
z-index: 100;
/* margin-left: 60px;*/
bottom: 0px;
background-color: transparent;
/* padding: 0px;*/
/* text-align: left;*/
width: 100%;
display: block;
transition: bottom 0.5s;
height: 10vh;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<div class="backgroundimage"></div>
<div class="container1">
<div class="header">
<div class="logo" onclick="scrollWin()">|bacheva
</div>
</div>
</div>
<div class="leftthing">
<img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
<img src="INTERIOR%20RENDER.jpg" alt="interior render">
<img src="exterior%20render.jpg" alt="exterior render">
<img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
<img src="READY%20CLIMATE%20SCHEME.jpg" alt="climate scheme">
</div>
<div class="clear"></div>
<div class="container">
<ul style="font-family: 'Karla';font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
<div id="bottommenu">
<ul style="font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
</body>
</html>
I have the following page:
I full-screen background picture
some content with pictures when you scroll down
and a menu on the bottom right (with a height of 10vh)
I am using a javascript function that does the following: When you scroll down the menu is not shown, but when you scroll up the content, the menu appears on the bottom right. When you reach the full-screen background picture on the top the menu is set to hide again to not obstruct the picture. However, currently when you reach the top of the page, you see the menu for a millisecond before it hides again. Therefore, my question is: Can I alternate the javascript function and tell the menu to disappear 10vh before it reaches the full-size background picture so I would not see it before it disappears when I reach the top of the page.
Here is the function I am using:
<script>
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
</script>
Looking at the last 'if' the menu disappears when the current scroll is '0', but I would rather have it disappear before it reaches this last possible scroll (before it reaches the full-screen background picture.)
Thank you in advance for your help.
I've made a parallax effect on my site. Now i want to realize actions for buttons.
Click on button must move user's screen to the anker. But it's work wrong. Function defines offset and use this data, but parallax effect change that parameter. How i can use ankers and parallax together?
$(document).ready(function() {
$(window).bind('scroll',function(e){
parallaxScroll();
});
var div1Height = $('.div1').height();
var div2Height = $('.div2').height();
var div3Height = $('.div3').height();
var div2Top = div1Height;
$('.div2').css('top', div2Top);
var div3Top = div2Top + div2Height;
$('.div3').css('top', div3Top);
div1Position = $('.div1').position().top;
div2Position = $('.div2').position().top;
div3Position = $('.div3').position().top;
// Navigation
$('a.firstImage').click(function(){
$('html, body').animate({
scrollTop:0
}, 1000, function() {
parallaxScroll();
});
return false;
});
$('a.secondDiv1').click(function(){
$('html, body').animate({
scrollTop:$('.div1').offset().top
}, 1000, function() {
parallaxScroll();
});
return false;
});
$('a.thirdDiv2').click(function(){
$('html, body').animate({
scrollTop:$('.div2').offset().top
}, 1000, function() {
parallaxScroll();
});
return false;
});
$('a.fouthDiv3').click(function(){
$('html, body').animate({
scrollTop:$('.div3').offset().top
}, 1000, function() {
parallaxScroll();
});
return false;
});
});
// Parallax
var div1Position = 0;
var div2Position = 0;
var div3Position = 0;
var scrolledAlbum = 0;
var scrolledFooter = 0;
function parallaxScroll(){
var scrolled = $(window).scrollTop();
if ($(document).scrollTop() + $(window).height() < $('.div2').height() + $('.div2').offset().top) {
if ($(document).scrollTop() + $(window).height() < $('.div1').height() + $('.div1').offset().top) {
$('.div1').css('top', div1Position - scrolled * 0.95);
$('.div2').css('top', div2Position - scrolled * 0.95);
$('.div3').css('top', div3Position - scrolled * 0.95);
scrolledAlbum = scrolled;
} else {
$('.div1').css('top', div1Position - scrolled * 0.95);
$('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
$('.div3').css('top', div3Position -scrolled*1.9 + scrolledAlbum);
scrolledFooter = scrolled;
}
} else {
$('.div1').css('top', div1Position - scrolled * 0.95);
$('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
$('.div3').css('top', div3Position -scrolled*2.85 + scrolledAlbum + scrolledFooter);
}
}
body {
margin: 0;
padding: 0;
background: #000000;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.5px;
color: #ffffff;
font-size: 20px;
width: 100%;
}
p {
color: white;
font-size: 24px;
}
ol, ul {
list-style: none;
}
/* Content */
.bodyImage {
width: 100%;
height: 100vh;
background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
background-size: 100%;
display:flex;
justify-content: center;
align-items: center;
}
.body {
position: relative;
height: 115vh;
background-attachment: fixed;
}
.div1 {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
position: absolute;
top: 0px;
z-index: 2;
}
.div2 {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
position: absolute;
z-index: 3;
background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
background-size: 100%;
}
/* Footer */
.div3 {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
z-index: 4;
background-color: #000000;
}
/* Navigation */
nav#primary {
z-index: 5;
position: fixed;
top: 50%;
right: 16px;
margin-top: -40px;
}
nav#primary li {
position: relative;
height: 20px;
}
nav#primary a {
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
background: transparent url(http://s1.iconbird.com/ico/0612/vistabasesoftwareicons/w48h481339252451BoxGrey4.png) 4px 4px no-repeat;
}
nav#primary a:hover, nav#primary a.active {
background: transparent url(http://s1.iconbird.com/ico/0612/vistabasesoftwareicons/w48h481339252451BoxGrey4.png) 4px 4px no-repeat;
}
nav#primary h1 {
position: absolute;
right: 22px;
top: -7px;
display: none;
padding: 4px 20px 4px 7px;;
color: #fff;
white-space: nowrap;
background: #000000 100% 50% no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DECAY</title>
<link type="text/css" rel="stylesheet" href="styles/style.css">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<!-- Navigation -->
<nav id="primary">
<ul>
<li>
<h1>Image</h1>
<a class="firstImage" href="#bodyImage">View</a>
</li>
<li>
<h1>div1</h1>
<a class="secondDiv1" href="#div1">View</a>
</li>
<li>
<h1>div2</h1>
<a class="thirdDiv2" href="#div2">View</a>
</li>
<li>
<h1>div3</h1>
<a class="fouthDiv3" href="#div3">View</a>
</li>
</ul>
</nav>
<!-- Content -->
<div class="bodyImage">
<p>bodyImage</p>
</div>
<div class="body">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="div3">
<p>div3</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
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">