Shoot animation with scroll

Asked

Viewed 2,736 times

8

I tried to include the Fade function in the following elements, but was unsuccessful. The default that shown on the site is this.

I want to apply this to tag <p> for when I scroll through them, they increase the source, or give fade-in. But I can’t figure out how it works

HTML

<section data-slide="2" id="acqua"> 
    <h1>Papel Interfolhado<div class="ball"><img class="papel" src="img/papel.png"/></div></h1>
    <div id="descricao">
        <p>O papel toalha Safira tem qualidade <br/>e maciez comprovada.</p>
        <p>O guardanapo de papel Safira <br/>é ultra-absorvente</p>
         <p>É macio e foi feito pensando <br/>na consciência ambiental e na <br/>preservação do meio ambiente</p>
    </div>
</section>

JS

$(document).ready(function($) {
   // build tween
   var tween = TweenMax.fromTo("#animate2", 0.5, 
       {"border-top": "0px solid white"},
       {"border-top": "30px solid white", backgroundColor: "blue", scale: 0.7}
     );

   // build scene
   var scene = new ScrollScene({triggerElement: "#trigger2", duration: 300})
           .setTween(tween)
           .addTo(controller);

   // show indicators (requires debug extension)
   scene.addIndicators();
});

Jsfiddle.

Scrollmagic on Github.

javascript jquery
  • 1

    In its present form, your question is incomprehensible. Try to understand the problem you are wanting to solve and then [Dit]and your question to clarify better what your question is. Help us help you.

  • I’ll try, and I’ve already deleted the code and I’ve remade it. I’ve never used the stack.. I’m kind of lost here..

  • put your tbm code in jsfiddle.net

  • http://jsfiddle.net/zZEVJ/ I want to make the letters appear one after the other as I scroll on the page.. to learning jquery, and only find tutorials in English, to with a nervous difficulty, I just paid for an English course, hahahaha da não da mais !

  • Hi, Dan, welcome to [en.so]. Please, [Edit]and your question whenever you have new information to add, and try to do it in Portuguese because otherwise you have to see an editor and fix it. Maybe I didn’t do the Tour still, it’s easy and explains why the SOPT is different, if you can also take advantage and check out the mini-guide [Ask]. Good luck!

1 answer

7


I got tired of looking in your plugin. I couldn’t find any relationship between ScrollMagic and the TweenMax who placed...

So here is a solution without the plugin. Worth what it’s worth...

Minimalist version: http://jsfiddle.net/9qn99fyp/

Example with the Teucoding: http://jsfiddle.net/8j5ckd9v/

$(document).ready(function ($) {
    var elementos = $('section div p');
    elementos = elementos.map(function () {
        return {
            el: this,
            pos: $(this).position().top
        };
    });
    $(document).scroll(function () {
        var posicaoScroll = $(document).scrollTop();
        elementos.each(function () {
            if (this.pos < posicaoScroll) $(this.el).animate({'opacity': 1}, 500);
        })
    })
});

The steps I’ve taken:

  • I searched all the elements p inside section div, I reorganized this array into object array with the element and its position on the page.
  • added jQuery . scroll() to fire my code when scroll happens
  • to each scroll will search in the elements those that have inferior position to the scroll (ie, are already visible) and make it appear

You may need adjustments, but your question was not very clear. If you need more help just comment...

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.