Scrollmagic Показать и удалить пин-код при записи в div

Я играл со Scrollmagic и мне удалось заставить работать несколько вещей. Что я пытаюсь сделать прямо сейчас, так это создать липкую панель социальных сетей для моего блога в нижней части области просмотра. У меня не было проблем с тем, чтобы заставить его отображаться с моим кодом

// Sticky Share Bar
    var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5, 
      { bottom:-50}, 
      { bottom:0 }

);

var share = new ScrollMagic.Scene({
      triggerElement: '.entry',
      offset:60,
    })
    .setTween(stickyShareAnimation)
    .setPin('.share-bar')
    .addIndicators()
    .addTo(controller)

Это HTML

<section class="share-bar">
        <div id="share-container" class="container">
            <div class="row">
                <div class="col-md-12">This is the content</div>
            </div>
        </div>
    </section>
    <section class="blog-content">
        <div class="container">
            <div class="row">
                <article class="single-post">
                    <div class="entry">
                        <?php the_content();?>
                    </div>
                </article>
            </div>
        </div>
    </section>
    <section class="Test">
    Where I want sharebar to tweenout.
    </section>

Я знаю, что мог бы затемнить панель обмена с помощью другой анимации Tweenmax, нацеленной на «Тест раздела», но решил, что, вероятно, есть лучший способ сделать это с моим первоначальным javascript. Есть ли другой способ или мне нужно создать отдельный Tween для панели общего доступа, чтобы скрыть ее после завершения содержимого (div.entry).

Codepen http://codepen.io/anon/pen/aOWBQZ


javascript gsap scrollmagic
person Phrosty30    schedule 05.06.2015    source источник
comment
Можете ли вы опубликовать соответствующий CSS, пожалуйста? также ваш JS кажется неполным, т.е. controller, похоже, не определен? И было бы очень хорошо, если бы вы могли просто создать демонстрацию jsFiddle или Codepen с фиктивным содержимым. Возможно?   -  person Tahir Ahmed    schedule 05.06.2015
comment
Код, который у меня есть, работает, просто хотел посмотреть, есть ли другой вариант, кроме создания новой анимации/сцены. Я добавил codepen, чтобы вы поняли общую концепцию. Я бы хотел, чтобы панель общего доступа появлялась, когда я прокручивал div.entry, а затем исчезал, когда я переходил в следующий раздел (тест).   -  person Phrosty30    schedule 06.06.2015

Ответы (1)


arrow_upward
2
arrow_downward

Если вам нужна анимация с прокруткой (длительность сцены > 0), то да, вы должны создать одну сцену для анимации заголовка и одну для повторной анимации.

Если вы хотите запустить анимацию и анимировать одно и то же свойство (например, непрозрачность при появлении и исчезновении) с помощью метода setTween ScrollMagic, возникнут проблемы, связанные с перезаписью свойства.

Подробнее см. здесь: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwrite-by-another

ПРИМЕЧАНИЕ. Вики была написана для ScrollMagic 1.3, но применяется тот же принцип.

Рекомендуемое решение (обновлено для ScrollMagic 2.x): http://jsfiddle.net/xk22Lx50/

Однако более простым решением может быть определение класса CSS и использование setClassToggle для его добавления или удаления на определенное время. Анимация может быть достигнута с помощью анимации CSS. См.: http://scrollmagic.io/examples/basic/class_toggles.html.

И еще одно: если ваш закрепленный элемент всегда закреплен (как в вашем примере) и просто анимируется или исчезает, но никогда не является частью потока DOM, нет причин делать его липким (т.е. использовать функциональность закрепления ScrollMagic) .
Просто установите position: fixed в CSS, и все готово.

Вы по-прежнему можете использовать ScrollMagic для его анимации, но у вас будет меньше (ненужного) кода JS.

person Jan Paepke    schedule 10.06.2015