8

Tentei incluir a função de Fade nos seguintes elementos, porém não tive sucesso. O default que mostrado no site é este.

Quero aplicar isso a tag <p> para quando eu der scroll e passar por elas, elas aumentem a fonte, ou deem fade-in. Mas não estou conseguindo entender como funciona

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 no GitHub.

5
  • 1
    Na forma atual, sua pergunta é incompreensível. Tente entender o problema que você está querendo resolver e depois editare sua pergunta para esclarecer melhor qual é sua dúvida. Ajude-nos ajudar você.
    – Maniero
    Commented 20/05/2014 às 18:53
  • vou tentar, e que ja apaguei o codigo e refiz.. nunca usei o stack.. to meio perdido aqui.. Commented 20/05/2014 às 18:57
  • posta seu código tbm no jsfiddle.net Commented 20/05/2014 às 19:06
  • jsfiddle.net/zZEVJ quero fazer as letras aparecerem uma apos a outra conforme dou scroll na pagina.. to aprendendo jquery, e so acho tutoriais em ingles, to com uma dificuldade nervosa, acabei de pagar um curso de ingles, hahahaha nao da mais ! Commented 20/05/2014 às 19:16
  • Oi, denis, bem vindo ao Stack Overflow em Português. Por favor, editare sua pergunta sempre que tiver novas informações que acrescentar, e tente caprichar no português porque senão tem que vir um editor e consertar. Talvez não tenha feito o Tour ainda, é fácil e explica porque o SOPT é diferente, se puder aproveite também e confira o mini-guia Como perguntar. Boa sorte!
    – brasofilo
    Commented 20/05/2014 às 19:32

2 Respostas 2

7

Cansei de procurar no seu plugin. Não encontrei nenhuma relação entre o ScrollMagic e o TweenMax que colocou...

Assim aqui fica uma solução sem o plugin. Vale o que vale...

Versão minimalista: http://jsfiddle.net/9qn99fyp/

Exemplo com o teucódigo: 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);
        })
    })
});

Os passos que dei:

  • procurei todos os elementos p dentro de section div, reorganizei essa array em array de objetos com o elemento e a posição do mesmo na página.
  • adicionei o .scroll() do jQuery para disparar o meu código quando o scroll acontece
  • a cada scroll vai procurar nos elementos os que têm posição inferior à do scroll (ou seja, já estão visiveis) e faz ele aparecer

Talvez precise de ajustes, mas a sua pergunta não foi muito clara. Se precisar mais ajuda é só comentar...

0
-2

//Usa esse parâmetro aqui pra que tu possa situar o valor do scroll… Escreve esse comando no teu código e depois da um console.log com event ‘scroll’.

Const valorDoScroll = document.body.scrollheight + window.innerHeight

Console.log(ValordoScroll)

//A partir daqui tu pode usar isso pra fazer renderizar qualquer tipo de alteração no scroll.

Aí tu pode fazer o seguinte no caso de scrollar pra mudar o tamanho da fonte.

Window.addEventListen(‘scroll’,function(){ //transforma o valor do scroll pra Int

Const ScrollInt = (Window.scrollX/valorDoScroll)*100

//se tudo estiver nos conformes você terá um valor de 0 a 100 relacionado ao tamanho da Window…

Aí tu aplica no elemento

Element.style.fontSize =${ScrollInt}px

//pronto! Com isso você vai disparar assim que scrollar…

Se quiser fazer isso em outros momentos específicos é só usar condicionais!

})

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 9/08/2023 às 14:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .