I have been experimenting with using waypoints for two specific purposes.
The first objective is to determine whether a user is scrolling up or down and if the container comes into view. However, this functionality is not working as expected.
The second goal I have in mind is slightly different and does not directly involve waypoints. I am aiming to make the image you see in the code snippet gradually
transform: translateXbased on the scroll progression. Unfortunately, I am unsure about how to achieve this effect. The inclusion of 'translate' in the snippet serves as an illustration of the desired movement.
When you visit this website and scroll down slightly to the "Nike and Snapchat" section, you will notice a phone image of Lebron James. As you continue to scroll either up or down, the image shifts accordingly. This is the behavior I am trying to emulate.
Does anyone have any suggestions on how I can accomplish this?
var homeMainSec = $('#homeMainSec');
homeMainSec.waypoint(function(direction) {
if (direction === 'down') {
$('#homeBoxGridRight img').addClass('slideLeftDisplay');
console.log('Left Slide');
}
}, {
offset: '25%'
});
homeMainSec.waypoint(function(direction) {
if (direction === 'up') {
$('#homeBoxGridRight img').addClass('slideRightDisplay');
console.log('Right Slide');
}
}, {
offset: '25%'
});#homeMainSec {
width: 100%;
height: 95vh;
position: relative;
margin-top: 70px;
}
.homeMainBlock {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
/*- HomeBoxGridRight Section -*/
#homeBoxGridRight img {
display: block;
width: 40%;
height: auto;
margin-left: 50%;
}
.slideLeftDisplay {
transform: translateX(-100px);-webkit-transform: translateX(-100px);
transition: 1s;-webkit-transition: 1s;
opacity: 1;
}
.slideRightDisplay {
transform: translateX(100px);-webkit-transform: translateX(100px);
transition: 1s;-webkit-transition: 1s;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="homeMainSec">
<div class="homeMainBlock" id="homeBoxGridLeft">
</div><div class="homeMainBlock" id="homeBoxGridRight">
<img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="Image">
</div>
</section>
<br><br><Br><br><br><br><br><br>