Design

Make Way Grid Effect – Codrops

A little grid interaction effect where adjoining items make way to a selected one that expands.


From our sponsor: Learn from healthcare leaders in Northwestern’s Online MS in Healthcare Administration.

Today I’d like to share a little grid effect with you. This effect is based on the fantastic work by Alex Frison da Isla who is a great source of inspiration when it comes to creative web animations. The main idea of the effect is this: when clicking on an image in a grid, the image expands and all surrounding items “make way”, i.e. they move to the sides. The way the items move is the playful part and we have lots of possibilities here.

In the first example, surrounding items simply move away.

We can add a bit of elasticity to the motion or increase the range of items that get affected by the motion. When you open the HTML you will notice some parameters on the grids that define all these things:

<div class="grid grid--narrow" 
	data-duration="1" 
	data-ease="elastic.out(0.5)" 
	data-scale="3" 
	data-max-rotation="20" 
	data-spread="150" 
	data-max-distance="700"
	>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/13.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/14.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/15.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/16.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/17.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/18.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/19.jpg)"></div>
	</div>
	<!-- ... -->
</div>

When playing with the skew value, we can achieve an interesting stretchy effect:

Hope you have fun with it and that you can take this to the next level in your projects!

Thanks for checking by!

Source link

Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button