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.
I’d need to verify with you here. Which is not something I normally do! I enjoy studying a submit that may make people think. Also, thanks for permitting me to remark! carbon steel pipe fittings
ReplyDeleteYou can definitely see your skills in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always follow your heart. termite control singapore
ReplyDelete