Scrolling Effect: Slow at First Than It Goes Fast

Scrolling effect: Slow at first than it goes fast

$.fn.animateScrollDivs = function(sourceDiv, destinationDiv) {  var source = '#' + sourceDiv;  var destination = '#' + destinationDiv;
  $('html, body').animate({    scrollTop: $(destination).offset().top  }, 1200, 'easeInExpo');
};
function animateDiv(sourceDiv, destinationDiv) {
  $.fn.animateScrollDivs(sourceDiv, destinationDiv);
}

div {  height: 650px;  width: 1000px;}button {  background-color: #FE2EF7;}.downButton {  margin-top: 500px;  margin-bottom: 40px;  margin-right: 200px;  margin-left: 200px;}.upButton {  margin-top: 60px;  margin-bottom: 500px;  margin-right: 200px;  margin-left: 200px;}

<body>  <div id="div1" style="background-color:red;">    <button class="downButton" onclick="animateDiv('div1','div2');">Go Down</button>  </div>  <div id="div2" style="background-color:yellow;">    <button class="upButton" onclick="animateDiv('div2','div1');">Go Up</button>    <button class="downButton" onclick="animateDiv('div2','div3');">Go Down</button>  </div>  <div id="div3" style="background-color:grey;">    <button class="upButton" onclick="animateDiv('div3','div2');">Go Up</button>    <button class="downButton" onclick="animateDiv('div3','div4');">Go Down</button>  </div>  <div id="div4" style="background-color:#2E9AFE;">    <button class="upButton" onclick="animateDiv( 'div4', 'div1');">GoToTop</button>  </div></body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>

How to fix page scroll lag in Chrome

For this example i have too much concerns;

Get rid of Jquery it is slow and you can do everything with JS (http://youmightnotneedjquery.com/)
Why timeout? You don't need it. If you are going to use it kill other timeouts so it will not be duplicated.
Use ES6(Easy to understand, read and code) Also you can compile to lower versions. It keeps you updated in your career path.
Don't run selectors for each scroll. Use selector before fire scroll.

Here the example:

class ScrollControl {  constructor() {    this.sectionDOMList = document.querySelectorAll('section');    this.initListeners();  }
  initListeners() {    window.addEventListener('scroll', (e) => {      this.animateSections();    });  }
  animateSections() {    for (let i = 0; i < this.sectionDOMList.length; i++) {      if (this.isInViewport(this.sectionDOMList[i])) {       if(!this.sectionDOMList[i].isReveal){          this.sectionDOMList[i].isReveal = true;          this.sectionDOMList[i].classList.add('reveal');        }      }    }  }
  isInViewport(element) {    const elementCenter = (element.getBoundingClientRect().top + element.getBoundingClientRect().bottom)/2;    const viewportTop = window.scrollY;    const viewportBottom = viewportTop + window.innerHeight;    return elementCenter < viewportBottom;  }}
(function() {  new ScrollControl();})();

/* Reset */
html {  -webkit-box-sizing: border-box;  box-sizing: border-box;  text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;  -webkit-tap-highlight-color: transparent;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  font-size: 16px;}
*,*:before,*:after {  -webkit-box-sizing: inherit;  box-sizing: inherit;}
body,h1,h2,h3,h4,h5,h6,p,ol,ul {  margin: 0;  padding: 0;  font-weight: normal;}
ol,ul {  list-style: none;}
img {  max-width: 100%;  height: auto;}
/* Base */
body {  width: 100%;  height: 100%;  background: white;  color: #3b3b3b;  font-family: 'Larsseit', Helvetica, Arial, sans-serif;}
.container {  max-width: 1640px;  margin-left: 30px;  margin-right: 30px;}
@media (min-width: 768px) {  .container {    margin-left: 80px;    margin-right: 80px;  }}
@media (min-width: 1800px) {  .container {    margin: 0 auto;  }}
.vc {  display: table;  height: 100%;}
.vc-ele {  display: table-cell;  vertical-align: middle;}
section {  padding: 400px 0;}
section.full-vh {  position: relative;  width: 100%;  height: 100vh;  padding: 0;}
.row {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;}
.col-half {  width: 100%;}
@media (min-width: 992px) {  .col-half {    width: 50%;  }}
.row.align-center {  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
/* Typography */
h1 {  font-size: 52px;}
h2 {  font-size: 26px;}
p {  font-family: 'Larsseit', Helvetica, Arial, sans-serif;  font-size: 16px;  font-weight: 300;  line-height: 1.5;  color: #3b3b3b;}
/* Image reveal */
.image-reveal {  position: relative;  overflow: hidden;}
.image-reveal-cover {  background: #fcfcfc;  position: absolute;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: 5;  transform: translateX(0);  -webkit-transform: translateX(0);  transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;  -webkit-transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;}
.image-reveal img {  position: relative;  z-index: 2;  opacity: 0;  transform: scale(1.4);  -webkit-transform: scale(1.4);  transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;  -webkit-transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;}
section.reveal .image-reveal-cover {  transform: translateX(100%);  -webkit-transform: translateX(100%);}
section.reveal .image-reveal img {  opacity: 1;  transform: scale(1);  -webkit-transform: scale(1);}

<div id="page">  <div class="container">
    <section class="full-vh">      <div class="vc">        <div class="vc-ele">          <h1>Scroll down</h1>        </div>      </div>    </section>
    <section>      <div class="row align-center">
        <div class="col-half">          <div class="image-reveal">            <div class="image-reveal-cover"></div>            <img src="https://fearthewild.com/clients/playground/horse.jpg" alt="Horse" />          </div>        </div>
        <div class="col-half">          <h2>This is my horse.</h2>          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>          <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>        </div>
      </div>    </section>
  </div></div>

How do I make one div scroll slower or faster than other items on the page, using pure CSS or CSS/JS (without JQuery)?

So I have managed to come up with this which is not too complex, however, it does scroll relative to the users scroll speed, but does work with scroll wheel, scrollbars, and keyboard.

It also scrolls up and down.

You can change the speed to suit your needs, but 10 worked for keeping it pretty much in view all the way down for my scroll speed, but left it behind when faster or using Page Down.

document.addEventListener("DOMContentLoaded", function DomContentLoaded(){  //Get the element you want to slow down;  var slowDiv = document.getElementById('slowDiv');  //Set its style.top to be the offsetTop so if style.top is not set, it will still work.  slowDiv.style.top = slowDiv.offsetTop + 'px';  //set the last scrollTop to use for direction  var lastScrollTop = 0;  //Get the element you are scrolling against  var relativeSpeedDiv = document.getElementById('main');

  var moveLittle = function MoveLittle(speed, scrollY) {    //Get the current top of the slow element    var topVal = parseInt(slowDiv.style.top);    //Check scroll direction    if (isScrollingDown(scrollY)) {      topVal = topVal + speed;    } else {      topVal = topVal - speed;    }    //Set new top of slow element    slowDiv.style.top = topVal + 'px';  };
  var isScrollingDown = function IsScrollingDown(scrollY) {    var retVal = false;    if (scrollY > lastScrollTop) {      retVal = true;    }    lastScrollTop = scrollY;    return retVal;  };
  window.onscroll = function WindowScroll() {    //Send speed and current scroll Y    moveLittle(10, this.scrollY);  }
});

.biggestBig {    margin: auto;    align-self: center;    width: 90%;    min-height: 9999em;}
.faded {    background: linear-gradient(gray, black);}
.slow {    width: 2em;    height: 2em;    background-color: #ee9b0b;    position: absolute;}

<div id="mainDiv" class="biggestBig faded">    <div id="slowDiv" class="slow"></div></div>

Slowly scroll down a page permanently without heavy CPU usage or laggy scrolling

Here is one possible implementation. The refresh rate is fixed, and corresponds to fps in the code below. To make sure that the speed is constant, I consider the time elapsed since the previous scroll when calculating the new scroll position. Manual scrolling is allowed (with the scroll bar, with the mouse wheel, or with touch on mobile devices) and taken into account by processing scroll, wheel and touchmove events. You can see the code at work in this codepen.

var fps = 100;
var speedFactor = 0.001;
var minDelta = 0.5;
var autoScrollSpeed = 10;
var autoScrollTimer, restartTimer;
var isScrolling = false;
var prevPos = 0, currentPos = 0;
var currentTime, prevTime, timeDiff;

window.addEventListener("scroll", function (e) {
    // window.pageYOffset is the fallback value for IE
    currentPos = window.scrollY || window.pageYOffset;
});

window.addEventListener("wheel", handleManualScroll);
window.addEventListener("touchmove", handleManualScroll);

function handleManualScroll() {
    // window.pageYOffset is the fallback value for IE
    currentPos = window.scrollY || window.pageYOffset;
    clearInterval(autoScrollTimer);
    if (restartTimer) {
        clearTimeout(restartTimer);
    }
    restartTimer = setTimeout(() => {
        prevTime = null;
        setAutoScroll();
    }, 50);
}

function setAutoScroll(newValue) {
    if (newValue) {
        autoScrollSpeed = speedFactor * newValue;
    }
    if (autoScrollTimer) {
        clearInterval(autoScrollTimer);
    }
    autoScrollTimer = setInterval(function(){
        currentTime = Date.now();
        if (prevTime) {
            if (!isScrolling) {
                timeDiff = currentTime - prevTime;
                currentPos += autoScrollSpeed * timeDiff;
                if (Math.abs(currentPos - prevPos) >= minDelta) {
                    isScrolling = true;
                    window.scrollTo(0, currentPos);
                    isScrolling = false;
                    prevPos = currentPos;
                    prevTime = currentTime;
                }
            }
        } else {
            prevTime = currentTime;
        }
    }, 1000 / fps);
}

setAutoScroll(20);

(CSS) Make a background image scroll slower than everything else

I stumbled upon this looking for more flexibility in my parallax speed that I have created with pure CSS and I just want to point out that all these people are wrong and it is possible with pure CSS It is also possible to control the height of your element better.

You will probably have to edit your DOM/HTML a bit to have some container elements, in your case you are applying the background to the body which will restrict you a lot and doesn't seem like a good idea.

http://keithclark.co.uk/articles/pure-css-parallax-websites/

Here is how you control the height with Viewport-percentage lenghts based on screen size:

https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

  .forefront-element {
    -webkit-transform: translateZ(999px) scale(.7);
    transform: translateZ(999px) scale(.7);
    z-index: 1;
  }

  .base-element {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .background-element {
    -webkit-transform: translateZ(-999px) scale(2);
    transform: translateZ(-999px) scale(2);
    z-index: 3;
  }

Layer speed is controlled by a combination of the perspective and the Z translation values. Elements with negative Z values will scroll slower than those with a positive value. The further the value is from 0 the more pronounced the parallax effect (i.e. translateZ(-10px) will scroll slower than translateZ(-1px)).

Here is a demo I found with a google search because I know there are a lot of non-believers out there, never say impossible:

http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

How to slow down scroll to top speed?

Here is a pure Javascript solution. you may need to remove scroll-behavior: smooth style as this interrupts slow scrolling. in javascript scrollTo function provide the second parameters in milliseconds and function will take that much time to scroll to top.

JS code referred from the answer @ https://stackoverflow.com/a/23844067

var mybutton = document.getElementById("myBtn");
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Bind your button click, scroll direction and effect speed
document.getElementById("myBtn").onclick = function() {
  scrollTo(0, 8000); // it will take 8 seconds to reach to top.

}

// Element to move, time in ms to animate
function scrollTo(element, duration) {
  var e = document.documentElement;
  if (e.scrollTop === 0) {
    var t = e.scrollTop;
    ++e.scrollTop;
    e = t + 1 === e.scrollTop-- ? e : document.body;
  }
  scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
  if (duration <= 0) return;
  if (typeof from === "object") from = from.offsetTop;
  if (typeof to === "object") to = to.offsetTop;

  scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
  if (t01 < 0 || t01 > 1 || speed <= 0) {
    element.scrollTop = xTo;
    return;
  }
  element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
  t01 += speed * step;
  debugger;
  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}

function easeOutCuaic(t) {
  t--;
  return t * t * t + 1;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
  <strong>when the user starts to scroll the page</strong></div>

How to make slow the Scroll-Top Speed

use jquery animate()

$('html,body').animate({ scrollTop: 0 }, 'slow');

refer this stack overflow question

scrollIntoView Scrolls just too far

If it's about 10px, then I guess you could simply manually adjust the containing div's scroll offset like that:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

Scrolling Effect: Slow at First Than It Goes Fast