After experimenting with different plugins, I managed to achieve a parallax effect on my website's landing page by using the interactive_bg.js plugin. Following the steps outlined in a demo tutorial, I was able to attain the desired visual effect.
Below is the current structure of my HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<div class="main">
<h1>I am<span id="typed"></span></h1>
<h4 id="test">I create<span id="typed2"></span></h4>
<a id="but1" class="ghost-button-semi-transparent" href="#">Check me out!</a>
</div>
</div>
</body>
Check out the relevant CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
.main {
position: relative;
}
At this point, any elements placed after the wrapper bg div either stack below it or require absolute positioning to appear on top. Adjusting margins can lead to layout issues when the window size changes.
How can I effectively position elements following the wrapper bg div?