Text Motion-blur Scroll 2.0

In this example below you will see how to do a Text Motion-blur Scroll 2.0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by igcorreia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright igcorreia ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Text Motion-blur Scroll 2.0</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class="display-4 mt-5">Text motion blur on mouse scroll 2.0</h1>
<div>
  <div class="wrapper">
    
 
<svg height="1650" width="720">
  
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />
    </filter>
  </defs>
  
  
<switch>
<foreignObject filter="url(#f1)" x="0" y="0" width="700" height="1650">
<p xmlns="http://www.w3.org/1999/xhtml">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo ex eligendi nisi vel praesentium, eos rerum dignissimos quaerat quisquam aliquid ipsam dolor quia vitae non? Autem quia sed id ipsa. Repudiandae magnam dolore voluptates, minima ex cupiditate eaque molestiae quas modi nisi sunt, ipsum dignissimos numquam inventore tempore consequatur veniam eum mollitia exercitationem consequuntur eius non ut! Delectus laudantium consectetur cupiditate aspernatur. Officiis, ratione. Dolore inventore deserunt temporibus fuga, accusamus esse dolorem error minima non ea consectetur quisquam, amet iure sint cum animi pariatur quis necessitatibus facere natus repellat voluptates voluptatem perspiciatis! Quo nisi laboriosam, aliquid aperiam porro sint, amet praesentium voluptate enim blanditiis autem voluptates, commodi voluptatibus corporis! Impedit asperiores cupiditate perspiciatis quidem cum ducimus consequuntur adipisci deleniti animi rem blanditiis porro, ea doloribus facere et quaerat temporibus exercitationem recusandae enim deserunt corrupti? Aspernatur recusandae placeat, cupiditate, explicabo impedit quis accusantium quisquam, quaerat porro repellat voluptas! Id dolorem aliquid deserunt assumenda quo. Optio, reiciendis sunt. Impedit officia mollitia maiores nobis autem reprehenderit doloribus omnis ullam odio labore officiis quo praesentium tempore, dolore eligendi ad reiciendis nam laudantium dolores ipsa adipisci accusantium! Saepe architecto doloribus ipsum! Ab fugit facilis magni deleniti similique harum maxime dolore atque, itaque dolores amet sed, voluptates ut a vel fugiat. Asperiores velit, excepturi expedita architecto cum possimus animi, accusamus itaque soluta adipisci illum a beatae magni optio vero odio tempore dolorem labore fuga. Nulla non et possimus animi alias vitae pariatur facere aliquid tempora amet eius similique, facilis a architecto magni dicta enim officiis recusandae! Sint dolore voluptates error cum obcaecati voluptate veritatis ratione ipsa, quasi sed quae. Excepturi autem velit minima accusantium distinctio nulla, beatae sint ea magnam numquam praesentium consequuntur doloribus quisquam tempora. Voluptatibus, ullam. Iste vero quisquam nobis voluptatem reiciendis nisi reprehenderit nam architecto soluta, vitae necessitatibus incidunt porro accusamus. Minus voluptatibus enim sapiente molestiae omnis, accusantium quis rerum perspiciatis expedita quidem assumenda quod consectetur numquam facilis, a provident eum ipsa sit consequuntur fuga nam suscipit esse officia quam. Nihil, laboriosam dicta atque, deleniti et quam sit molestias ullam mollitia eligendi error consequatur eius. Error magnam quidem molestias dolor eum ipsum nobis tenetur veniam, quaerat sed assumenda sint. Et nesciunt illum ea animi impedit. Rerum omnis labore explicabo, voluptatem placeat sit optio nesciunt, dolorem maiores accusamus doloribus quibusdam exercitationem molestias nulla soluta ullam enim excepturi similique expedita repellendus. Voluptate deserunt, enim aperiam ad accusamus quisquam iusto cum eveniet non sint soluta tempore saepe nesciunt. Sequi officiis adipisci voluptatem, quis nihil, consequuntur consequatur beatae ullam sed neque in illum explicabo veritatis quas voluptas nisi accusamus nostrum aliquam fugit molestiae nemo maxime laudantium quam eius! Magni atque at unde, similique harum consequuntur explicabo fugiat provident delectus. Facilis quos omnis impedit quis, temporibus corporis expedita tempore, asperiores debitis fuga repudiandae quod sapiente voluptas recusandae officiis architecto quibusdam blanditiis eum commodi accusantium odit non qui? Eos quam, eaque ex optio, obcaecati voluptas consequatur totam quaerat perspiciatis quasi et soluta rerum molestiae, officia tempora cum necessitatibus illum maxime deleniti corrupti? Cupiditate, in. Natus voluptas dolore et! Cum, porro perspiciatis! Suscipit eum adipisci repellat fugiat repellendus nemo dicta sapiente, sit eos! Itaque temporibus quia, corporis fugiat quibusdam quis eaque quisquam deleniti error nihil aliquam adipisci at odio. Sequi sunt blanditiis harum, nesciunt facere asperiores facilis alias perspiciatis assumenda iste exercitationem corrupti vitae, magnam enim rerum eum at quaerat dignissimos tempora aspernatur aperiam qui dolorum. Praesentium sapiente aspernatur quis quae molestiae, quasi reprehenderit accusantium animi similique ratione esse, nihil laborum doloremque voluptates eaque officiis obcaecati dolore delectus. Ex illo quo quis doloribus, rerum repellat perferendis ab? Accusantium veritatis sapiente rem temporibus! Perspiciatis fugiat voluptate placeat ab quidem suscipit error!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A est ea hic, reiciendis deleniti enim esse cumque. Voluptatem officia nulla aliquid veritatis ratione dignissimos unde voluptas aut placeat repellendus facilis molestias a, minus quas, neque ad! Pariatur commodi aspernatur, quibusdam, ducimus officia maiores optio ab doloremque hic sapiente aut voluptatibus quos tenetur, porro illum consequuntur corrupti! Beatae voluptatum corrupti ea deserunt possimus laborum illum nam odio ipsa, assumenda omnis quae nihil nobis dignissimos amet error porro provident numquam praesentium eius? Omnis, architecto ipsa, quibusdam quod, nam repellat facere rem temporibus ex aperiam maiores? Quaerat tenetur, laboriosam vero amet explicabo esse veniam excepturi hic nihil. Earum esse quo quasi nostrum dicta magnam ea eligendi eaque, quaerat officia delectus accusantium odio? Rem aliquam placeat, dignissimos velit mollitia autem vitae amet non quidem inventore deleniti, suscipit ipsum sequi tenetur fuga eius quae, itaque est consequatur. Nam itaque officia nemo facilis libero? Ab, itaque laboriosam velit maiores earum aspernatur impedit necessitatibus? Impedit illum consequatur tempore labore quod, ipsam debitis delectus vel soluta suscipit voluptas dolore maxime hic eligendi iure eaque dolores sapiente, fuga tempora. Eos rerum qui dolorem, neque ratione quaerat eum debitis a, beatae delectus impedit necessitatibus, perspiciatis pariatur voluptates quae ea quam sequi harum fugiat obcaecati? Iste quis illo quisquam minus unde voluptas expedita provident laboriosam nam saepe! Culpa excepturi illum libero voluptatem debitis, sed modi recusandae officiis hic earum doloremque ipsum similique nihil rerum quaerat rem ratione nobis sint iusto ea fugit distinctio consequatur! Ut rerum, temporibus asperiores animi consequuntur nesciunt fuga quasi nisi pariatur dolore natus ad blanditiis ullam, modi cumque, aspernatur vitae? Consectetur magni, qui alias assumenda, excepturi architecto quae accusamus officiis aut molestias quas quo fuga dignissimos consequuntur cupiditate expedita eius sed voluptates eum placeat animi. Et natus mollitia autem cupiditate optio. Sint eius est similique adipisci excepturi qui praesentium, ullam corrupti? Veniam obcaecati beatae vel quisquam. Esse eligendi repudiandae error quo dolore aliquid maxime animi ducimus quam assumenda similique dolorum blanditiis nam laborum, aut natus est. Temporibus, ullam aliquam quam laudantium eum exercitationem quo commodi aspernatur labore iusto repudiandae facere architecto similique explicabo ipsum, autem ipsa, sequi dolore! Voluptates asperiores explicabo nesciunt. Sequi provident ab debitis, officiis quidem dolores labore et tenetur nostrum, magni optio architecto. Reprehenderit odit hic vel ea aperiam excepturi est voluptates aspernatur quibusdam, sint error odio, repellendus, temporibus tenetur minus vitae. Soluta ad voluptatibus explicabo tempora iure earum eligendi quo facere quidem, qui officia, eum, repellendus quis asperiores. Non, reiciendis consequatur. Perspiciatis ab corrupti, doloremque blanditiis explicabo fugit obcaecati non et quibusdam magnam possimus amet harum doloribus! Quos recusandae non, dolor expedita obcaecati voluptatem voluptates fugit dolores magni laudantium nesciunt qui doloremque officiis vero odio minus accusamus natus omnis ipsam earum quasi! Nisi quis delectus repellendus recusandae pariatur aliquam, culpa mollitia esse ab porro atque, labore provident veniam quisquam iste rerum corrupti expedita asperiores fugit! Cumque non ipsum incidunt adipisci veniam velit officia dicta provident unde, laborum repellat asperiores, quae ut nesciunt illum dolorem quas quo? In autem placeat odio earum aliquid blanditiis! Doloribus qui, magnam quidem expedita neque illo maiores! Libero, ratione minima? Atque excepturi inventore pariatur odit. Atque recusandae incidunt magni placeat, quos eius aliquid beatae tenetur cumque, inventore voluptas delectus reprehenderit tempore accusantium consequatur numquam explicabo molestiae quo praesentium eveniet dolor autem fugit. Dolorem, deserunt provident similique maxime architecto quis doloremque sit magni fugiat maiores incidunt veniam animi reiciendis dignissimos a nobis aperiam impedit aspernatur explicabo autem mollitia officiis quos sequi. Dolorem in maxime dolor tenetur ipsam, placeat magnam minima quisquam voluptatibus sunt vero, blanditiis distinctio earum dolorum optio magni quidem debitis! Repudiandae voluptatem fugit eligendi, animi nostrum, libero rerum quibusdam corrupti deleniti excepturi culpa tempora reiciendis id voluptas maxime? Ipsam in saepe nostrum dolorum iure excepturi officia quibusdam reiciendis expedita atque omnis alias sed odio neque ad cumque tenetur deleniti commodi, architecto vitae libero quia similique molestiae? Impedit explicabo nihil et totam in beatae neque est. Enim perspiciatis odio aliquid maxime? Quos praesentium incidunt vero sapiente ipsa quaerat libero beatae. Quia ut commodi temporibus error laboriosam ipsa voluptatum modi excepturi quisquam amet repellat tenetur saepe consectetur eos dicta debitis deleniti officia, similique architecto obcaecati harum. Minus, neque ab illo delectus accusamus ad, esse fuga magnam harum vitae ullam, facilis quas debitis soluta id consectetur quisquam expedita voluptatum quaerat? Aliquid expedita quia possimus eligendi ad omnis, natus placeat quidem officia facere ullam quo numquam obcaecati similique repellat accusantium praesentium, in, dolor explicabo libero commodi amet quam fuga. Odio odit recusandae illo in alias. Suscipit voluptatem, quia delectus iure in maxime obcaecati laudantium corrupti, cupiditate laboriosam velit accusantium? Error velit eligendi totam consequuntur et doloribus aut tenetur ex voluptatibus iste. Cupiditate, veniam odit assumenda commodi, natus officia quibusdam illo voluptates nam, blanditiis ad hic libero quo suscipit saepe dicta sed beatae molestias perferendis. Perferendis itaque libero, quas, optio quibusdam placeat aperiam eligendi ad fuga reprehenderit necessitatibus repudiandae id molestiae aliquam nesciunt non iure! Itaque deleniti repellendus et doloremque magni, iste, placeat quaerat ad hic id veritatis iusto blanditiis nemo recusandae autem atque eveniet, perspiciatis maiores quia cumque omnis? Quas illo temporibus nulla necessitatibus sunt iusto asperiores ad facilis assumenda, fugit quos enim unde obcaecati et quasi aperiam quaerat a nobis, sint possimus voluptatem perspiciatis modi facere. Recusandae blanditiis delectus id atque provident porro quia. Sunt fugit porro facilis tempore necessitatibus pariatur a qui ipsum rem mollitia, id, dolor quaerat! Atque voluptatum repellat sapiente amet suscipit porro unde adipisci inventore accusantium, quo minima rerum exercitationem quis deserunt nisi officia. Quis voluptates sequi eaque omnis accusamus possimus hic fugiat debitis sapiente eum optio itaque commodi nulla nisi, nobis libero dignissimos laborum provident suscipit molestiae similique explicabo, voluptatum dicta ipsum. Magni adipisci cum consequuntur aspernatur! Incidunt et nostrum molestiae! Fugit, sint quam? Sint suscipit enim eius possimus nisi repellat non, ipsa necessitatibus cupiditate id facilis ullam magnam at veniam itaque aliquid. Maiores esse laborum architecto praesentium porro? Sint non, commodi obcaecati iusto debitis suscipit libero corrupti nobis. Distinctio, maxime. Quae vel dolores perspiciatis reiciendis soluta laudantium voluptatum voluptatem? Aspernatur quas numquam ad dignissimos. Tempore quos explicabo dolores architecto exercitationem natus voluptatibus laborum et placeat nulla pariatur reprehenderit soluta, ea labore, dignissimos aliquam nobis dolor debitis autem? Consequuntur ex voluptatum, earum, suscipit praesentium eligendi ullam necessitatibus quo nulla perferendis non, fuga eius facere. Dolor facere repudiandae blanditiis in quos velit veritatis maiores praesentium consectetur tenetur laboriosam doloremque, illo, qui cumque quidem. Voluptatum suscipit quas atque voluptatem alias aliquam, maxime magnam esse soluta facilis fugiat incidunt, ipsum quos ab. Fuga, eligendi. Blanditiis dicta consectetur repellendus architecto laudantium, facere nemo ad neque iste natus, vero tempore temporibus. Libero non quasi temporibus iure odit vitae? Porro minus praesentium voluptates quis commodi aliquam quo corporis placeat. Culpa, dolorum amet. Officiis, veniam unde. Nulla neque laborum sapiente, rerum repudiandae amet tempora, obcaecati soluta accusantium pariatur iure, sed consectetur? Asperiores inventore ullam dolor consectetur neque esse beatae qui, mollitia cumque cum minus deleniti reiciendis illo delectus nulla quisquam unde. Ad eligendi eos ab. Ipsa nulla maxime doloribus quia velit ullam cumque totam corrupti? Quasi ea eum nihil optio impedit eligendi laboriosam fugit maxime asperiores, ipsa hic eveniet magni unde laudantium mollitia pariatur et deserunt facere. Odit temporibus vitae porro perferendis magnam quae eveniet, animi eaque accusamus ab laborum? Consequatur, eveniet ea.
  </p>
</foreignObject>

<text x="20" y="20">Your SVG viewer cannot display html.</text>
</svg> 
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/igcorreia/text-motion-blur-scroll-20-LevPEz */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h1 {
  text-align: center;
  color: #007bff;
}
div {
  display: flex;
  overflow: hidden;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: small;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.015em;
  webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
}
.wrapper {
  background: #fff;
  width: 720px;
  width: 100%;
  max-width: 720px;
  z-index: 100001;
  border-radius: 5px;
  border: 1px solid #007bff;
  overflow: hidden;
  height: 320px;
  margin-top: 30px;
}
.wrapper {
  overflow-y: scroll;
}


/*Downloaded from https://www.codeseek.co/igcorreia/text-motion-blur-scroll-20-LevPEz */
$(function() {
  
  $box = $('.wrapper');
  $box.last().on("mousewheel DOMMouseScroll", function(event) {

    boxPosition = $box.scrollTop();
    var final = event.originalEvent.wheelDelta;
    
    if(final <= 0){
      final = -final;
    }else if(boxPosition <= 1){
      final = 0;
    }
    
    if(final <= 3){
      final = 0;
    }
            
    $('svg').find('feGaussianBlur').attr('stdDeviation', '0,'+final);    
  });
});

Comments