Discussion :

[imas44]

Hello,

Pour un projet, je dois r�aliser ce genre de fonctionnement au niveau du scroll:
http://www.because.tv/

Regardez au niveau du scroll les 3 colonnes de contenu, les colonnes ne scrollent pas � la meme vitesse.
c'est en fonction de la hauteur de chaque colonne. et � la fin des scrolls, chaque colonne est align� en bas.
Et c'est �a ma difficult�. je ne sais pas comment faire, je suis pas assez expert en JS ou jquery.
J'ai bien essay� avec translate3D (..,...,...) mais rien � faire je bloque.

Quelqu'un saurait relever ce d�fi?

Merci d'avance.

[Showie]

Dans le fichier script.js (http://www.because.tv/wp-content/the...ripts.js?v=1.1)

on trouve � la ligne 7029 ce bout de code qui devrait t aider.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
function() {
            if (this._ready) {
                var t = .2 * (this._scroll - this._scroll_);
                t > .005 || -.005 > t ? this._scroll_ += t : this._scroll_ = this._scroll;
                var e = -this._scroll_,
                    i = e / (this._domHeight - this.wHeight);
                a.transform(this._$subDom[0], "translate3d(0," + this._scroll_ + "px, 0)"), a.transform(this._$scrollbar[0], "translate3d(0," + i * (this.wHeight - this._scrollbarHeight) + "px, 0)")
            }
        }

[imas44]

oui j'ai vu, mais j'ai l'impression qu'il y a beaucoup de d�pendances, comme
/Applications/MAMP/htdocs/anonymous/Because_website/src/js/lib/anonymous/display/AdaptiveScroll.js

Comment les r�cup�rer?

[imas44]

Personne ne sait comment relever ce d�fi?
J'arrive � r�cup�rer la hauteur des 3 colonnes, mais quoi utiliser pour dire � la colonne la moins haute, de d�filer moins vite que les 2 autres, au scroll?

[melka one]

jour

prenons l'exemple sur un scroll de250px et tu scroll de 25 px si tu divise 25/250 sa donne 0.1 cette valeur correspond a un scroll de 0.1 par rapport a 1 correspondant a un scroll totale 250/250=1

donc il suffit de multiplier la hauteur de chaque elements par cette valeur pour connaitre leurs position c'est tout

[imas44]

oula, j'ai du mal � te suivre, d�sol�

Voila un d�but de code que j'ai fais :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
(function ($) {
    $(document).ready(function() {
 
    var heightcol1 = $("#scroll1").innerHeight();
    var heightcol2 = $("#scroll2").innerHeight();
    var heightcol3 = $("#scroll3").innerHeight();
 
 
    // calcul du nbr de colonnes
    var parallaxElements = $('.col'),
        parallaxQuantity = parallaxElements.length;
 
    // création de la fonction scroll
    $(window).on('scroll', function () {
 
        window.requestAnimationFrame(function () {
 
            for (var i = 0; i < parallaxQuantity; i++) {
                var scrolled = $(window).scrollTop();
 
                $('.large-translate').css({
                    'transform': 'translate3d(0,' + scrolled * -0.00003 + 'px, 0)'
                });                
                $('.medium-translate').css({
                    'transform': 'translate3d(0,' + scrolled * -0.2 + 'px, 0)'
                });
                $('.small-translate').css({
                    'transform': 'translate3d(0,' + scrolled * -0.6 + 'px, 0)'
                });
            }
 
        });
 
    });
 
 
    });
}(jQuery));

.large-translate
.medium-translate et
.small-translate
�tant des classes repr�sentant les 3 colonnes.

et le html :

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<div class="row parallax" id="parallax">
         <div id="scroll1" class="col-xs-4 col large-translate">
 
         </div>
         <div id="scroll2" class="col-xs-4 col medium-translate">
 
         </div>
         <div id="scroll3" class="col-xs-4 col small-translate">
 
         </div>
</div>

Est ce que je suis bien parti?

[imas44]

Bon, j'ai r�ussi � faire scroller les 3 colonnes avec une vitesse diff�rente.
Mais je n'arrive pas � faire arriver les 3 colonnes en bas du container en m�me temps.
On a un gros blanc avant le debut du prochain contenu.

Voila ma page de test :
http://sami.mechti.free.fr/DG/Animat...crolltest.html


Voila mon code JS :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
(function ($) {
    $(document).ready(function() {
 
    // hauteur de chaque colonne
    var heightcol1 = $("#scroll1").innerHeight();
    var heightcol2 = $("#scroll2").innerHeight();
    var heightcol3 = $("#scroll3").innerHeight();
 
    // la colonne la plus haute
    var heightmax = 0;
    $('#scroll1, #scroll2, #scroll3').each(function(){
        heightmax = Math.max(heightcol1, heightcol2, heightcol3);
    });
 
    //Calcul du ratio de chaque colonne
    var largeColRatio = heightcol1 / heightmax,
        mediumColRatio = heightcol2 / heightmax,
        smallColRatio = heightcol3 / heightmax;
 
        var currentScroll1 = heightcol1 / heightmax;
        var currentScroll2 = heightcol2 / heightmax;
        var currentScroll3 = heightcol3 / heightmax;
 
    // calcul du nbr de colonnes
    var parallaxElements = $('.col'),
        parallaxQuantity = parallaxElements.length;
 
 
     // création de la fonction scroll
        $(document).scroll(function() {
            var _$contentWrapper = $(".parallax");
            var _$scrollContainer = $("#main");
            var _contentTop = _$contentWrapper.offset().top;
            var _bottom = _$scrollContainer.height();
 
            var currentScrollRatio = -(_contentTop - 100) / (_bottom - _contentTop);
 
            var t = (heightmax - heightcol1) * currentScrollRatio;
            var e = (heightmax - heightcol2) * currentScrollRatio;
            var p = (heightmax - heightcol1) * currentScrollRatio;
 
            var $w = $(this),
                scroll_top = $w.scrollTop(),
                scroll_percent = Math.round((scroll_top) / heightmax * 100);
 
            // Pour chaque colonne
            for (var i = 0; i < parallaxQuantity; i++) {
                if ($(heightcol1 < heightmax)) {
                    $(".large-translate").css("transform", "translate3d(0," + -(scroll_percent) + "px, 0");
                }
 
                if ($(heightcol2 < heightmax)) {
                    $(".medium-translate").css("transform", "translate3d(0," + -(e*scroll_percent) + "px, 0");
                    $(".small-translate").css("transform", "translate3d(0," + -(p*scroll_percent) + "px, 0");
                }
 
            }
});
});
}(jQuery));

un expert js peut m'aider?