Showing posts with label HTML5. Show all posts
Sunday, September 28, 2014
How to bounce an object with animated effect in css3
Hi friends, hope you are doing well. I am busy with my work so I can't post here regularly. Today I will teach you how to make an animated effect to an object, text or an image that bounces from left side of the page. In this tutorial I have used CSS3 styles to make animated effect to an image. In my latest project I came across a requirement where the logo (black and white) of the website must bounce from leftside and it stops at some point. There the image should be turned into it's original color. For this I have used JQuery. But I'm not giving you the whole code for the above requirement. Here I want to discuss only about the animated effect to bounce an object. Since I have used CSS3 it will be more effective than JQuery.
Demo:
Look at the below code.
CSS3 code for animation effect:
<style>
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
How to use this in HTML?
Look below HTML demo code that shows how to use the CSS classes in HTML.
HTML:
<a href="http://www.trickstown.com/" title="Home Page" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bVcUZQgsuQJXzW-NpmHmKKPOGi-rk-wcn4nCI1H_Fd6ZGgWmY1DSGfZ1BK1dY2ieU4p4wzbdXQhyphenhyphenGXGnKByv5rXIia3fXlG1CRrLbeHc84Oq0tdjOHmUitLhCkLl5jQAY7B1MPkBrMs/s1600/trickstown.png" alt="Tricks Town" class="animated bounceInLeft" />
</a>Use class="animated bounceInLeft" in your HTML where ever you need the animation effect.
Ask your queries if any.
Demo:
Labels:
CSS3,
HTML5,
Tips and Tricks,
Web Design
Friday, March 28, 2014
How to display preview of image before upload using JQuery
When our application needs to have an option for image uploads we use input tag in a form. The upload process is handled inside a PHP file which we can discuss in future. We have already discussed about hiding an image which is broken. File uploading is very easy but sometimes we even want to preview the image before it is uploaded. For this purpose we can use JQuery code which will show the image before it is uploaded. Today I am going to discuss about the code which helps you preview the image before upload.
Here is the code for showing image before uploading.
JQuery:
$(document).ready(function(){
$("#image").change(function(){
var file = document.getElementById("image").files[0];
var readImg = new FileReader();
readImg.readAsDataURL(file);
readImg.onload = function(e) {
$('.imagepreview').attr('src',e.target.result).fadeIn();
}
})
})
This code uses the advantage of HTML5 attribute. FileReader reads the file, here the file is an image. It fetches the URL of the current image to show up when it is selected through file browser field.
The above code jquery code fetches the image and shows the preview. Below is the HTML code which refers the above jquery code.
HTML:
<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">
Since the above HTML code has no image in the source it displays a broken image, so in order to eliminate the broken image we can use the code for this link to avoid broken images or we can use the following CSS code instead of the code specified in the link. I recommend you to use the CSS code below.
CSS:
.imagepreview{width:500px;
display:none;}
Here are some helpful posts for bloggers and web designers.
Add Google Plus Follower Gadget For Blogger
How to add floating widget to blogger blog
Add awesome sticky footer menu to Blogger with simple HTML
How to trace details of an unknown person with mobile number
Why every freelance worker wants to be a blogger?
Which is the best way to optimize mobile site?
How facebook fan page can make you money?
Separate Contact page in Blogger
How to add Contact Form Widget to blogger Official Plugin
SEO Title Tag Best Practices
How to disable graph search on facebook/trick to remove facebook graph
How to find fake profile pictures on facebook?
Add Facebook Like Button below posts titles (Speed Loading)
How to delete Facebook account permanently?
How to use facebook on slow internet connections
How to delete Google Search History/Cache?
8 Tips to reduce load time of Blog/Website
Xenon Blogger Template Download
3 ways to make money online
5 Idiotic ways you can promote your blog
I have given you three blocks of code for image preview. Look below for the complete code after combining all the above blocks of code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview image before upload by TricksTown.com</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#image").change(function(){
var file = document.getElementById("image").files[0];
var readImg = new FileReader();
readImg.readAsDataURL(file);
readImg.onload = function(e) {
$('.imagepreview').attr('src',e.target.result).fadeIn();
}
})
})
</script>
<style>
.imagepreview{width:500px;
display:none;}
</style>
</head>
<body>
<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">
</body>
</html>
Copy the above code and paste it in your notepad. Save it with .html extension and check it.
Enjoy... :) Happy coding.
Thank you. If you have any doubts, please comment below. Spam comments will be removed. Labels: HTML5, JQuery, Web Design, Web Development
Subscribe to:
Posts (Atom)
