Scrolling Increment

[maxisix]

Scrolling Increment

[tlartaud]

Hi!

Nice site!

try this:
1- add some id values on your divs:

and on your background bar:

var maxHeight = 1000*283/943;
var percent = 0;
$(window).scroll(function() {
percent = $('#bar1').height() / maxHeight * 1000;
$('#title_piece1').val(percent);
});

Did not test but it may works.
U can also use a .each() instead of writing 4 scroll functions for each bar.

Cheers

[tlartaud]

The parser deleted html code. sorry.

Add some id values on your divs, like #bar1, #bar2, etc .... on each bar div.
Add some id values on your divs, like #tile_piece1, etc ... on each number div.

[maxisix]

it's not working :/ http://maximebeaudoin.com/demo_2/ is it like what u said ? Or juste add on the plug-in ?

[tlartaud]

Lol, did even try to understand what i tried to explain ? :p
Ok, im french, and this is hard for me to explain efficientlty,

But in the example above, the percent is calculated depending one the #bar1.height() which is moving on your site, if you scroll.

In the example here, your #bar .height() does not change when you scroll... so how the script could work? :p

Ill explian some few things:
var maxHeight = 1000*283/943;
This is math to know the height pixels values for a 1000% bar.

So if we know the max possible height value of a bar, for 1000%, we can calculate the value for 53% for example, and vice-versa.
I just calculated this values depending on your sites values and choices. This value will not be the same on the last example u showed me.

Just make a table:
Max bar height : 300 --------------- Max bar percent : 1000
Instant t bar height : 223 ---------- bar percent value : ?

This is a simple math ... this i what u learned when u were 12 years old dude.
? = 1000 * 223 / 300

So when u scroll, if the bar height is 223 at this instant, the result percent will be 1000 * 223 / 300

Just simple as that.

If not working, try .text() function instead of .val() .... i don't remember which one is better to change the text value of a div

[maxisix]

je suis francais aussi :P

[tlartaud]

et bien c'est un simple produit en croix l'ami ;) La base des bases des maths ...

Quand tu scroll, l hauteur des barres des change ? ok ? donc à chaque fois que tu scroll, tu récupères la hauteur de cette barre, et tu fais un produit en croix pour trouver le pourcentage associé, il n'y à aucune raison que ça ne marche pas ;)

c'est vraiment un simple produit en croix .. rien de plus ...
Après, il te suffit d'injecter la valeur résultante dans la div appropriée ;)

[maxisix]

Parfait, je vais teste ca avec superscrollorama tout de suite ! :) c'est super gentil !!

[tlartaud]

you're welcome :)

[maxisix]

Je ne suis pas certain de saisir ton Max bar height , Max bar percent et instant bar height ? le bar tu parles de la scroll bar ? Parceque tout ca me semble simple mais pourquoi le 1000% aussi ?

[maxisix]

maximebeaudoin.com/johnpolacek-superscrollorama-8414465_2

[tlartaud]

Bon je reprends une dernière fois.

Sur ton site, quand on scroll, tes barres grandissent toutes seules. Tu as fait ça avec superscrollorama je suppose. Soit.
Vu que superscrollorama modifie la hauteur des barres au fur et à mesure que l'on scroll, on peut très bien ajouter une fonction, qui, chaque fois que l'on va scroller un peu, va récupérer la hauteur ACTUELLE de chaque barre.
A partir de la hauteur de cette barre, on va calculer le pourcentage associé.

Pour faire le calcul, on a besoin de savoir combien une barre fera de pixels pour un pourcentage à 1000%.
Dans ton exemple, sur ton site, la barre pour 1000% fait environ 300 pixels. Là encore, j'ai calculé la maxHeight en faisant un produit en croix. Je me suis servi de ta première barre pour connaitre cette valeur.

En effet, ta première barre, une fois dépliée, fait 287px de haut pour 943%

Admettons donc que pendant le scroll, pendant que la barre est en train de changer de hauteur, la hauteur de la barre fait à un certain moment, par exemple 90px (je donne une valeur au hasard, mais chaque fois que tu scroll, on va en récupérer une)
Et bien si la barre fait 90px, on peut très bien récupérer le pourcentage associé, grâce au produit en croix, soit donc:
90 * 943 / 287 = 296%
Pour une hauteur de barre de 90px, le pourcentage associé sera 296%

Si j'ai calculé la valeur maxHeight, c'était pour avoir une valeur de référence, pour pouvoir faire le produit en croix.
Mais ta valeur de référence peut très bien être la valeur finale de la barre en question, comme expliqué ci-dessus.
Prendre 287px de haut pour 943% comme valeur de référence équivaut à prendre 1000 * 943 / 287 = 304px de haut pour 1000%

Une fois que tu as de quoi faire un produit en croix, il te suffit de récupérer la haueteur de la barre quand tu scroll, faire ton produit en croix, et injecter la nouvelle valeur en % dans la div appropriée.

Faut pas que tu recopie mon code, faut que tu comprenne ce que je t'explique, et que tu adaptes ;)

[tlartaud]

J'ai du mal à croire que tu ai fais ce site toi-même. Sur les autres pages, il y'à des pourcentages qui changent. En quoi le principe est différent ?
Et faire un site comme ça sans savoir faire un produit en croix, j'ai encore plus de mal à le croire.

Bref, good luck to you