1
\$\begingroup\$

I have a large image of an L-shaped painting on one page. I created divs over parts of the painting I want to explain. When the page loads, I want it to scroll down the length of the image, and then move to the left of the image, stopping at each div for a few seconds. I understand how to get the page to scroll down on load, but I do not understand how to continue scrolling once it has reached the first div. Should I target the data-box and not the class, so it will continue to move through each div box?

        <div class=" box totem">
            <span class="hoverTotem" data-box="totem" ></span>
        </div>


    <!-- ganesh -->
    <div class="focus box ganesh">
        <span data-box="ganesh" ></span>
    </div>
    <!-- BIRD 1 -->
    <div class="box bird1">
        <span data-box="bird1" ></span>
    </div>
    <!-- KATY -->
    <div class="box katy">
        <span data-box="katy" ></span>
    </div>
    <!-- FREDIA -->
    <div class="box fredia">
        <span data-box="fredia" ></span>
    </div>   

    <!-- saar -->
    <div class="box saar">
        <span data-box="saar" ></span>
    </div>

    <!-- parks -->
    <div class="box parks">
        <span data-box="parks" ></span>
    </div>

    <!-- james -->
    <div class="box james">
        <span data-box="james" ></span>
    </div> 

    <!-- ANNA -->
    <div class="box anna">
        <span data-box="anna" ></span>
    </div>  

    <!-- ANDY -->
    <div class="box andy">
        <span data-box="andy" ></span>
    </div> 

    <!-- AI -->
    <div class="box ai">
        <span data-box="ai" ></span>
    </div>

    <!-- FRIENDS -->
    <div class="box friends1">
        <span data-box="friends1" ></span>
    </div>
    <div class="friends2">
        <span data-box="friends2" ></span>
    </div>
    <div class="box friends3">
        <span data-box="friends3" ></span>
    </div>  

    <!-- KIDS -->
    <div class="box kids">
        <span data-box="kids" ></span>
    </div>          
    <!-- PARENTS -->    
    <div class="box parents">
        <span data-box="parents" ></span>
    </div>          
    <!-- QUOTE -->    
    <div class="box quote">
        <span data-box="quote" ></span>
    </div>      
    <!-- BIRD 2 -->
    <div class="box bird2">
        <span data-box="box bird2" ></span>
    </div>        
</div>



<div class="container-fluid">
    <div id="" class="row meaningImg">
        <div class="background">                        
            <a href="../public/img/TALLPART1.png">
              <img class="" src="../public/img/TALLPART1.png" class="meaningImg">
            </a>
        </div>
    </div>
</div>      

<script>
    $(document).ready(function(){
    $('html, body').animate({
        scrollTop: $(".bird1").offset().top}, 5000),
        scrollLeft: $('.quote').offset().top}, 5000);
});


</script>
\$\endgroup\$
0
\$\begingroup\$

Ok, I got my code to work.

I kept my HTML the same but made a few changes to my jQuery.

    $(document).ready(function(){
$('html, body').animate({
    scrollTop: $(".ganesh").offset().top,
}, 5000).animate({
    scrollLeft: $(".bird1").offset().left,
}, 5000).animate({
    scrollLeft: $(".saar").offset().left,
}, 5000).animate({
     scrollLeft: $(".anna").offset().left,
}, 5000).animate({
     scrollLeft: $(".friends1").offset().left,
}, 5000).animate({
     scrollLeft: $(".quote").offset().left,
}, 5000);
});  
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.