Shoot animation with scroll

Question

Shoot animation with scroll

Navigation

#1 by (7 votes)

7

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

I want to apply this to the <p> tag for when I scroll and go through them, they increase the font, or fade-in . But I can not 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

asked by anonymous 20.05.2014 / 20:34

1 answer

Element Rotation With Arrow How to customize a 404 error page in CodeIgniter 2.1.4 using base_url ()?

score 7 · Accepted Answer

I'm tired of browsing through your plugin. I did not find any relationship between ScrollMagic and TweenMax that you put ...

So here is a solution without the plugin. It's worth what ...

Minimalist version: link

Example with the code: link

$(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 took:

I searched for all elements p within section div , reorganized this array into an array of objects with the element and its position on the page.
added jQuery .scroll () to trigger my code when scrolling happens
Each scroll will look for elements that have a lower position than scroll (that is, they are already visible) and make it appear

Maybe it needs tweaking, but your question was not very clear. If you need more help just comment ...