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>
Related
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>
How can I position the arrow at the bottom of the container? I'm using Bootstrap-5 and just can't figure out all the position attributes for the life of it. It just sticks with the other text so far.
I have tried a variety of things, but some guidance how to go about this would be great.
Thanks for taking the time to help a beginner. :)
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
<i class="bi bi-arrow-down-short"></i>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
</section>
Here you go... I suggest you to wrap the arrow in a separate container.
The reason why your arrow couldn't be positioned at the bottom was that you should have set .heroText { height: 100%; ... }, but then your title and subtitle wouldn't be vertically centered.
See the snippet below.
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
}
<!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='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
<div id="wrapper" class='d-flex justify-content-center'>
<i class="bi bi-arrow-down-short"></i>
</div>
</section>
</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>
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I have a bit of an issue with Firefox(v30). I'm making a site, using jQuery Fullpage scroller and the whole site works in Chrome(v35), IE(11), Opera(v22), but not in firefox. Some of the stylings appear, like the font and colors, but none of the images or the backgrounds and even the Sections are not displaying properly. Could you look at it please, because I have made another site with the Fullpage script and it's working under firefox and I've used the same method everywhere and now it just doesn't want to work. The address is: http://sikitomi.hopto.org/bts
Here is my index file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" lang="en" content="">
<meta name="robots" content="INDEX,FOLLOW">
<title>Body Training Solutions</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />
<!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.easings.min.js"></script>
<script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
loopTop: true,
loopBottom: true
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section0">
<div class="left">
<p><img src="./img/logo.png" alt=""/></p>
<p>FULL SITE</p>
<p>COMING SOON</p>
</div>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section1">
<h1>UPCOMING EDUCATION COURSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section2">
<div class="bg"></div>
<h1>OUR CLASSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
<ul>
<li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
<li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
<li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
</ul>
</div>
<div class="section" id="section3">
</div>
</div>
</body>
</html>
And here's the style.css I've made:
/* Font */
#font-face
{
font-family: 'canterbold';
src: url('canter_bold-webfont.eot');
src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('canter_bold-webfont.woff') format('woff'),
url('canter_bold-webfont.ttf') format('truetype'),
url('canter_bold-webfont.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Defaults */
html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
padding: 0;
margin: 0;
font-weight: normal;
list-style: none;
}
img
{
border: 0;
width: auto;
height: 100%;
}
p img
{
width: auto;
height: auto;
}
/* Customisations */
body
{
background: #fff;
font-family: 'canterbold';
color: #fff;
}
#section0
{
display: inline-block;
background: url('../img/slide01bg.jpg') no-repeat center center;
background-size: cover;
}
#section0 .left
{
position: absolute;
top: 5%;
left: 0px;
width: 36%;
height: 95%;
text-align: center;
font-size: 10vh;
font-size: 600%;
}
#section0 p
{
padding: 2% 0px;
}
#section0 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
width: 36%;
height: 12%;
text-align: center;
}
#section1
{
background: url('../img/slide02bg.jpg') no-repeat center top;
background-size: cover;
}
#section1 h1
{
position: absolute;
top: 4%;
left: 2%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
}
#section1 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
text-align: center;
}
#section2
{
background: url('../img/slide03bg.jpg') center bottom;
background-size: cover;
text-align: center;
}
#section2 h1
{
position: absolute;
top: 1%;
left: 5%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
color: #3c3c3c;
z-index: 10;
}
#section2 .bg
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 70%;
background: url('../img/slide03middle.png') no-repeat center center;
background-size: contain;
z-index: 0;
text-align: center;
}
#section2 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
z-index: 10;
text-align: center;
}
#section2 ul
{
display: block;
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 37%;
}
#section2 li
{
width: 33%;
height: 35%;
display: inline-block;
font-size: 0;
}
#section3
{
background: url('../img/slide04bg.jpg') center bottom;
background-size: cover;
}
Any help appreciated, because this is really driving me nuts at this stage... :(
Thanks a lot!
the doctype is missing, try adding <!DOCTYPE html>before the <html> tag