Scale out by scrolling

In this example below you will see how to do a Scale out by scrolling with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Scale out by scrolling</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300'>

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

  
</head>

<body>

  <header>
  <div class="ct-hd" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0);">
  </div>
</header>
<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore adipisci excepturi dolorum, quod libero distinctio vitae ea sint labore veritatis atque placeat, minima, et ipsam, dolore earum a aut nesciunt?</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, debitis sit magni consequatur iste enim commodi, quod molestias accusamus explicabo natus, ullam culpa distinctio?</p>

    <p>Minus, vitae, qui? Repellendus expedita totam suscipit labore molestiae omnis, culpa debitis cum eos asperiores, nostrum aliquid, commodi rem quis ipsum et aspernatur, numquam quidem blanditiis delectus quos ullam corporis voluptatem ab laborum!</p>
      
    <p>Quaerat voluptatum consequatur quo. Eveniet architecto magnam explicabo ab ea, recusandae in! Itaque animi iste eligendi iusto consequatur voluptates maxime, autem asperiores et, excepturi ipsa cupiditate alias odio!</p>
    
    <p>Mollitia aliquam praesentium, nisi ipsam inventore molestias recusandae provident maiores necessitatibus repudiandae rerum temporibus velit minus tenetur.</p>
    
    <p>Eius adipisci aliquid error laudantium beatae dicta nulla voluptatem, numquam quidem, ea aperiam et tenetur dolore aliquam culpa ullam illo possimus mollitia eveniet est esse sint quae voluptatum laborum!</p>
    
    <p>Magni labore mollitia fuga architecto veritatis asperiores voluptas neque, nisi corrupti itaque voluptatum ut nobis. Vero ex soluta rerum accusamus ipsam, ullam?</p>
    
    <p>Pariatur nesciunt itaque doloribus esse, in perferendis sit modi sequi nemo, eaque nulla deserunt atque blanditiis quaerat culpa doloremque vero.</p>
    <p>Tenetur tempora sequi doloremque sint nesciunt nam eius delectus corrupti minima asperiores eum quibusdam qui incidunt quia impedit esse reiciendis numquam, error, aspernatur voluptatum, porro animi quis.
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/digistate/scale-out-by-scrolling-OQvNXb */
*:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  background-color: #333;
  text-align: center;
}

.container {
  position: relative;
  background-color: #fff;
  color: #666;
}

.content {
  margin: 0 auto;
  padding: 5% 20vw;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: left;
}
.content p {
  margin-bottom: 40px;
}

header {
  position: relative;
  height: 32vw;
}

.ct-hd {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}


/*Downloaded from https://www.codeseek.co/digistate/scale-out-by-scrolling-OQvNXb */
(function(){
  var introSection = $('.ct-hd'),
		  introSectionHeight = introSection.height(),
		  scaleSpeed = 0.3,
		  opacitySpeed = 1,
      MQ = 1024;

	triggerAnimation();
	$(window).on('resize', function(){
		triggerAnimation();
	});
  

	function triggerAnimation(){
    let currentWin = $(window);
		if (currentWin.width() >= MQ) {
			currentWin.on('scroll', function(){
				window.requestAnimationFrame(animateIntro);
			});
		} else {
			currentWin.off('scroll');
		}
	}
	//assign a scale transformation to the #cd-background element and reduce its opacity
	function animateIntro () {
		let st= $(window).scrollTop(),
        scrollPercentage = (st/introSectionHeight).toFixed(5),
			scaleValue = 1 - scrollPercentage*scaleSpeed;

		//check if the #cd-background is still visible
		if (st < introSectionHeight) {
			introSection.css({
				'-webkit-transform': 'scale(' + scaleValue + ')',
				'transform': 'scale(' + scaleValue + ')',
        'filter': 'blur(' + scrollPercentage*10 + 'px)',
				'opacity': 1 - scrollPercentage*opacitySpeed
			});
		}
	}
})();

Comments