CSS Bild effekt scroll

[Branku]

-> Minehub.de ganz unten (Zum minecraft bild das erste bild) wenn man langsam nach oben/unten scrollt bewegt sich das bild auch wenig wie füge ich das ein also wie heißt dieses effekt? Habe sonst leider nichts gefunden bei google und bin anfänger schon mal danke mir wurde html.de empfohlen mal schauen ob es sich gelohnt hat :)

 

[Sailor]

Paralax Effekt!
Mit HTML und CSS alleine wirst du da nichts machen können... da muss man mit JavaScript nachhelfen.

 

[Aaron3219]

Ich hatte da mal vor einiger Zeit nach gesucht, es gibt aber nur wenig (gute) Tutorials.
Das Prinzip dahinter ist, dass du per Javascript einen scroll-event-listener setzt, der beim scrollen, deine ausgewählten Elemente per offset verschieden versetzt.

Mal ein Beispielscript:

(function ($, window) {
    var $window = $(window);
    //Hier sind dann deine Elemente, die du auswählst
    var $parallaxContainer = $('.parallax-container');
    var $parallaxText = $('.parallax-text');
    var $parallax1 = $('.parallax-1');
    var $swiperContainer = $('.demop .content-slider2 li, #demop .active');
    var $sliderButtons = $("#demop .lSAction a");
    var mode = 'normal';
    var normal = function () {
        var wScroll = $window.scrollTop();
        if (wScroll <= $parallaxContainer.height()) {
            $parallaxText.css({
                'transform': 'translate(0px, ' + wScroll / 90 + 'vH)'
            });
            $parallax1.css({
                'transform': 'translate(0px, ' + wScroll / 15 + 'vH)'
            });
            $swiperContainer.css({
                'transform': 'translate(0px, ' + wScroll / 30 + 'vH)'
            });
            $sliderButtons.css({
                'transform': 'translate(0px, ' + wScroll / 20 + 'vH)'
            });
        }
    };
    
    $window.scroll(function () {
        return normal();
    });
    $window.scroll();
})(jQuery, window);

 

[Branku]

-> Minehub.de ganz unten (Zum minecraft bild das erste bild) wenn man langsam nach oben/unten scrollt bewegt sich das bild auch wenig wie füge ich das ein also wie heißt dieses effekt? Habe sonst leider nichts gefunden bei google und bin anfänger schon mal danke mir wurde html.de empfohlen mal schauen ob es sich gelohnt hat :)

Paralax Effekt!
Mit HTML und CSS alleine wirst du da nichts machen können... da muss man mi

Ich hatte da mal vor einiger Zeit nach gesucht, es gibt aber nur wenig (gute) Tutorials.
Das Prinzip dahinter ist, dass du per Javascript einen scroll-event-listener setzt, der beim scrollen, deine ausgewählten Elemente per offset verschieden versetzt.

Mal ein Beispielscript:

(function ($, window) {
    var $window = $(window);
    //Hier sind dann deine Elemente, die du auswählst
    var $parallaxContainer = $('.parallax-container');
    var $parallaxText = $('.parallax-text');
    var $parallax1 = $('.parallax-1');
    var $swiperContainer = $('.demop .content-slider2 li, #demop .active');
    var $sliderButtons = $("#demop .lSAction a");
    var mode = 'normal';
    var normal = function () {
        var wScroll = $window.scrollTop();
        if (wScroll <= $parallaxContainer.height()) {
            $parallaxText.css({
                'transform': 'translate(0px, ' + wScroll / 90 + 'vH)'
            });
            $parallax1.css({
                'transform': 'translate(0px, ' + wScroll / 15 + 'vH)'
            });
            $swiperContainer.css({
                'transform': 'translate(0px, ' + wScroll / 30 + 'vH)'
            });
            $sliderButtons.css({
                'transform': 'translate(0px, ' + wScroll / 20 + 'vH)'
            });
        }
    };
   
    $window.scroll(function () {
        return normal();
    });
    $window.scroll();
})(jQuery, window);

t JavaScript nachhelfen.

Vielen dank :) Ich habe gestern angefangen zu lernen mit javascript :) Hier gibt es echt viel hilfe

 

[Branku]

Vielen dank für deine Hilfe ich habe gestern angefangen mit Javascript zu lernen hier gibt es viel hilfe :))