Last active
July 31, 2017 21:44
-
-
Save educabrera/a71f4b6d703ee83837b979dbd0afcf1d to your computer and use it in GitHub Desktop.
start function in especific div
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head><title>animated numbers</title></head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <p> s</p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> s2</p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> s3</p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> </p> | |
| <p> s4</p> | |
| <p> </p> | |
| <p> </p> | |
| <section id="d-claustro"> | |
| <h1 class="title">Claustro</h1> | |
| <div class="cont-claustro"><h3><span class="number1">230</span></h3>Lorem ipsum </div> | |
| <div class="cont-claustro"><h3><span class="number2">100</span></h3>Lorem ipsum </div> | |
| <div class="cont-claustro"><h3><span class="number3">30</span></h3>Lorem ipsum </div> | |
| <div class="cont-claustro"><h3><span class="number4">120</span></h3>Lorem ipsum </div> | |
| <div class="cont-claustro"><h3><span class="number5">50</span></h3>Lorem ipsum </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var oTop = $('#d-claustro').offset().top - window.innerHeight; | |
| $(window).scroll(function(){ | |
| var pTop = $('body').scrollTop(); | |
| console.log( pTop + oTop ); | |
| if( pTop <= oTop ){ | |
| comenzar(); | |
| } | |
| }); | |
| }); | |
| function comenzar(){ | |
| //Add your code here | |
| $.fn.anumb = function( options ) { | |
| var settings = $.extend({ | |
| start: 0, | |
| end: 100, | |
| easing: 'swing', | |
| duration: 500, | |
| complete: '' | |
| }, options ); | |
| var thisElement = $(this); | |
| $({count: settings.start}).animate({count: settings.end}, { | |
| duration: settings.duration, | |
| easing: settings.easing, | |
| step: function() { | |
| var mathCount = Math.ceil(this.count); | |
| thisElement.text(mathCount); | |
| }, | |
| complete: settings.complete | |
| }); | |
| }; | |
| $('.number1').anumb({end: 14,duration: 2899}); | |
| $('.number2').anumb({end: 350,duration: 3300}); | |
| $('.number3').anumb({end: 450,duration: 4000}); | |
| $('.number4').anumb({end: 7,duration: 2500}); | |
| $('.number5').anumb({end: 10,duration: 2900}); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment