ScrollMagic icon indicating copy to clipboard operation
ScrollMagic copied to clipboard

Is it possible to scroll at same time for left column and Right Column in Div..?

Open speeday opened this issue 4 years ago • 0 comments

I have try with below code and spent too much time but I think it seems not feasible though let me know your feedback regarding the same with below code.

HTML Code:-

<div class="container-fluid">
            <div class="row m-0">
                <div class="col-xs-2 col-sm-3 col-md-3 col-lg-3">
                    <div class="Sticktitle">
                        <span class="Title">Lorem Ipsum</span>
                        <h2 class="Desc">Lorem Ipsum Lorem Ipsum</h2>
                        <p class="Point">Lorem</p>
                    </div>
                </div>
                <div class="col-xs-10 col-sm-7 col-md-6 col-lg-9">
                    <div class="desc">
                        <img src="images/image-one.jpg" class="img-fluid"/>
                        <div class="Section">
                            <p class="Title">Beer</p>
                            <div class="Para">
                                <p>
                                    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
                                    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
                                </p>
                                <a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum</a>
                                <a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum
                                    Lorem Ipsum</a>
                                <br />
                                <a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum Lorem
                                    Ipsum</a>
                                <a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

This Code is working for Left Column Based Element - Sticktitle

  new ScrollMagic.Scene({
         triggerElement: '.container-fluid',
         duration: 1150,
         triggerHook: 0
         })
         .setPin(".Sticktitle", {
         pushFollowers: false
         })
         // .addIndicators()
         .addTo(controller)

This Code is not working for Right Column Based Element Properly - img-fluid

         new ScrollMagic.Scene({
         triggerElement: '.container-fluid',
         duration: 1150,
         triggerHook: 0
         })
         .setPin(".img-fluid", {
         pushFollowers: false
         })
         // .addIndicators()
         .addTo(controller)

It would be glad if I can hear something asap.

speeday avatar Jul 30 '20 20:07 speeday