How to give special effects to your website
@manish-r2Hoep
•
Oct 24, 2024
Oct 24, 2024
1.2K
Before i begin to write, just have a look at below mentioned link
#-Link-Snipped-#
seems cool right???
These are few effects which i have created to give you a demo, you can create more, all it depends upon your creativity and passion for learning more and more....
Today if you visit a website, these special effects like hide text, show text, slider, fade in ,fade our are very common, so let us learn how to give these special effects to our website
These effects which you are seeing in above link, you can also create by using Jquery .JQuery is a nothing but a JavaScript Library. You can download it from here
#-Link-Snipped-#
Using this library you can give many special effects to your website like fade in, hide text, show text, slider and many more.I will give you example of one, rest you can create on your own
Let us start 😀
I hope till now you have already downloaded the Jquery library and save it in a folder where your webpage will lie.
Look at the below mentioned code first
Every thing seems to be familiar who knows about html.If you don’t know then learn html first from here
<a href="https://www.w3schools.com/" target="_blank" rel="nofollow noopener noreferrer">W3Schools Online Web Tutorials</a>
I will talk about Jquery script which I have written in code
The Basic syntax used in Jquery is $(selector).action()
A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$(document).ready(function(){//This line is used to prevent execution of script until page don’t load
$(".hide").click(function(){//this is used to execute script after you click button with class hide
$(".manish").hide("slow");
});
$(".manish").hide() - hides all elements with class="manishâ€
Similarly you can do this for show text
$(".show").click(function(){
$(".manish").show("slow");
});
This is all about jquery ,it is one of basic and simplest explanation of jquery ,if anyone still don’t understand feel free to ask
#-Link-Snipped-#
seems cool right???
These are few effects which i have created to give you a demo, you can create more, all it depends upon your creativity and passion for learning more and more....
Today if you visit a website, these special effects like hide text, show text, slider, fade in ,fade our are very common, so let us learn how to give these special effects to our website
These effects which you are seeing in above link, you can also create by using Jquery .JQuery is a nothing but a JavaScript Library. You can download it from here
#-Link-Snipped-#
Using this library you can give many special effects to your website like fade in, hide text, show text, slider and many more.I will give you example of one, rest you can create on your own
Let us start 😀
I hope till now you have already downloaded the Jquery library and save it in a folder where your webpage will lie.
Look at the below mentioned code first
[FONT=Arial]
[/FONT][FONT=Arial]
<html>
<head>
<script type="text/JavaScript" sec="https://goyal420.my3gb.com/jQuery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$(".hide").click(function(){
$(".manish").hide("slow");
});
[/FONT][FONT=Arial]$(".show").click(function(){
$(".manish").show("slow");
});
[/FONT][FONT=Arial]
}) ;
</script>
[/FONT][FONT=Arial]<style type="text/css">
[/FONT][FONT=Arial]div.manish
[/FONT][FONT=Arial]{
[/FONT][FONT=Arial]width:300px;
[/FONT][FONT=Arial]background-color:yellow;
[/FONT][FONT=Arial]padding:7px;
[/FONT][FONT=Arial]border:solid 1px #c3c3c3;
[/FONT][FONT=Arial]}
[/FONT][FONT=Arial]</style>
[/FONT][FONT=Arial]</head>
[/FONT][FONT=Arial]<body>
[/FONT][FONT=Arial]<button class="hide" style="background-color:gray;">Hide me</button> <button style="background-color:gray;" class="show">Show me</button>
[/FONT][FONT=Arial]<br/><br/>
[/FONT][FONT=Arial]<div class="manish">
[/FONT][FONT=Arial]<span style="font-family:arial;font-size:14px;">My name is Manish Kumar Goyal<br />
[/FONT][FONT=Arial]I am a computer Engineer</font><br />
[/FONT][FONT=Arial]</div>
[/FONT][FONT=Arial]</body>
[/FONT][FONT=Arial]</html>
[/FONT]Every thing seems to be familiar who knows about html.If you don’t know then learn html first from here
<a href="https://www.w3schools.com/" target="_blank" rel="nofollow noopener noreferrer">W3Schools Online Web Tutorials</a>
I will talk about Jquery script which I have written in code
The Basic syntax used in Jquery is $(selector).action()
A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$(document).ready(function(){//This line is used to prevent execution of script until page don’t load
$(".hide").click(function(){//this is used to execute script after you click button with class hide
$(".manish").hide("slow");
});
$(".manish").hide() - hides all elements with class="manishâ€
Similarly you can do this for show text
$(".show").click(function(){
$(".manish").show("slow");
});
This is all about jquery ,it is one of basic and simplest explanation of jquery ,if anyone still don’t understand feel free to ask
