css3 - सीएसएस: शुद्ध सीएसएस स्क्रॉल एनीमेशन




scroll anchor (3)

मैं केवल CSS3 का उपयोग कर किसी पृष्ठ के शीर्ष पर स्थित बटन पर क्लिक करते समय स्क्रॉल करने का एक तरीका ढूंढ रहा हूं।

तो मुझे यह ट्यूटोरियल मिला है: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

डेमो: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

लेकिन यह मेरी जरूरतों के लिए थोड़ा अधिक उन्नत है क्योंकि मैं चाहता हूं कि ब्राउज़र पृष्ठ के शीर्ष पर स्थित एक बटन पर एक क्लिक पर स्क्रॉल करें, इसलिए मैं सोच रहा था: इनपुट बटन के बिना उन सीएसएस स्क्रॉल करना संभव है, बस एक एंकर टैग के साथ?

एचटीएमएल इस तरह दिखता है: <a href="#" class="button">Learn more</a>

मेरे पास पहले से ही कुछ सीएसएस है जो मुझे बटन क्लिक पर ट्रिगर करने की आवश्यकता है:

/* 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;
    }
}

आप इसे css3 :target छद्म चयनकर्ता का उपयोग करके एंकर टैग के साथ कर सकते हैं, इस चयनकर्ता को ट्रिगर किया जा रहा है जब एक ही आईडी वाले तत्व को वर्तमान यूआरएल के हैश के रूप में मिलान मिलता है। Example

यह जानकर, हम इस तकनीक को "+" और "~" जैसे निकटता चयनकर्ताओं के उपयोग के साथ जोड़ सकते हैं ताकि लक्ष्य तत्व के माध्यम से किसी अन्य तत्व का चयन किया जा सके जो आईडी वर्तमान यूआरएल के हैश से मेल खाता हो। इसका एक उदाहरण कुछ ऐसा होगा जो आप पूछ रहे हैं


आप मेरी लिपि को कोडपेन से सिर्फ सभी सामग्री को एक .levit-container DIV में लपेटकर उपयोग कर सकते हैं।

~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


खैर, अगर आपको सभी प्रमुख ब्राउज़रों (केवल फ़ायरफ़ॉक्स 36+, क्रोम 61+ और ओपेरा 48+) का समर्थन करने में कोई फर्क नहीं पड़ता है, तो स्क्रॉलिंग कंटेनर के लिए एंकर लिंक और यह एकल प्रॉपर्टी का उपयोग करें:

scroll-behavior: smooth;

एमडीएन संदर्भ देखें।

इसे इस तरह प्रयोग करें:

<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>

यहाँ एक Fiddle

और यहां क्षैतिज और ऊर्ध्वाधर स्क्रॉलिंग दोनों के साथ एक Fiddle भी है।





transition