CSS: reine CSS-Scroll-Animation

Question 1

Ich habe nach einer Möglichkeit gesucht, nach unten zu scrollen, wenn ich auf eine Schaltfläche klicke, die sich oben auf einer Seite befindet, und zwar nur mit CSS3.

Also habe ich dieses Tutorial gefunden: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Aber es ist ein bisschen zu fortgeschritten für meine Bedürfnisse, da ich nur möchte, dass der Browser mit einem Klick auf eine Schaltfläche oben auf der Seite nach unten scrollt, also habe ich mich gefragt: Ist es möglich, diese CSS-Bildläufe nur ohne die Eingabeschaltflächen durchzuführen? mit einem Ankertag?

HTML sieht so aus: <a href="#" class="button">Learn more</a>

Ich habe bereits einige CSS, die ich beim Klicken auf die Schaltfläche auslösen muss:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

Question 2

Sie können dies mit Ankertags mithilfe des :targetPseudo-Selektors css3 tun. Dieser Selektor wird ausgelöst, wenn das Element mit derselben ID wie der Hash der aktuellen URL eine Übereinstimmung erhält. Beispiel

Wenn wir dies wissen, können wir diese Technik mit der Verwendung von Proximity-Selektoren wie "+" und "~" kombinieren, um jedes andere Element über das Zielelement auszuwählen, das mit dem Hash der aktuellen URL übereinstimmt. Ein Beispiel dafür wäre so etwas wie das, was Sie fragen .

Question 3

Verwenden Sie Ankerlinks und die scroll-behaviorEigenschaft ( MDN-Referenz ) für den Bildlaufcontainer:

scroll-behavior: smooth;

Browser - Unterstützung : Firefox 36+, 61+ Chrome (daher auch Edge - 79+) und Opera 48+.

Intenet Explorer, Nicht-Chrom Rand und (bisher) Safari nicht unterstützt scroll-behaviorund einfach „Sprung“ auf das Link - Ziel.

Anwendungsbeispiel:

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Hier ist eine Geige .

Und hier ist auch eine Geige mit horizontalem und vertikalem Scrollen.

Question 4

Sie können mein Skript von CodePen verwenden, indem Sie einfach den gesamten Inhalt in einen .levit-Container-DIV einschließen.

~function  () {
    function Smooth () {
        this.$container = document.querySelector('.levit-container');
        this.$placeholder = document.createElement('div');
    }

    Smooth.prototype.init = function () {
        var instance = this;

        setContainer.call(instance);
        setPlaceholder.call(instance);
        bindEvents.call(instance);
    }

    function bindEvents () {
        window.addEventListener('scroll', handleScroll.bind(this), false);
    }

    function setContainer () {
        var style = this.$container.style;

        style.position = 'fixed';
        style.width = '100%';
        style.top = '0';
        style.left = '0';
        style.transition = '0.5s ease-out';
    }

    function setPlaceholder () {
        var instance = this,
                $container = instance.$container,
                $placeholder = instance.$placeholder;

        $placeholder.setAttribute('class', 'levit-placeholder');
        $placeholder.style.height = $container.offsetHeight + 'px';
        document.body.insertBefore($placeholder, $container);
    }

    function handleScroll () {
        this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
    }

    var smooth = new Smooth();
    smooth.init();
}();

https://codepen.io/acauamontiel/pen/zxxebb?editors=0010

Question 5

Und für Webkit-fähige Browser habe ich gute Ergebnisse erzielt mit:

.myElement {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
}

Dadurch verhält sich das Scrollen viel mehr wie das Standardverhalten des Browsers - zumindest funktioniert es gut auf dem iPhone, auf dem wir getestet haben!

Hoffentlich hilft das,

Ed

Answer 1

Ich habe nach einer Möglichkeit gesucht, nach unten zu scrollen, wenn ich auf eine Schaltfläche klicke, die sich oben auf einer Seite befindet, und zwar nur mit CSS3.

Also habe ich dieses Tutorial gefunden: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Aber es ist ein bisschen zu fortgeschritten für meine Bedürfnisse, da ich nur möchte, dass der Browser mit einem Klick auf eine Schaltfläche oben auf der Seite nach unten scrollt, also habe ich mich gefragt: Ist es möglich, diese CSS-Bildläufe nur ohne die Eingabeschaltflächen durchzuführen? mit einem Ankertag?

HTML sieht so aus: <a href="#" class="button">Learn more</a>

Ich habe bereits einige CSS, die ich beim Klicken auf die Schaltfläche auslösen muss:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

Answer 2

7

Ein Hauptnachteil dieses CSS-basierten Bildlaufs besteht darin, dass der Benutzer nicht manuell nach oben scrollen kann , nachdem der CSS-basierte Bildlauf zu einem ausgewählten Element gescrollt hat. Scheint, als würde ein Benutzer dies angesichts des animierten Seitenübergangs intuitiv tun wollen! Für mich ist es zurück zu jQuerys Animation ({scrollTop: ...}). Oder habe ich etwas verpasst?

Vicmortelmans

Answer 3

1

Mit dieser Lösung können Sie die Unfähigkeit beheben, zurückzukehren. Verwenden Sie einfach dieses HTML-Markup: <div parallax="moveDown">...</div> Und es bewegt sich nach unten, wenn Sie nach unten und nach oben scrollen, während Sie nach oben scrollen ...

elixon

Answer 4

89

Sie können dies mit Ankertags mithilfe des :targetPseudo-Selektors css3 tun. Dieser Selektor wird ausgelöst, wenn das Element mit derselben ID wie der Hash der aktuellen URL eine Übereinstimmung erhält. Beispiel

Wenn wir dies wissen, können wir diese Technik mit der Verwendung von Proximity-Selektoren wie "+" und "~" kombinieren, um jedes andere Element über das Zielelement auszuwählen, das mit dem Hash der aktuellen URL übereinstimmt. Ein Beispiel dafür wäre so etwas wie das, was Sie fragen .

Jesus Bejarano
quelle

5

Sie können die Zieltechnik verwenden, um auf jedes Element im Layout zu zielen, auch auf die Seite selbst, die das Tag '<body>' auswählt :).

Jesus Bejarano

2

sagen wir, warum brauchen wir das backface-visibilityin der späteren demo? Wir

Eliran Malka

17

Für alle anderen, die das für diese Animation erforderliche Minimum sehen möchten, habe ich Formatierungen usw. vorgenommen, um ein bisschen einfacher herauszufinden, was jsfiddle.net/YYPKM/347

Louis Maddox

3

Wie ich annehme, ist es hier nicht möglich, flexibel zu sein, oder? Die Transformation braucht einen echten Wert und kann nicht auf ein anderes Element ausgerichtet werden, oder?

Keenora Fluffball

2

@LouisMaddox Durch Hinzufügen header { position: fixed; left: 0; top: 0; z-index: 10; }des CSS Ihrer Geige wird sichergestellt, dass die Links immer anklickbar sind, da durch Klicken auf Nummer 2 die Nummer 1 im Moment nicht mehr angeklickt werden kann.

Gellie Ann

Answer 5

5

Sie können die Zieltechnik verwenden, um auf jedes Element im Layout zu zielen, auch auf die Seite selbst, die das Tag '<body>' auswählt :).

Jesus Bejarano

Answer 6

2

sagen wir, warum brauchen wir das backface-visibilityin der späteren demo? Wir

Eliran Malka

Answer 7

17

Für alle anderen, die das für diese Animation erforderliche Minimum sehen möchten, habe ich Formatierungen usw. vorgenommen, um ein bisschen einfacher herauszufinden, was jsfiddle.net/YYPKM/347

Louis Maddox

Answer 8

3

Wie ich annehme, ist es hier nicht möglich, flexibel zu sein, oder? Die Transformation braucht einen echten Wert und kann nicht auf ein anderes Element ausgerichtet werden, oder?

Keenora Fluffball

Answer 9

2

@LouisMaddox Durch Hinzufügen header { position: fixed; left: 0; top: 0; z-index: 10; }des CSS Ihrer Geige wird sichergestellt, dass die Links immer anklickbar sind, da durch Klicken auf Nummer 2 die Nummer 1 im Moment nicht mehr angeklickt werden kann.

Gellie Ann

Answer 10

116

Verwenden Sie Ankerlinks und die scroll-behaviorEigenschaft ( MDN-Referenz ) für den Bildlaufcontainer:

scroll-behavior: smooth;

Browser - Unterstützung : Firefox 36+, 61+ Chrome (daher auch Edge - 79+) und Opera 48+.

Intenet Explorer, Nicht-Chrom Rand und (bisher) Safari nicht unterstützt scroll-behaviorund einfach „Sprung“ auf das Link - Ziel.

Anwendungsbeispiel:

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Hier ist eine Geige .

Und hier ist auch eine Geige mit horizontalem und vertikalem Scrollen.

Felix Edelmann
quelle

9

Warum abstimmen? Könnten Sie bitte erklären, wie ich meine Antwort verbessern kann oder warum meine Lösung nicht gut ist?

Felix Edelmann

1

Ich habe eigentlich nie über horizontales Scrollen nachgedacht. Aber wie Sie in dieser Geige sehen können: jsfiddle.net/1Lfybv56/2 funktioniert es auch - auch mit horizontalem und vertikalem Scrollen. Der einzige Unterschied, den ich entdeckt habe: Beim horizontalen Scrollen funktionieren Ankerlinks zu name = "..." -Tags nicht, Sie müssen id = "..." verwenden.

Felix Edelmann

3

Sie werden abgelehnt, weil unter caniuse.com/#search=scroll-behavior angegeben ist , dass es nur in Firefox funktioniert. Daher ist es für Websites auf Produktionsebene im Wesentlichen wertlos, da es nur in einem Browser funktioniert, der nicht einmal am häufigsten verwendet wird. AUSSER, der Verkehr auf Ihrer Website ist meistens Firefox.

MeanMatt

2

Jesu Lösung ist wirklich nett, aber ich füge Felix 'Antwort hinzu, da sie in Chrome v62, Firefox v57 funktioniert und in Edge in Betracht gezogen wird (noch keine Unterstützung in Safari), und wir möchten Druck auf die Browserhersteller ausüben. Das ist es, was ich meinen Schülern als einfaches Beispiel für diese Browser gebe, auch mit leicht fließenden "Top" -Links : daveeveritt.github.io/css-smooth-scroll Das Repo ist hier mit weiteren Informationen und Links in der Readme: github .com / DaveEveritt / CSS-Smooth-Scroll

Dave Everitt

1

Es funktioniert in allen außer extrem archaischen Versionen von Chrome und Firefox sowie im Samsung-Browser. Auf allen meinen Websites machen die nicht unterstützten Versionen dieser Browser einen vernachlässigbaren Teil des Marktanteils aus, als ich diesen Kommentar schreibe. Das Problem hierbei ist hauptsächlich die mangelnde Unterstützung in Safari und zu einem gewissen Grad in IE und Edge. Angesichts der Eleganz und der Tatsache, dass dies ein nicht wesentliches Merkmal ist, kann diese Antwort viele Menschen ansprechen (sie spricht mich aus diesem Grund an).

cazort

Answer 11

9

Warum abstimmen? Könnten Sie bitte erklären, wie ich meine Antwort verbessern kann oder warum meine Lösung nicht gut ist?

Felix Edelmann

Answer 12

1

Ich habe eigentlich nie über horizontales Scrollen nachgedacht. Aber wie Sie in dieser Geige sehen können: jsfiddle.net/1Lfybv56/2 funktioniert es auch - auch mit horizontalem und vertikalem Scrollen. Der einzige Unterschied, den ich entdeckt habe: Beim horizontalen Scrollen funktionieren Ankerlinks zu name = "..." -Tags nicht, Sie müssen id = "..." verwenden.

Felix Edelmann

Answer 13

3

Sie werden abgelehnt, weil unter caniuse.com/#search=scroll-behavior angegeben ist , dass es nur in Firefox funktioniert. Daher ist es für Websites auf Produktionsebene im Wesentlichen wertlos, da es nur in einem Browser funktioniert, der nicht einmal am häufigsten verwendet wird. AUSSER, der Verkehr auf Ihrer Website ist meistens Firefox.

MeanMatt

Answer 14

2

Jesu Lösung ist wirklich nett, aber ich füge Felix 'Antwort hinzu, da sie in Chrome v62, Firefox v57 funktioniert und in Edge in Betracht gezogen wird (noch keine Unterstützung in Safari), und wir möchten Druck auf die Browserhersteller ausüben. Das ist es, was ich meinen Schülern als einfaches Beispiel für diese Browser gebe, auch mit leicht fließenden "Top" -Links : daveeveritt.github.io/css-smooth-scroll Das Repo ist hier mit weiteren Informationen und Links in der Readme: github .com / DaveEveritt / CSS-Smooth-Scroll

Dave Everitt

Answer 15

1

Es funktioniert in allen außer extrem archaischen Versionen von Chrome und Firefox sowie im Samsung-Browser. Auf allen meinen Websites machen die nicht unterstützten Versionen dieser Browser einen vernachlässigbaren Teil des Marktanteils aus, als ich diesen Kommentar schreibe. Das Problem hierbei ist hauptsächlich die mangelnde Unterstützung in Safari und zu einem gewissen Grad in IE und Edge. Angesichts der Eleganz und der Tatsache, dass dies ein nicht wesentliches Merkmal ist, kann diese Antwort viele Menschen ansprechen (sie spricht mich aus diesem Grund an).

cazort

Answer 16

Sie können mein Skript von CodePen verwenden, indem Sie einfach den gesamten Inhalt in einen .levit-Container-DIV einschließen.

~function  () {
    function Smooth () {
        this.$container = document.querySelector('.levit-container');
        this.$placeholder = document.createElement('div');
    }

    Smooth.prototype.init = function () {
        var instance = this;

        setContainer.call(instance);
        setPlaceholder.call(instance);
        bindEvents.call(instance);
    }

    function bindEvents () {
        window.addEventListener('scroll', handleScroll.bind(this), false);
    }

    function setContainer () {
        var style = this.$container.style;

        style.position = 'fixed';
        style.width = '100%';
        style.top = '0';
        style.left = '0';
        style.transition = '0.5s ease-out';
    }

    function setPlaceholder () {
        var instance = this,
                $container = instance.$container,
                $placeholder = instance.$placeholder;

        $placeholder.setAttribute('class', 'levit-placeholder');
        $placeholder.style.height = $container.offsetHeight + 'px';
        document.body.insertBefore($placeholder, $container);
    }

    function handleScroll () {
        this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
    }

    var smooth = new Smooth();
    smooth.init();
}();

https://codepen.io/acauamontiel/pen/zxxebb?editors=0010

Answer 17

2

-1; Die Frage wurde nach einer Nur-CSS-Lösung gestellt, aber Ihre Antwort lautet ausschließlich JavaScript.

Mark Amery

Answer 18

-3

Und für Webkit-fähige Browser habe ich gute Ergebnisse erzielt mit:

.myElement {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
}

Dadurch verhält sich das Scrollen viel mehr wie das Standardverhalten des Browsers - zumindest funktioniert es gut auf dem iPhone, auf dem wir getestet haben!

Hoffentlich hilft das,

Ed

Ed Hasting-Evans
quelle

3

Ich habe die MDN-Spezifikation für die Eigenschaft -webkit-overflow-scrolling gelesen und denke, sie ändert nur das Verhalten, wenn Sie eine Bildlaufgeste ausführen. Der Fragesteller dachte über das automatische Scrollen nach (Sie tippen also nur auf eine Schaltfläche / einen Link und müssen nicht nach unten wischen oder die Bildlaufleisten verschieben) ;-). Übrigens overflow-x: autoist es in den meisten Fällen besser, weil es nur die Bildlaufleisten anzeigt, wenn es wirklich etwas zu scrollen gibt ( scrollwürde immer die Balken anzeigen).

Felix Edelmann

Answer 19

3

Ich habe die MDN-Spezifikation für die Eigenschaft -webkit-overflow-scrolling gelesen und denke, sie ändert nur das Verhalten, wenn Sie eine Bildlaufgeste ausführen. Der Fragesteller dachte über das automatische Scrollen nach (Sie tippen also nur auf eine Schaltfläche / einen Link und müssen nicht nach unten wischen oder die Bildlaufleisten verschieben) ;-). Übrigens overflow-x: autoist es in den meisten Fällen besser, weil es nur die Bildlaufleisten anzeigt, wenn es wirklich etwas zu scrollen gibt ( scrollwürde immer die Balken anzeigen).

Felix Edelmann

CSS: reine CSS-Scroll-Animation

Antworten: