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?