主页 / 问题 / 1093700
Accepted
Dan
Asked:2020-03-12 15:27:12 +0000 UTC2020-03-12 15:27:12 +0000 UTC

如何制作像示例中那样平滑的滚动站点？[关闭]

  • 772

您能告诉我如何进行如此流畅的滚动吗？ https://www.carineroitfeld.com/en

вёрстка

2 个回答

  1. Best Answer

    这个效果我这里已经展示过了，我再展示一遍——不要注意svg中的洞，因为你需要平滑滚动

    在最底部，我签署了负责平滑滚动的内容

    用 jQuery 完成

    (function($) {
  jQuery.scrollSpeed = function(step, speed, easing) {
    var $document = $(document),
      $window = $(window),
      $body = $('html, body'),
      option = easing || 'default',
      root = 0,
      scroll = false,
      scrollY,
      view;

    if (window.navigator.msPointerEnabled) return false;

    $window.on('mousewheel DOMMouseScroll', function(e) {
      if ($('.js-aDialogOpened').length == 0) {
        var deltaY = e.originalEvent.wheelDeltaY,
          detail = e.originalEvent.detail;
        scrollY = $document.height() > $window.height();
        scroll = true;

        if (scrollY) {
          view = $window.height();
          if (deltaY < 0 || detail > 0)
            root = (root + view) >= $document.height() ? root : root += step;
          if (deltaY > 0 || detail < 0)
            root = root <= 0 ? 0 : root -= step;
          $body.stop().animate({
            scrollTop: root
          }, speed, option, function() {
            scroll = false;
          });
        }

        return false;
      }

    }).on('scroll', function() {
      if (scrollY && !scroll) root = $window.scrollTop();
    }).on('resize', function() {
      if (scrollY && !scroll) view = $window.height();
    });
  };

  jQuery.easing.default = function(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
  };

})(jQuery);

$.scrollSpeed(100, 20000); // cкорость прокрутки
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url(https://avatars.mds.yandex.net/get-pdb/1386879/03fb902f-440e-40ac-ac1b-967d07d274c3/s1200);
  background-size: cover;
  background-attachment: fixed;
}

.pattern {
  width: 100%;
  height: 500px;
}

.heading {
  font-size: 30px;
  text-transform: uppercase;
  font-family: sans-serif;
  fill: #999;
}

.title {
  font-size: 16px;
}

.btn {
  font-family: sans-serif;
  font-size: 24px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<svg viewBox="0 0 1000 500" preserveAspectRatio='none'>
 <defs>
   <mask id="mask">
    <path d="M0,600 1000,600 1000,0 0,0
             M150,50 250,100 250,200 150,250 50,200 50,100
             M300, 200 400,250 400,350 300,400 200,350 200,250" fill="#fff"/>
   </mask>
  </defs>
  <image xlink:href="https://www.publicdomainpictures.net/pictures/40000/velka/tiny-white-dots-on-yellow.jpg" 
         x="0" y="0" 
         preserveAspectRatio="none"
         mask="url(#mask)"/>
  <g>
   <text x="450" y="60" class="heading"> secundary heading</text>
   <text class="title">
    <tspan x="380" y="90">Lorem ipsum, dolor sit amet consecteturadipisicing elit. Incidunt adipisci </tspan>        
    <tspan x="380" y="110">recusandae ea nesciunt ratione Laboriosam numquam, deserunt,quisquam<tspan>
    <tspan x="480" y="130">commodi consequatur fuga minima provident</tspan>    
  </text>
   
      <a target="_blank" xlink:href="http://yandex.kz">
       <text x="530" y="197" class="btn">learn more</text>
       <path d="M500,150 700,150 700,225 450,225 450,190z" fill="transparent" stroke=" #999" stroke-width="2"/>
      </a>
      <a target="_blank" xlink:href="http://google.kz">
        <text x="500" y="322" class="btn">request invite</text>
      <path d="M450,275 700,275 700,325 650,350 450,350z" fill="transparent" stroke=" #999" stroke-width="2"/>
      </a>

  </g>
</svg>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

    • 2

  2. 在本机 javascript 中也是如此，没有添加内容，而是将高度设置为高度 ....

    var animating = false;
var timeoutID;

function onWheel(event) {
  event = event || window.event;
  var pos = event.deltaY || event.detail || event.wheelDelta;
  console.log(pos);
  if (animating) {
    finalPos = finalPos + pos;
    event.preventDefault();
    return false;
  }
  if (pos > 0 || pos < 0) {
    if (!animating) {
      animating = true;
      finalPos = pos;
      event.preventDefault();
      clearTimeout(timeoutID);
      timeoutID = setTimeout(function() {
        console.log('scroll to ' + finalPos);
        window.scrollTo(window.scrollX, window.scrollY + finalPos);
        setTimeout(function() {
          animating = false;
        });
      });
    }
  }
}

if (window.addEventListener) {
  if ('onwheel' in document) {
    window.addEventListener("wheel", onWheel, {
      passive: false,
      capture: true
    });
  } else if ('onmousewheel' in document) {
    window.addEventListener("mousewheel", onWheel);
  } else {
    window.addEventListener("MozMousePixelScroll", onWheel);
  }
} else {
  window.attachEvent("onmousewheel", onWheel);
}
    html,
body {
  height: 3000px;
}

    • 2

相关问题