CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rich
Rich

Reputation: 101

Zoom-out Effect Issues

I'm trying to get a full page (with nav at the top, but I don't mind the background going underneath it) zoom-out effect. However, I want it to execute once all assets are loaded, as it is the first thing seen when the page is loaded. So I wouldn't want it being executed early otherwise it may not even be seen or just the end of it would be caught.

I have seen several examples but I've had problems with them:

Demo: https://jsfiddle.net/njj43kz4/

HTML

<body>
    <div id="front"></div>
</body>

CSS

html {
    width: 100%;
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#front {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
    background-size: 110%;
}

JavaScript

$('#front').animate({ backgroundSize: '100%' }, 1000);

Demo: http://jsfiddle.net/eHAuh/15/

HTML

<body>
    <div id="front" class="scaled"></div>
</body>

CSS

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
}

#front {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
    background-position: 50% 50%;
    overflow: hidden;
}

.animatable {
    -webkit-transition:all 750ms ease-out;
    transition:all 750ms ease-out;
}

.scaled {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

JavaScript

$(document).ready(function () {
    $('#front').attr('class', 'animatable');
    setTimeout(function () {
        $('#front').removeClass('animatable');
    }, 1000)
});

Any help would be great, and I hope the layout of this question is ok. I couldn't work out how to indent paragraphs without turning them into code indents. Thanks for reading and have a nice day.

Edit 1: The way this will execute when loaded is because the jQuery/JavaScript is in the $(window).load.

Edit 2: There was an answer suggesting to use keyframes, however these do not support IE9 and this would be preferable.

Upvotes: 0

Views: 284

Answers (2)

user4621032
user4621032

Reputation: 641

in css change 

#front  
   position: fixed;

or for body add

overflow: hidden;

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15961

You can do it with css @keyframes if you want using scale

  • I have used pseudo class for adding background

/** after page has loaded*/
$(window).bind('load', function() {
  $('#front').addClass('active')
})
html {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
#front {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: hidden;
}
#front:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
  background-size: cover;
  transform: scale(2);
}
#front.active:after {
  animation: animation 5s;
  /* change the value 5s to what you want */
  animation-fill-mode: forwards;
  /* added so that it doesn't return to its original state which is scale(2)*/
}
@keyframes animation {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>

As per your requirements it looks like you require this

/** after page has loaded*/
$(window).bind('load', function() {
  $('#front').animate({
    width: '100%',
    height: '100%'
  }, 5000);
})
html {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
#front {
  position: relative;
  top: 0;
  width: 200%;
  height: 200%;
  opacity: 1;
  background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>

Upvotes: 2

Related Questions