The WordPress.com stats helper monkeys prepared a 2014 annual report for this blog.
Here’s an excerpt:
The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 91,000 times in 2014. If it were an exhibit at the Louvre Museum, it would take about 4 days for that many people to see it.
The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.
Here’s an excerpt:
The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 130,000 times in 2013. If it were an exhibit at the Louvre Museum, it would take about 6 days for that many people to see it.
“How to change multiple background-image of body with effects?” – I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as
<img>tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.
Here’s a quick example of multiple images fading one after the other.
Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade effects.
<div id="wrap"> <img class="bgfade" src="http://farm9.staticflickr.com/8526/8668341950_182b74faf2_z.jpg"> <img class="bgfade" src="http://farm9.staticflickr.com/8532/8667337535_6da0a9a261_z.jpg"> <img class="bgfade" src="http://farm9.staticflickr.com/8540/8667244539_d227f8c435_z.jpg"> </div>
Now, We will use some CSS Technique which will create an illusion like background-image animation. The way to work around this is to have your images as <img> tags and hide them by default “display:none;”. Give your images “position:absolute” and “z-index:-1” so they act like backgrounds and are behind everything else. Now, set css property of div#wrap which includes these images to “position:fixed” and “top:0; left:0;” so that it will fix with page background.
#wrap{
position:fixed;;
z-index:-1;
top:0;
left:0;
background-color:black
}
#wrap img.bgfade{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1
}
Now, it is java-script’s turn. We will calculate browser window’s height & width. After that we will set width/height of div#wrap to browser so that background cover entire webpage. Now we have to animate our images. We will simple use function of fadeIn() and fadeOut() in images for this.
$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
$("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
$("#wrap img").first().fadeIn(1500);
setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})
I have updated the script. Actually, after re-sizing the browser we have to update the width/height of div#wrap. So, I am going to reload this window, when ever browser will re-size. It will help to re-calculate all these and refresh the animation. Div#wrap will re-size according to browser window and play animation smoothly.
You may like:
Posted by: Dhiraj kumar
On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :).
Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use snowfall.dg.js for creating these snow.
Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are:
What this script does is adds snow-fall to the body. You can find more options in snowfall.dg.js.
No special css required for snow fall effect. But in this greeting card, I have used css for background and my greeting message.
body{
font-size:18px;
background:#badaf3 url(merry_chirstmas-wide.jpg) 100% 0 no-repeat;
background-size:cover;
font-family: 'IM Fell Double Pica', georgia, serif;
}
#welcome{
font-size:2em;
width:40%;
margin:4%;
text-align:center;
background-color:#fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
background:rgba(255,255,255,.75);
border-radius:10px;
box-shadow:4px 4px 10px 0 rgba(20,20,20,.6);
text-shadow: 2px 2px 3px #fff;
font-style:italic;
padding:1em;
color:#700;
color:rgba(120,0,20,.9)
}
<div id="welcome">May the miracle of Christmas fill your heart with warmth & love. Christmas is the time of giving and sharing. It is the time of loving and forgiving. Hope you and your family have wonderful Holiday... &... Merry Christmas to Everyone! </div>
We have to add this snowfall.dg.js in body. I always prefer to use JavaScript files before close of body tag.
<script type="text/javascript" src="snowfall.dg.js"><script>
I have updated this greetings with Jingle bells music and Html5 audio tags. now our Html is
<div id="welcome">May the miracle of Christmas fill your heart with warmth & love. Christmas is the time of giving and sharing. It is the time of loving and forgiving. Hope you and your family have wonderful Holiday... &... Merry Christmas to Everyone! </div> <audio autoplay="true" loop="true"> <source src="jingle_bells_merry.ogg" type="audio/ogg"> <source src="jingle_bells_merry.mp3" type="audio/mpeg"> Your browser does not support the audio element (HTML5). Please update your Browser. </audio>
I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 