Hi, It has been a while for me to stop posting new blogs. Today, I would like to share a bit of my web designing experience after googling and searching around to implement a sleek, elegant and yet simple jQuery plugin that may help you to improve the aesthetic of your website.
It’s worth taking a little of effort to learn and the rewards could be really great. Doing just a simple text, inserting images and setting colours is no longer enough for a good web design nowadays. It needs to be responsive, animated (in a simple and light way of course) and well, organised. I’m gonna list out the top 5 favourite plugin and do a simple demo here. I hope they will help!
WOW
A simple effect that make your website lively.
Try to see Paragraph below
WOW – Fade In Left
WOW – Fade In Down
The trick is simple, include the Animate.css and wow.min.js to your website and add “wow” and “fadeInLeft” or “fadeInUp” to any HTML DOM element that you want to have the WOW effect.
for example
[sourcecode]
<p class="wow fadeInLeft">WOW – Fade In Left</p>
<p class="wow fadeInDown">WOW – Fade In Down</p>
[/sourcecode]
There are more effect available other than the two mentioned above. Just click on the Header to go to the official site.
matchHeight
At times, your content or paragraph may have different height and you want to align them vertically and ensure they both end at the point.
You’ve got matchHeight to help you on this!
Before
This is a Sample 1
And with some random text with shorter Height
This is another Sample
And again with some random text but this time round, we have more content and it is quite length!!
After
This is a Sample 1
And with some random text with shorter Height
This is another Sample
And again with some random text but this time round, we have more content and it is quite length!!
This is another Sample3
And with some random text with shorter Height
This is another Sample4
And again with some random text but this time round, we have more content and it is quite length!!
New Line 1
New Line 2
To achieve this, you need to include jquery.matchHeight.js and ensure your DIV is having ‘data-mh’ attribute.
Those DIV with the same value will be grouped and adjusted together.
Like above sample
[sourcecode]
<div>
<div data-mh=’items-a’></div>
<div data-mh=’items-a’></div>
</div>
<div>
<div data-mh=’items-b’></div>
<div data-mh=’items-b’></div>
</div>
[/sourcecode]
smoothscroll
Easing scrolling movement has become one of the simple and yet nice effect to incorporate into your web page. Native browser scroll and move is too dull and it doesn’t really make mobile viewer who are scrolling the page using finger, to navigate the page well. To avoid this, let’s include a tweak to your web pages.
Download jquery-mousewheel and simov/simplr-smoothscroll. Include them into the Head of your web page
Run the following Javascript
[sourcecode]
$(document).ready(function(){
$.srSmoothscroll({
step:150,
speed:800
});
});
[/sourcecode]
See DEMO
Stellar
Another powerful jQuery plugin that you will not regret using it. Stellar, the name may not means anything to you but let’s see what this guy does.
You can find the Stellar JS here and include again into your Head section of your web page. In this post, I will briefly cover how to use inline DOM attribute to archive the effect. For more information, please refer to Stellar Official Site.
A Div with a random image as background and a long written text above it. Scroll down and see the effect.
My New Home
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida tellus id consectetur elementum. Phasellus eu nisl sit amet urna laoreet auctor. Sed commodo urna ante, eu bibendum elit ultrices eget. Sed leo dui, ornare ut lectus aliquet, maximus pulvinar lacus. Mauris id commodo metus, ac faucibus est. Suspendisse ultricies ullamcorper ante id pharetra. Etiam lobortis magna id elit consectetur cursus.
Mauris maximus nulla id sapien ornare, sit amet ornare sem ornare. Maecenas ante turpis, vehicula sed bibendum et, porta in massa. Vestibulum imperdiet nec augue et auctor. Aenean interdum urna erat, ut vulputate urna pharetra quis. Nullam sit amet scelerisque lacus. Nunc pulvinar quam dolor, at fermentum tortor ultrices eget. Donec dignissim sapien sed sapien suscipit sodales. Praesent magna odio, ultricies quis ipsum at, volutpat aliquet ligula.
=
Nulla nec lectus egestas, ultricies dolor et, gravida libero. Vivamus egestas mi sed eros scelerisque iaculis. In hac habitasse platea dictumst. Aliquam gravida vehicula ante eget commodo. Quisque ornare auctor aliquet. Sed tempus est et erat laoreet ultricies. Praesent blandit pharetra accumsan. Vivamus vitae turpis consectetur, lacinia diam eu, consequat tellus. Maecenas at dapibus turpis. Aliquam erat volutpat. Donec dictum sagittis purus, condimentum euismod dolor vehicula ac. Aliquam iaculis eget enim mollis consectetur. Maecenas vitae purus nisi. Vivamus risus libero, tempus in facilisis eu, facilisis a nibh.
Nullam sed gravida neque. Suspendisse in magna vulputate, tempus lacus in, iaculis quam. Phasellus cursus interdum ipsum, vitae dapibus metus facilisis non. Maecenas vitae luctus mi. Nulla ut ultrices purus, in pretium ipsum. Vivamus vel ligula malesuada, malesuada ante vel, consectetur risus. Ut ultrices laoreet laoreet. Ut iaculis tristique nibh, ac vulputate nulla aliquam vel. Ut condimentum ex est, quis vestibulum orci ornare vel. Sed facilisis blandit nisi in bibendum.
Nam dignissim turpis vel egestas tincidunt. Quisque auctor sagittis erat id ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vel sem vel ipsum congue vehicula. Vestibulum diam ex, auctor maximus blandit sed, varius eu magna. Vivamus sollicitudin purus ac rutrum tempor. Nulla sollicitudin pellentesque elit, ut pretium dui pharetra non. Vestibulum varius magna nulla, id tincidunt velit pharetra nec. Ut rhoncus nec leo eu semper. Curabitur ac varius libero. Suspendisse scelerisque porttitor eros et lobortis. Donec vitae convallis eros.
Sed nibh neque, ultricies eget tortor a, fringilla tempus ligula. Donec fermentum diam ac enim consectetur, in viverra odio sagittis. Pellentesque rutrum convallis nulla, sed luctus ipsum semper ac. In sit amet dignissim orci, condimentum luctus eros. Vivamus tempus auctor mi vel pellentesque. Etiam laoreet, magna nec ultricies molestie, orci lorem feugiat justo, non efficitur enim quam eu enim. In faucibus tellus id libero bibendum mollis. Duis ut sapien eget sapien dapibus molestie non quis nibh. Nunc sollicitudin, dui vel blandit posuere, diam justo dictum nibh, quis euismod nisi dolor quis elit.
Nulla id ligula vitae ante fringilla auctor et et sapien. Quisque sit amet viverra est. Aliquam imperdiet, risus vel interdum sagittis, justo arcu bibendum leo, vitae porttitor quam erat a ex. Maecenas viverra est id vehicula tempus. Pellentesque mattis ac nibh eu posuere. Donec tincidunt orci quis fermentum convallis. Morbi faucibus tellus ac massa tincidunt laoreet. In odio erat, maximus eu rhoncus a, blandit vitae felis. Phasellus nec erat nisl. Fusce ac facilisis arcu. In hac habitasse platea dictumst. Duis faucibus semper scelerisque.
To archive this, Insert the stellar attribute to your Div like below. Note that I also include some background css to make it nicer.
[sourcecode]
<div style="background-image: url(‘YOUR_IMAGE_URL’);
background-size: 100%;
background-repeat:no-repeat;
color:#ededed;
padding:10px;
border:2px solid #888888;"
data-stellar-background-ratio="-0.2"
data-stellar-vertical-offset="0">
Your Content goes here…
</div>
[/sourcecode]
Once you have the DOM Added, run JavaScript like below to trigger the Stellar effect
[sourcecode]
jQuery(function () {
jQuery(window).stellar({horizontalScrolling: false});
});
[/sourcecode]
mobile menu
The last and also very important component in modern web design is Responsive Mobile Menu. With Touch experience, Hover in Menu is no longer desirable in mobile view, we have to think from the point when users are browsing in a small screen and your menu bar must be Big enough to be able to Touch.
To achieve that, Responsive Mobile Menu is here to help you.
First of all, include all the necessary JavaScript into your web pages
[sourcecode]
<link rel="stylesheet" href="http://responsivemobilemenu.com/demo/rmm-css/responsivemobilemenu.css" type="text/css"/>
<!– Include JQUERY if you haven’t –>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://responsivemobilemenu.com/demo/rmm-js/responsivemobilemenu.js"></script>
[/sourcecode]
Note that i’m mapping from a demo script. You may want to download from the original source and upload to your web server before making the reference
Assuming your menu are something like below
[sourcecode]
<div style="width:500px">
<div class="rmm" data-menu-style="graphite">
<ul>
<li><a href=’#home’>Home</a></li>
<li><a href=’#about-me’>About me</a></li>
<li><a href=’#gallery’>Gallery</a></li>
<li><a href=’#blog’>Blog</a></li>
<li><a href=’#links’>Links</a></li>
<li><a href=’#sitemap’>Sitemap</a></li>
</ul>
</div>
</div>
[/sourcecode]
A live sample is shown below: (with fixed 500 px)
Same sample with longer 100% width
Putting them all together
Header 1
And with some random text with shorter Height
Header 2
And again with some random text but this time round, we have more content and it is quite length!!
Header 3
And with some random text with shorter Height
Header 4
And again with some random text but this time round, we have more content and it is quite length!!
Nulla id ligula vitae ante fringilla auctor et et sapien. Quisque sit amet viverra est. Aliquam imperdiet, risus vel interdum sagittis, justo arcu bibendum leo, vitae porttitor quam erat a ex. Maecenas viverra est id vehicula tempus. Pellentesque mattis ac nibh eu posuere. Donec tincidunt orci quis fermentum convallis. Morbi faucibus tellus ac massa tincidunt laoreet. In odio erat, maximus eu rhoncus a, blandit vitae felis. Phasellus nec erat nisl. Fusce ac facilisis arcu. In hac habitasse platea dictumst. Duis faucibus semper scelerisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Nulla id ligula vitae ante fringilla auctor et et sapien. Quisque sit amet viverra est. Aliquam imperdiet, risus vel interdum sagittis, justo arcu bibendum leo, vitae porttitor quam erat a ex. Maecenas viverra est id vehicula tempus. Pellentesque mattis ac nibh eu posuere. Donec tincidunt orci quis fermentum convallis. Morbi faucibus tellus ac massa tincidunt laoreet. In odio erat, maximus eu rhoncus a, blandit vitae felis. Phasellus nec erat nisl. Fusce ac facilisis arcu. In hac habitasse platea dictumst. Duis faucibus semper scelerisque.
Nulla id ligula vitae ante fringilla auctor et et sapien. Quisque sit amet viverra est. Aliquam imperdiet, risus vel interdum sagittis, justo arcu bibendum leo, vitae porttitor quam erat a ex. Maecenas viverra est id vehicula tempus. Pellentesque mattis ac nibh eu posuere. Donec tincidunt orci quis fermentum convallis. Morbi faucibus tellus ac massa tincidunt laoreet. In odio erat, maximus eu rhoncus a, blandit vitae felis. Phasellus nec erat nisl. Fusce ac facilisis arcu. In hac habitasse platea dictumst. Duis faucibus semper scelerisque.