https://www.youtube.com/watch?v=mxHoPYFsTuk&ab_channel=WebDevSimplified i followed this tutorial to make this parallax scrolling effect and after adding my own images, it doesnt work, does anyone know how to fix this?
video link: https://youtu.be/I7JoNXxYCSU
tried making a parallax scrolling website but random parts of the image disappeared
html, body {
margin: 0;
overflow: auto;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
width: 100vw;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2);
}
.foreground {
transform: translateZ(-5px) scale(1.5);
}
.background,
.foreground {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-size: 7rem;
color: white;
text-shadow: 0 0 5px black;;
}
section {
font-size: 2rem;
padding: 2rem;
background-color: #333;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<header>
<img src="https://gcdnb.pbrd.co/images/oPzai9kdxxVl.png" class="background">
<img src="https://gcdnb.pbrd.co/images/OotzTQMkzcbC.png" class="foreground">
<h1 class="title">Welcome!</h1>
</header>
<section>Lorem ipsum dolor sit amet pe?</section>
</div>
</body>
</html>
Related
I'm trying to learn how to do parallax scrolling effect, watched some tutorials and tried one, but it's not working, any idea what might be wrong?
what shows is just static pictures, it doesn't have any parallax effect at all.
and I can't upload this post because it says my post is mostly code, i wish i can add some lorem here because i literally have no idea what kind of information to add more...
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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=Roboto:wght#100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<title>Task 3</title>
</head>
<body>
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS CODE :
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after {
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
You were almost there! You shouldn't add the background-image to ::after, you can just add it to the element itself. And you forget a few lines of code for the background-image:
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Here it is all together:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax-bg-1 {
background-image: url(../imgs/1.png);
}
.parallax-bg-2 {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
If you want to have the little scroll effect on the background-image, you can use ::after just like you did:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax{
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.single-parallax h1{
font-size: 20px;
background: rgba(0,0,0,.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after{
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after{
background-image: url(../imgs/2.png);
}
.static-bg{
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
How can you get the text in the background? I would like the title (and other additional text to be in the background) Here is the html code:
This is how it looks at the moment, screenshot of not the whole screen, photo resolution 5498x3615
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</body>
You can set background-image and just put the text on top. Like this:
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
body {
background-image: url(https://via.placeholder.com/1200x600);
background-size: cover; /* Size The Image */
background-position: center; /* Center The Image */
background-repeat: no-repeat;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
</body>
I've got this responsive solution:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
position: absolute;
z-index: 1;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
display:block;
margin: 0 auto;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</div>
</body>
</html>
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to SPACE </title>
<link rel="icon" href="planeticon.png">
<link rel="stylesheet" href="indexspace.css">
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth"></div>
</div>
</body>
</html>
So this is my CSS:
body {
margin: 0;
padding: 0;
background: url(starbackground.jpg);
}
.container {
width: 120px;
height: 120px;
margin: 200px auto;
position: relative;
padding:40px;
}
.sun {
width: 120px;
height: 120px;
background: URL(sun2.png) no-repeat;
background-size: cover;
border-radius: 50%;
}
.earth {
width: 40px;
height: 35px;
background: url(earth4.png) no-repeat;
background-size: cover;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
box-shadow: 20px 20px 10px 2px #000000cc;
animation-duration: 4s;
animation-name: slide;
}
#keyframes slide {
50%{
left: calc(100%-40px);
top: calc(100%-40px);
}
100% {
z-index: -1;
}
}
And this is what it shows in Inspect: [key frame problem][1] [1]: https://i.stack.imgur.com/NmT6I.png
I've read that strikethrough lines means that some other element is overriding its importance, however I'm struggling to figure this one out.
Thanks in advance
So I'm having a hard time making an image with a psuedo element
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
And Here's the CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ 14#2x.png');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
Here's how the code looks when you see it:
I want the image to take 100% of the width instead of repeating like that maybe the image is too small but I can't find a bigger image
Here's the image
THANK YOU IN ADVANCE
Try this, I added background-repeat: no-repeat; and then change the background size to background-size: 100% 100%;
See working example here:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>