Blocks Expending Effect Using Css and Jquery For Website and Blog

When first design load it's looks as a simple design wall but Blocks explode when it’s clicked or touched, mainly using CSS and jquery and thought that was really cool. This is a awesome example of J query and JavaScript. Codes and design absolutely free and you can check and download from below:

block-expend

 

How to Use Blocks Expending Effect Codes:

For Website: Started with your div. It was just a regular old blue div with some content in it. and added some basic text styles too.

<div class="clipped-box"> 
 <div class="content">
 <h1>CLICK TO DELETE ME</h1>
 <p>I'll explode into pieces!</p>
 </div> 
</div>

Demo     Download
 

For Blog: If you are running a blog and want to use this code on side bar or some special places just copy and paste via Html/Css :

<link rel="stylesheet" href="https://raw.githubusercontent.com/himstar/Blocks-Expending-Effect/gh-pages/style.css"/>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="https://raw.githubusercontent.com/himstar/Blocks-Expending-Effect/gh-pages/jquery.js"></script>
<script src="https://raw.githubusercontent.com/himstar/Blocks-Expending-Effect/gh-pages/javascript.js"></script>
<div class="clipped-box"> 
 <div class="content">
 <h1>CLICK TO DELETE ME</h1>
 <p>I'll explode into pieces!</p>
 </div> 
</div>

Note: You can freely use script and hosted on TricksWay server. It's free and always uptime. Feel free to ask anything via comments.

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at LiveCareer as a software engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!"

One comment: On Blocks Expending Effect Using Css and Jquery For Website and Blog

  • Great post. I was checking constantly this blog and I am impressed!
    Extremely helpful information particularly the last part :
    ) I care for such information much. I was looking for this particular
    info for a long time. Thank you and best of luck.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page