I want to achieve this result of the trees moving from center to left and right on click.
I was trying this tutorial but it didn't work at all in translating the first tree from center to left. I am working on the white arrows of the same section to see if its work and added changing the WHO WE ARE title to magenta to see if the function is working and it is but the image isn't moving at all.
<section id="abtus">
<div class=" container position-absolute" style=" left:100px; float: left; z-index: 100;">
<a href="#abtus">
<button onclick="next()"><span class="arrow1"></span></button>
</a>
</div>
<div class="container position-relative">
<div class="row mt-5 ms-5">
<div class="col offset-md-1 col-md-4">
<h3 class="text1 pb-3" id="myP">WHO WE ARE</h3>
<p class="text2 p-1">
We are two sisters who come from a similar
<br>
background of love for everything creative and magical.
</p>
<p class="text2 p-1">
We aim to deliver your stories with interesting
<br>
visually pleasing magic that separates you from the rest!
</p>
<p class="text2 p-1">
To guarantee great quality work and also an added fun
<br>
element to your project.
</p>
</div>
<div class="col col-md-4">
<h3 class="text1 pb-3">THE TEAM</h3>
<div class="row-4 pb-5 position-relative">
<p class="text2 pb-4">We have a rich experience in the market, especially
<br>
in gaming and animation. We work with several tasks
<br>
such as visual development, concept art, character design,
<br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p>
</div>
</div>
</div>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute" style="right: 200px;">
<img src="./images/tree1.png" width="800" class="img" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="./images/tree2.png" width="900">
</div>
</div>
<div class="container position-absolute" style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute " style="right: 200px;">
<img src="https://imgur.com/9d6S7wK" width="800" class="img tree1" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="https://imgur.com/VOFz7Hi" width="900">
</div>
</div>
<div class="container position-absolute " style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
</section>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
CSS
section{
background-color: pink;
height: 100%;
width: 100%;
}
tree1{
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(https://imgur.com/9d6S7wK");
background-size: 100% 100%;
width: 50%;
height: 50vh;
}
.arrow1{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(45deg);
z-index: 1;
}
.arrow2{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(225deg);
z-index: 1;
}
.img{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
;}
.img .horizTranslate{
margin-right: 80% !important;
}
.img .horizTranslateReverse{
margin-left: 0% !important;
}
}
JS
const img = document.querySelector("#img");
function next() {
document.getElementById("myP").style.color = "magenta";
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
document.getElementById("myP").style.color = "black";
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
I've included the code of this section here and uploaded the trees images. So far I managed to put the section style 100% but it is the parallax element that is driving me crazy.
Could someone please help me in figuring out what is wrong?
