Salve, sto cercando in tutti i modi di far partire un'animazione/script di JavaScript tipo questa https://codepen.io/anon/pen/QMyNZV al raggiungimento del div che lo contiene ma dopo svariati tentativi non sono riuscito ad ottenere l'effetto voluto; quindi chiedo il vostro aiuto.
Grazie in anticipo a tutti quelli che mi risponderanno
Ciao e benvenuto, il codice l'hai scritto tu? Lo sai che gli ID devono essere univoci? Di che animazione parli non l'ho vista nell'esempio
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
ciao, grazie per la risposta; mi spiego meglio vorrei realizzare una cosa cosa come questa https://bootstrapthemes.co/demo/html...ml5-template/? (nella parte delle skills del gruppo) quindi una animazione che fa partire da 0 il "contatore" dei progetti completati e arrivi ad una tot cifra; il problema è che l'animazione parte non appena ricarico la pagina e non come nel tema di esempio quando arrivo al divOriginariamente inviata da cavicchiandrea
spero di essermi spiegato meglio
Sarà colpa mia, ma io l'animazione non la trovo nel link. Comunque bootstrap è uno strumento complesso è l'utilizzo richiede una buona conoscenza di js e jQuery
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Scusami sono un novizio sia per bootstrap che per js e jQuery molto probabilmente si tratta di uno script e non di una animazione
Per far partire uno script al "raggiungimento del div", cioè quando il div diventa visibile, hai bisogno di conoscere tre cose: l'altezza della finestra, la posizione del div (offsetTop) e la quantità di scroll della finestra.
Una possibile implementazione potrebbe essere la seguente:
codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> html,body{ margin:0; padding:0; } #pre{ background:#eee; height:1500px; padding:33px; } #target{ background:#666; color:#fff; height:600px; } #scroll_amount{ position:fixed; top:15px; right:15px; background:rgba(0,0,0,0.5); color:#fff; width:250px; padding:40px; } #scroll_amount:before{ content:'Scroll pagina in pixel'; font-weight:bold; display:block; margin-bottom:5px; } </style> <script type="text/javascript"> var target_top, screen_height; $(function(){ target_top=$('#target').offset().top; screen_height=$(window).height(); $('#pre').append('<p>Posizione di #target: '+target_top+'px</p>'); $('#pre').append('<p>Altezza finestra: '+screen_height+'px</p>'); $('#pre').append('<p>Quantità di scroll per far apparire #target: '+Number(target_top-screen_height)+'px</p>'); }); $(window).scroll(function(){ var scroll_amount=$(window).scrollTop(); $('#scroll_amount').text(scroll_amount+'px'); if(scroll_amount>=(target_top-screen_height)){ //qui fai partire lo script $('#scroll_amount').append('<p><strong>#target è visibile!</strong></p>'); }else{ $('#scroll_amount p').remove(); } }); </script> </head> <body> <div id="pre"><h1>Above the fold</h1></div> <div id="target"><h3>Below the fold</h3></div> <div id="scroll_amount">0px</div> <div id="target_offset"></div> </body> </html>
Ciao; innanzitutto grazie mille per la risposta, la tua spiegazione è stata chiara e semplice da capire, sono riuscito ad "implementare" il tuo script con il mio ma ho un problema, quando arriva al numero designato il contatore torna indietro, ho provato a togliere l' else ma niente rimane sempre cosi.
Tu hai qualche idea sul perchè faccia questo?
ti allego il codice sempre da sito https://codepen.io/Tarrant00/pen/Yxgxzq
grazie ancora per la risposta
Ho usato la variabile seen per eseguire l'animazione una sola volta.codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> html,body{ margin:0; padding:0; } #pre{ background:#eee; height:1500px; padding:33px; } #target{ background:#666; color:#fff; height:600px; } #scroll_amount{ position:fixed; top:15px; right:15px; background:rgba(0,0,0,0.5); color:#fff; width:250px; padding:40px; } #scroll_amount:before{ content:'Scroll pagina in pixel'; font-weight:bold; display:block; margin-bottom:5px; } #shiva { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; float:left; margin:5px; } .count { line-height: 100px; color:white; margin-left:30px; font-size:25px; } </style> <script type="text/javascript"> var target_top, screen_height, seen; $(function(){ seen=false; target_top=$('#target').offset().top; screen_height=$(window).height(); $('#pre').append('<p>Posizione di #target: '+target_top+'px</p>'); $('#pre').append('<p>Altezza finestra: '+screen_height+'px</p>'); $('#pre').append('<p>Quantità di scroll per far apparire #target: '+Number(target_top-screen_height)+'px</p>'); }); $(window).scroll(function(){ var scroll_amount=$(window).scrollTop(); $('#scroll_amount').text(scroll_amount+'px'); if(scroll_amount>=(target_top-screen_height)){ if(!seen){ increment(); seen=true; } $('#scroll_amount').append('<p><strong>#target è visibile!</strong></p>'); }else{ $('#scroll_amount p').remove(); } }); function increment(){ $('.count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); } </script> </head> <body> <div id="pre"><h1>Above the fold</h1></div> <div id="target"><div id="shiva"><span class="count">1000</span></div></div> <div id="scroll_amount">0px</div> </body> </html>
Info, su aipad non funziona
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
L'hai messa online?
Permessi di invio
Rispondi quotando