Make a screen shrink on scroll

As a web design and development agency it’s very important that you can show off what your skills are; if you can combine samples of your work into an innovative presentation on your site then that’s even better. That’s exactly what Devstars have done on their site. Devstars.com is a full multipage site but use the one-page style website idea for the homepage to show off  exactly what they do. The site’s homepage has a number of navigation dots that you immediately associate with a slideshow and these contain the latest work offerings, while giving an overview of the company.

The little animation touches as the user slides down are the neat show-off points in this site. Each browser-sized screen on the homepage is like a different slide in a slide show,but you click the navigation dots on the right-hand side to move down rather than right to left. The scrollbar is hidden a way so this nifty navigation is a great way to explore the screens that follow. As you slide down to the next section, the graphic content on the screen animates, shrinking down in size and moving off  the top of the page. The real menu is hidden behind the burger icon so what this presents is an unusual slideshow of important content that Devstars wants users to see.

Technique

1. Create the shrinking logo effect

When making this effect work, the logo needs to be placed within a page. As there is no page content here, some div tags are being added, which will have 600 pixels of height added to them. When the image reaches the top of the page, it will be shrunk down.

<div class="space"></div>
<img id="shrink" src="img/Wikimedia-logo.
png" />
<div class="space"></div>
<div class="space"></div>

2. Add the library

In the head section of the page, the script tag calls the jQuery library so that we can detect the position of the page and make DOM changes based on that. The CSS styling gives the ‘space’ class a height of 600 pixels, as the comment states this is purely for demonstration only.

<script type="text/javascript" src="js/
jquery.js"></script>
<style>
.space{
height:600px;
/*Purely Demonstration Purposes*/
}

3. Finish the style

The image with the ID of ‘shrink’ will be scaled down when it hits the top of the page – this shrink will then be detected through jQuery code later. The image is displayed as a block element to enable the centring of the image horizontally.

#shrink{
display: block;
margin: 0 auto;
}
</style>

4. Detect the position

Just before the closing body tag, the script tag is added along with any of the code that follows. This script tag will check how far down the page the document has actually scrolled. From there the ‘topDistance’ variable grabs the position of the image in relation to the top.

<script >
$(function () {
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
var topDistance = $('#shrink').offset().top;

5. Start the shrink

When the image is within the space of the top of the page, the ‘shrink’ image is animated down to 0 on the width and height over half a second. Now go ahead and save the page, then you can test the effect in the browser to see the eff ect in action as you scroll the image to the top of the page.

if ( topDistance < scrollTop ) {
$('#shrink').animate({"width": 0, "height":
0}, 500 );
}
});
});
</script>

Source from web designer magazine

Tweet