Menu
I am using Anuglar to set an image that will be used as a background image for my page. Currently, the image loads from top to bottom and it doesn't look great. I'd like to fade in the image (or even load the image from a blurry view to the actual image). Anything other than loading from top to bottom. Any advice on how to do this? I see other posts that show to use javascript/jquery, but I'm not sure how to integrate it into my Angular code.
Template
<body ng-controller="MainCtrl" ng-style="heroImage">
//rest of the html
</body>
Javascript
$scope.heroImage = {
'background': 'linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url('+ $scope.place["imageLink"] +')',
'background-size': 'cover',
'height': '100vh',
'background-repeat': 'no-repeat'
};
543
You can use another div element or just img itself wrapped by body and animate the opacity whenever you want
HTML
<body>
<div id='background'>
<img ng-src='yourimage' ng-class="{visible:imageVisible}"/>
</div>
</body>
CSS
body {
background: transparent;
}
#background > img {
opacity: 0;
display: fixed; //or absolute
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -1;
transition: all 1s;
}
#backcgound > img.visible {
opacity: 1;
}
JS
$scope.imageVisible = true;
this is good approach only for one image to show on page load but if You want multiple images to fadein then better approach will be canvas or multiple images
<body>
<div id="background">
<img ng-reapeat="image in images track by $index" ng-src="image.src" ng-class="{visible:image.visible}"/>
</div>
</body>
and then you can use $interval to change visible image by changing opacity JS
images=[{
src:'yoursrc',visible:false
}, {
src:'yoursrc',visible:false
}, {
src:'yoursrc',visible:false
},
...
]
You can do this with an angular directive like so:
angular.module('app', [])
.directive('backgroundimg', function() {
return {
link: function(scope, element, attribs) {
let img = new Image(),
s = element[0].style;
s.transition = 'background-image 1s ease-in-out';
s.backgroundSize = attribs.backgroundsize || '800px 600px';
s.backgroundImage = 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'; //1x1px transparent gif
img.onload = function() {
s.backgroundImage = 'url(' + attribs.backgroundimg + ')';
};
img.src = attribs.backgroundimg;
}
};
});
This lets you declare your background image, which then will fade in once loaded. To fade in properly, we need to have an image to fade from. You can set your own in the element style property, or else it will default to a 1px white image.
Example HTML:
<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px">
If you want to fade in from a blurry picture, just add it to the style:
<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px" style="background-image:url(mythumbnail.gif)" />
Or even better, encode it inline first with a tool like this. (Remember to resize it first)
Other styling you can do with CSS.
Full Plnkr Example
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
