This Weebly trick is something unique and live. Sonar effect's property can be determined by the pulsating object around it like a halo. There are two ways to apply sonar effect to your site either permanent for your menus or specific for chosen elements like paragraph title, buttons and images. But editing Weebly's navigation is a bit complicated and I need further study. For now I will teach you on how to add this beautiful effects to your text and buttons.
1. So I assume you read already the Basic Guide of My Weebly Tricks, if not, please read it first before continuing.
2. Now look for the <head>, I suggest use the page <head> first for your experimentation. For help in editing the <head> please click here.
3. Once you found it, insert the following code in the head box or below the <head>:
<style>
ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
list-style: none;
}
ul.sonarmenu li{
display: inline;
}
ul.sonarmenu a{
position: relative;
display: inline-block;
margin: 5px 5px 5px 5px;
color: black; /* font color */
text-decoration: none;
font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
font-size: 22px; /* font size */
border-bottom: 2px solid transparent; /* Bottom border style */
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
outline: none;
border-bottom: 2px solid #eee; /* Bottom border style on hover */
}
ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
position: absolute;
top: 50%;
left: 50%;
width: 70px; /* width of outer circle */
height: 70px; /* height of outer circle */
border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
ul.sonarmenu a:after{ /* inner circle specific CSS */
width: 60px; /* width of inner circle */
height: 60px; /* width of inner circle */
border-width: 6px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}
ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
-moz-animation: pulsate 1.2s infinite;
-ms-animation: pulsate 1.2s infinite;
animation: pulsate 1.2s infinite;
}
/* ### Keyframe animations ### */
@-webkit-keyframes pulsate{
30%{
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-moz-keyframes pulsate{
30%{
opacity: 1;
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-ms-keyframes pulsate{
30%{
opacity: 1;
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-keyframes pulsate{
30%{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
</style>
ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
list-style: none;
}
ul.sonarmenu li{
display: inline;
}
ul.sonarmenu a{
position: relative;
display: inline-block;
margin: 5px 5px 5px 5px;
color: black; /* font color */
text-decoration: none;
font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
font-size: 22px; /* font size */
border-bottom: 2px solid transparent; /* Bottom border style */
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
outline: none;
border-bottom: 2px solid #eee; /* Bottom border style on hover */
}
ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
position: absolute;
top: 50%;
left: 50%;
width: 70px; /* width of outer circle */
height: 70px; /* height of outer circle */
border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
ul.sonarmenu a:after{ /* inner circle specific CSS */
width: 60px; /* width of inner circle */
height: 60px; /* width of inner circle */
border-width: 6px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}
ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
-moz-animation: pulsate 1.2s infinite;
-ms-animation: pulsate 1.2s infinite;
animation: pulsate 1.2s infinite;
}
/* ### Keyframe animations ### */
@-webkit-keyframes pulsate{
30%{
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-moz-keyframes pulsate{
30%{
opacity: 1;
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-ms-keyframes pulsate{
30%{
opacity: 1;
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-keyframes pulsate{
30%{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
</style>
I really have to edit some parts of the script to fit in Weebly. Save it and go to the page you want to insert an element with this effects.
4. Drag one "embed code" and paste any of the examples below.
Text Only
<ul class="sonarmenu" style="padding: 11px ;">
<p>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/>Demos</a></li>
<li><a href="http://www.myweeblytricks.com/>Photos</a></li>
<li><a href="http://www.myweeblytricks.com/">Blog</a></li>
<li><a href="http://www.myweeblytricks.com/">FAQ</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact Us</a></li>
</p>
</ul>
<p>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/>Demos</a></li>
<li><a href="http://www.myweeblytricks.com/>Photos</a></li>
<li><a href="http://www.myweeblytricks.com/">Blog</a></li>
<li><a href="http://www.myweeblytricks.com/">FAQ</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact Us</a></li>
</p>
</ul>
Image (small size only e.g social network buttons)
<ul class="sonarmenu" style="padding: 10px ;">
<a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/facebook.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/twitter.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/stumbleupon.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/yahoo.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/rss.png">
<a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/flickr.png">
</ul>
<a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/facebook.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/twitter.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/stumbleupon.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/yahoo.png"><a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/rss.png">
<a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/flickr.png">
</ul>
There is a problem for applying CSS effects in Weebly. One of which is the height of an element will base on the HTML, sample the logo is only 200px height but the pulsating effect would reached 215px, the other 15px wouldn't show up and the outcome is ugly.
So to solve this (on my own), we have to add a padding to the code. Now you can adjust the "embed code" dimensions through the padding so that the full sonars would show up. The yellow lines will your main content.
To download the list of social network icons please read my article: Add a Rotating Social Network Icon in Weebly. Upload those icons into your template and use the correct link address as you can see on the code above.
See your done. There will be less problem if you read the Basic Guide First. Guys, guys, gals, if you have questions, my comment box is large enough to accommodate you. Thank You.
0 comments: