Responsive Website Design: background image slider with fade-in and out effect

Create only index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery animation of multiple Background images in Body with fade-in, fade-out effect</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Cherry+Swash);
body, html{
    margin:0;
    padding:0;
    color:#222;
 font-family: 'Cherry Swash', trebuchet ms, cursive; 
 font-size:1.5em
}
a{color:#930; text-decoration:none}
#wrap{
 position:fixed;; 
 z-index:-1; 
 top:0; 
 left:0; 
 background-color:black
}
#wrap img.mefade{
    position:absolute;
    top:0;
    display:none;
    width:100%;
    height:100%;
 z-index:-1
}
.container{
 width:80%; 
 margin:20px auto; 
 margin-top:25%; 
 background:#fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
 background-color:rgba(255,255,255,.7); 
 padding:1em; 
 border-radius:15px; 
 box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
 text-shadow: 1px 1px 5px #fff
}
</style>
</head>

<body>
<div class="container">
<h1>
Hello</h1>
<h2>
This is image background Effect</h2>
</div>
<div id="wrap">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('img.mefade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.mefade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})</script>
</body>
</html>

Either You Can Use This Code As per Mobile Compatbility

<body>
<div class="container">
<h1>
Hello</h1>
<h2>
This is image background Effect</h2>
</div>
<div id="wrap">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg">
<img class="mefade" src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script type="text/javascript">
        function anim() {
            var a = $("#wrap img[style$='inline;']");
            if (a.val() != undefined) {
                var b = a.next();
                if (b.val() != undefined){
                    b.fadeIn(2000, function () { b.css('display', 'inline') });
                    a.fadeOut(2000, function () { a.css('display', 'none')});
                }
                else {
                    $("#wrap img.mefade").first().fadeIn(2000, function () { $("#wrap img.mefade").first().css('display', 'inline') });
                    a.fadeOut(2000, function () { a.css('display', 'none') });
                    
                }
            }
            else {
                $("#wrap img.mefade").first().fadeIn(2000, function () { $("#wrap img.mefade").first().css('display', 'inline') });

}
        }
        function myfunction() {
          
            var dg_H = $(window).height();
            var dg_W = $(window).width();
            $('#wrap').css({ 'height': dg_H, 'width': dg_W });
        }

$(window).resize(function () {
            myfunction();
           // RefreshHistory();
        });
        $(window).load(function () {
            $("#wrap img.mefade").css('display', 'none');
            $("#wrap img.mefade").first().css('display', 'inline');
            myfunction();
            RefreshHistory();
        });

function RefreshHistory() {
            var count = 0;
            myCounter = setInterval(function () {
                count += 1;

anim();
            }, 4000);
        }
        $(window).unload(function () {
            clearInterval(myCounter);
        });

</script>
</body>
</html>

2 comments:

Mister Kumar Sharma11 April 2015 at 17:20
when i try to view in mobile mode ( iphone 4s). it is not working properly. may be something is going wrong but in desktop it is working good. i think this line having some problem , can u check please " @import url(http://fonts.googleapis.com/css?family=Cherry+Swash); "
Navin Prakash13 April 2015 at 03:15
thanx for your view

Friday 10 April 2015

background image slider with fade-in and out effect

Create only index.html

Either You Can Use This Code As per Mobile Compatbility

2 comments: