Vitesses de scroll différentes entre colonnes

Version imprimable

08/03/2019, 15h26
imas44

Vitesses de scroll différentes entre colonnes

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.

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:

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)")
            }
        }

08/03/2019, 16h05
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?
11/03/2019, 16h00
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?
11/03/2019, 16h51
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

oula, j'ai du mal à te suivre, désolé ;)

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

Code:

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:

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?
;)

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:

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? :P