Elaine Byene - 3 months ago 6

Javascript Question

I have this code that fades a div with a

`class="BlogImage"`

`transform: scale(1)`

`transform: scale(1.2)`

Any code example to achieve the scaling? Would be even better if it can fade as well as zoom (scale) while scrolling.

`jQuery(window).scroll(function(){`

jQuery(".BlogImage").css("opacity", 1 - jQuery(window).scrollTop() / 450);

});

FYI, This is the html and I want to zoom the background image and fade the text:

`<div class="BlogImage" style="background: url('images/ocean.jpg');">`

<div class="page-header">

<h2>This is a blog title</h2>

</div>

</div>

https://jsfiddle.net/z4fk9upf/

Answer

This seems to simulate the effect you are after:

```
$(window).scroll(function(){
$(".BlogImage")
.css("opacity", 1 - $(window).scrollTop() / 450)
.css("background-size", (100 + 100 * $(window).scrollTop() / 450) + "%");
});
```

```
.BlogImage {
height: 200px;
width: 400px;
background-image: url(http://lorempixel.com/400/200/);
background-repeat: no-repeat;
background-position: center center;
}
```

```
<div style="margin-top : 10em;"></div>
<div class="BlogImage"></div>
<div style="margin-top : 25em;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```

This is how I might update your fiddle:

```
jQuery(window).scroll(function(){
jQuery(".BlogImage")
.css("opacity", 1 - $(window).scrollTop() / 450)
.css("background-size", (100 + 100 * jQuery(window).scrollTop() / 250) + "%");
});
```

```
.BlogImage {
background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png);
background-repeat: no-repeat;
background-size: 100%;
/*background-size: cover;*/
/*background-attachment: fixed;*/
position: relative;
min-height: 250px;
background-position: center center;
}
.page-header {
text-align: center;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
color:#fff;
padding:50px 0;
}
```

```
<div class="Blog">
<div class="BlogImage">
<div class="page-header">
<h2>This is a blog title</h2>
</div>
</div>
<div class="container">
<p>This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p>
<p>This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p>
<p>This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy This is the description of the blog for dummy. </p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```