I'm trying to imitate a design where I have to add a pattern over the linear gradient. I've used ::before element to do that.
But now the hamburger icon and links are not working. When I inspect the site on the mobile viewport, it shows that body covers the whole area. I have tried messing with the z-index and pointer events but failed to meet the expectation. Is there any way to fix this?
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click',()=>{
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body{
min-height: 100vh;
font-size: 1rem;
text-align: center;
z-index: 0;
}
header{
min-height: 85vh;
background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
z-index: -2;
}
header::before{
position: absolute;
content: '';
top: 5rem;
left: 8rem;
width: 100%;
height: 100%;
background: url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg) no-repeat;
background-size: 100% 100%;
transform: scale(3);
z-index: -1;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo{
max-width: 80px;
}
nav .nav-links,nav .login-section{
display: none;
}
nav .menu{
width: 2rem;
display: flex;
align-items: center;
cursor:pointer;
}
.menu .hamburger{
max-width:40px;
cursor:pointer;
}
header .text-content{
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>
You've set property z-index: -3; to header and z-index: -1; to it's pseudo element ::before. It is clear that header has smaller z-index than it's pseudo element.
So ::before has greater stack order than that of header. Due to that reason ::before is in the front of header which has lower stack order than it's pesudo element.
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click',()=>{
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body{
min-height: 100vh;
font-size: 1rem;
text-align: center;
z-index: 0;
}
header{
min-height: 85vh;
background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
z-index: 0;
}
header::before{
position: absolute;
content: '';
top: 5rem;
left: 8rem;
width: 100%;
height: 100%;
background: url("https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg") no-repeat;
background-size: 100% 100%;
transform: scale(3);
z-index: -1;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo{
max-width: 80px;
}
nav .nav-links,nav .login-section{
display: none;
}
nav .menu{
width: 2rem;
display: flex;
align-items: center;
cursor:pointer;
}
.menu .hamburger{
max-width:40px;
cursor:pointer;
}
header .text-content{
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>
Be careful when using position: relative/absolute they are not in the normal flow so their behavior is "ghost-like". In the example:
the position properties are removed
the pseudo-element header::before is removed
the background properties of header::before has been merged with the background properties in header
background-image:
/* Top */
url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg),
/* Bottom */
linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
background-repeat: no-repeat, repeat;
background-size: 150% 150%, cover;
Note, the shorthand background property isn't used here. Each value is separated by a comma. See this article for details
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click', () => {
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body {
min-height: 100vh;
font-size: 1rem;
text-align: center;
}
header {
min-height: 85vh;
background-image:
url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg),
linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
background-repeat: no-repeat, repeat;
background-size: 150% 150%, cover;
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
overflow: hidden;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo {
max-width: 80px;
}
nav .nav-links,
nav .login-section {
display: none;
}
nav .menu {
width: 2rem;
display: flex;
align-items: center;
cursor: pointer;
}
.menu .hamburger {
max-width: 40px;
cursor: pointer;
}
header .text-content {
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>
Related
Since products were not responsive against resizing the browser like this:
I wanted to make my grid responsive so i added grid area like this:
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
but now footer is smaller and i have just one product instead of what should be in the body:
what is wrong with adding grid area in this code?
or if there is a better way to make them responsive what is it?
also this is the overall view of the site:
.header{
color: saddlebrown;
width: 100%;
height: 100px;
position: fixed;
background-color: burlywood;
opacity: 33px;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 1000;
grid-area: head;
}
body{
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer{
color: white;
background: sandybrown;
margin-top: 100px;
height: 100px;
margin-right: 0;
width: 100%;
grid-area: foot;
}
.card {
max-width: 400px;
margin: auto ;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
grid-area: card ;
}
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media screen and (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}
}
#media screen and (max-width: 1319px){
.grid{
grid-template-columns:1fr 1fr 1fr ;
}
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<div class="header">
<h1 >header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
</div>
<div class="footer">
<h1 >© All rights reserved</h1>
</div>
</body>
</html>
You want to set grid-area with head and foot which are outside of grid itself.
My propose is to remove grid-area from grid, and just use grid-template with media queries, or simply you can add display flex with flex-wrap.
I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.
I'm very new to website development/design so I've been struggling with getting a top row menu to work on my site. Here's the code I have so far. Any suggestions for things that might fit with my theme? I'm going for a dark green/blurry style, I've gotten one of the boxes to work however when I try to insert something to act as a background for a centered nav-bar, it doesn't even show up.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght#500&display=swap');
#import url(https://fonts.googleapis.com/css?family=Lato);
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
section .box
{
position: relative;
max-width: 700px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0,0,0,1);
overflow: hidden;
color: #000;
}
section .box:before
{
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
backround-attachement: fixed;
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
filter: blur(10px)
}
section .box h2
{
position: relative;
margin: 0 0 20px;
padding: 0;
font-size: 48px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box p
{
position: relative;
margin: 0;
padding: 0;
font-size: 18px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box
{
width: 50rem;
height: 10rem;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="box">
<center>
<h2 style="color:#ffffff";>Lorem ipsum</h2>
<p style="color:#ffffff";>Lorem ipsum dolor sit amet</p>
</center>
</div>
</section>
</body>
First of all, welcome to web development! Have fun and keep learning.
A note in the beginning, try to use smaller images/background-images for the web (loading times for example).
For a navigation in your current layout, i would suggest something like this:
I removed ur inline html styling, it's unnecessary if you are using a stylesheet file. I also removed the <center> html tag, it's deprecated
Next steps i added/changed the color of all box elements .box * to position: relative; (for showing "above" your :before element) and set the color to white and centered it.
Then i added a navigation (in your html a new box element with a list in it). Set the list items to display: inline-block for a very simple navigation alignment.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght#500&display=swap');
#import url(https://fonts.googleapis.com/css?family=Lato);
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
section .box
{
position: relative;
max-width: 700px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0,0,0,1);
overflow: hidden;
color: #000;
}
section .box:before
{
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
filter: blur(10px);
}
section .box h2
{
position: relative;
margin: 0 0 20px;
padding: 0;
font-size: 48px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box p
{
position: relative;
margin: 0;
padding: 0;
font-size: 18px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box
{
width: 50rem;
height: 10rem;
border-radius: 5px;
}
section .box.navigation
{
width: 50rem;
height: 5rem;
border-radius: 5px;
margin-bottom: 1rem;
}
section .box * {
color: #ffffff;
position: relative;
text-align: center;
}
section .box.navigation ul li {
list-style-type: none;
display: inline-block;
}
section .box.navigation ul li a {
display: block;
margin: 10px;
}
<section>
<div class="box navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="box">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</section>
I use resizable split views with split.js
I have a very basic setup with 2 panes
How can I center bottom-footer in the right pane?
Since the width of the pain is dynamic the footer doesn't centered properly once pane resized.
I've tried all possible positioning - absolute, fixed, sticky, relative but nothing seems to be work.
JSFiddle
Split(['.split-left', '.split-right'], {
gutterSize: 10,
sizes: [33,67] // in %
})
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width:100%;
height:100%;
border: 0px solid;
overflow: hidden;
}
.split-left {
background-color: rgb(250,250,250);
padding: 20px;
padding-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 60px;
}
.split-right {
background-color: rgb(253,253,253);
background-color: white;
padding-top: 0px;
padding-right: 50px;
padding-left: 50px;
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.gutter {
cursor: col-resize !important;
height: 100%;
background: #ddd;
}
.footer {
position: fixed;
bottom: 0;
width: 60%;
background: rgba(255,0,0,0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
<body>
<div class="content">
<div class="split split-left">
</div>
<div class="split split-right">
<div class="content"></div>
<div class="footer">Footer</div>
</div>
</div>
</body>
you can use css flexbox
.split-right {
display: flex;
justify-content: center; // center horizontally
align-items: center; // center vertically
}
css flexbox tutorial
I've managed to create a Pure CSS Parallax, however, I'm having some difficulty with scrollTop while overflow: hiddenis applied to html.
The CSS requires overflow: hidden either on the html tag or whatever relevant container and overflow-x: hidden; overflow-y: auto on the body tag or whatever relevant container.
In any case where the overflow is applied, whether on html and body tags or otherwise, scrollTop does not work.
I have been able to detect scroll on the body, either to trigger an alert or to addCLass, but I would like to removeClass once the user scrolls back up to the top of the page.
Here's my code, so far, this is after trying various other normal solutions that work with overflow removed from the html element. This solution only adds the relevant class on scroll.
HTML
<header>
</header>
<div class="parallax">
<div class="background"></div>
<div class="sheet-1">
<h1 class="page-header">My Parallax</h1>
</div>
<div class="sheet-2"></div>
</div>
SASS
\:root
font-size: 10px
*, *::before, *::after
box-sizing: border-box
margin: 0
padding: 0
text-decoration: none
html
overflow-y: auto
body
height: 100vh
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
perspective: 0.1rem
header
height: 5rem
width: 100%
background: black
opacity: 0
position: fixed
top: 0
left: 0
z-index: 999
transition: opacity 1.5s ease
&.black
opacity: 1
transition: opacity 1.5s ease
.parallax
transform-style: preserve-3d
.background
height: 100vh
width: 100%
background: url('https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg')
background-size: cover
transform: translateZ(-0.1rem) scale(2)
position: relative
[class*='sheet-']
min-height: 100vh
display: flex
align-items: center
.sheet-1
position: absolute
top: 0
left: 0
transform: translateZ(-0.05rem) scale(1.5)
.page-header
color: white
font-size: 4rem
text-align: center
text-transform: uppercase
letter-spacing: 0.15rem
margin: 0 auto
.sheet-2
background: url('https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg') no-repeat center center
background-size: cover
JS
$("body").on("scroll",function(){
$('header').addClass('black');
});
You can view the project on Codepen here.
This situation was able to be resolved by monitoring the scroll event on the container.
In advance,sorry for the poor organization and structuring of the classes. Was roughing through some old code.
Compiled HTML
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
Compiled CSS
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
Javascript
// Get Scroll Position
var prlx = document.getElementById("prlx");
prlx.onscroll = function prlxAnimation() {
var prlx = document.getElementById("prlx");
var scrollPos = prlx.scrollTop;
var header = document.getElementById("backdrop");
// document.getElementById ("pos").innerHTML = y + "px"
if(scrollPos > 10){
header.classList.add("black");
}
else {
header.classList.remove("black");
}
}
The same pen is still in use on Codepen here.
$(window).scroll(function(){
var scroll= $(window).scrollTop();
<script src="https://code.jquery.com/jquery-3.3.1.min.js"/>
$(window).scroll(function(){
var scroll= $(window).scrollTop();
$(".background").css("background-position","center "+(scroll*0.2)+"px");
});
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
hope this code works