Using hero Image in about section by scrolling and resizing on scroll

Question

I am building my portfolio website and I thought of using the hero section image into the next section of about us by moving and resizing the image, as a guess I have fixed about the height of 700px up to which image has to scroll. But the problem is that it is not working on resizing screen size. Is there a way to move it such that it always fits in about section on scrolling? Below is code snippets and gif showing the problem.

<!--HTMl-->
<section class="hero" id="hero">
    <div id="hero-img" class="hero-img" ><img  src="main.png"></div>   
</section>

/*CSS*/
.hero .hero-img{
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    bottom: 0;
    max-height: auto;
    max-width: 100%;  
}
.hero .hero-img img{
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;  
}

//JavaScript//
$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
    var scr = $(window).scrollTop();
   var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();  
   if(scr<690){
       $('.hero-img').css('top',(0-(scrolled*1.1))+'px');
       $('.hero-img').css('right',(0-(scrolled*.3))+'px');
    }
    else
    {
        $('.hero-img').css('top',('top'-(scrolled*1.1))+'px');
        $('.hero-img').css('right',('right'-(scrolled*.3))+'px');
    }
   
}

Problem with resizing

54ka · Accepted Answer · 2020-11-01T08:28:26.147

What does the code do:

Takes the position of the element with ID id ="skills" and subtracts from this value the height of the DIV element in which the picture is and sets this value as the maximum for scrolling.

You had set the 690 manually. The change is that now this IF listening automatically which will come first the id ="skills" or 690

I hope I've been helpful

$(window).bind('scroll', function (e) {
    parallaxScroll();
});

function parallaxScroll() {
    var scr = $(window).scrollTop();
    var nel = $("#skills").offset().top - $("#hero-img").height();
    
    var scrolled = $('#hero-img').length - $(window).scrollTop();

    if (scr < nel && scr < 690) {
        $('.hero-img').css('top', (0 - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right', (0 - (scrolled * .3)) + 'px');
    }
    else {
        $('.hero-img').css('top', ('top' - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right', ('right' - (scrolled * .3)) + 'px');
    }

}

.hero .hero-img {
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    /* bottom: 0; */
    top: 0px;
    max-height: auto;
    max-width: 100%;
}

.hero .hero-img img {
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<section class="hero" id="hero">
    <div id="hero-img" class="hero-img">
        <img src="main.png">
    </div>
</section>

<div>
    ABOUT
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="skills">
    SKILLS
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Thanks var nel = $("#skills").offset().top - $("#hero-img").height(); made it work. — Ashking007, Nov 01 '20 at 10:16
I'm glad I was helpful :) Thank you that you mark this answer as accepted answer. You can add and positive rating on this post. — 54ka, Nov 01 '20 at 10:19

Using hero Image in about section by scrolling and resizing on scroll

1 Answers1