1. Includes(jquery and bootstrap libraries)
2. CSS to design content
3. Body of content
4. Javascript to perform actions
Animations
1. Blur-in on mouse hover
2. Blur-out on mouse hover
3. Change background to the text
4. Show/hide text in sequence
Includes
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
css
<style>
#fadeIn { font: 15px monospace; }
#fadeIn .letter { opacity: 0; }
#fadeIn .opacity {
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
opacity: 1;
}
#backgroundPaint .background {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
background: yellow;
}
h1, h2
{
font-size: 1.6em;
font-weight: normal;
margin: 0;
}
h2
{
font-size: 1.3em;
margin-top: 1.5em;
}
a.blur
{
text-decoration: none;
color: #339;
}
a.blur:hover, a.blur:focus
{
text-decoration: underline;
color: #933;
}
.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
text-shadow: 0 0 4px #339;
}
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
text-shadow: 0 0 0 #339;
}
</style>
Body
<body>
<div id="fadeIn">
<button>Click</button>
<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>
</div>
<div id="backgroundPaint">
<button>Click</button>
<h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>
</div>
<p>The following links blur in on hover/focus</p>
<h1><a href="http://www.phpjavascript.com/" class="blur">Hover me (Blur-in)</a></h1>
<p>The following links blur out on hover/focus</p>
<h1><a href="http://www.phpjavascript.com/2018/01/display-json-data-in-table-using-jquery.html" class="blur out">Hover me (Blur-out)</a></h1>
</body>
JavaScript
<script>
$.fn.animateText = function (delay, styleclass) {
var text = this.text();
return this.each(function () {
var $this = $(this);
$this.html(text.replace(/./g, '<span class="letter">$&</span>'));
$this.find('span.letter').each(function (i, el) {
setTimeout(function () {
$(el).addClass(styleclass);
}, delay * i);
});
});
};
$('#fadeIn button').click(function () {
$(this).next('h2').animateText(15, 'opacity');
});
$('#backgroundPaint button').click(function () {
$(this).next('h2').animateText(8, 'background');
});
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}
</script>
Note:Paste javscript code at te bottom of your html code.
*Please share the article and follow our PHP Javascript for more.
