I am a bit new to coding. I have a div with a background image. I want to be able to change the image from its blurred version to a clearer version as I scroll down. My HTML code is like this:
<div class="intro">
<div class="blur" style="background-image: url("blurimage.png");"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url("image.png");"></div>
</div>
My CSS code is like this:
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.blur{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
background-color: #222;
}
.clear{
background-size: cover;}
I have tried using many javascript functions but no avail. Please guide me as to how can I do this by using a Javascript function.
Thanks!
Using JavaScript you could try
document.addEventListener("scroll", function(event) {
// this code is executed each time the user scrolls
var scrollPosition = window.pageYOffset;
// scrollPosition is 0 at the top of the page
// it contains how many pixels have been scrolled down
});
Hope that helps.
Add this to your JS file (I assume you have jQuery included as well):
jQuery(document).ready(function($) {
scrollPosition = $(document).scrollTop();
$('body').scroll(function() {
$('.intro .clear').animate({
height: scrollPosition,
}, 300);
});
});
Also add this to .clear:
.clear {
position: absolute;
top: 0;
left: 0;
height: 0;
background-size: cover;
}
Also keep in mind that this code will work if you have your image on top of the page. Otherwise feel free to change $(document).scrollTop() with the actual selector of the parent element.
I would also recommend renaming the clear class with some other name, since if you decide to use CSS framework or plugin at later point, that class name might be reserved for clearfix styles.
see here jsfiddle
made a simple example with changing the background-color . this is for example purposes only because i can't use your images
also...you need only 1 div inside the intro and toggle classes on that div from .blur to .clear and vice-versa and use CSS to style those classes.
the idea is that you have only one div w to which you change the background depending on the scroll
HTML :
<div class="intro">
<div class="blur"></div>
</div>
CSS :
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.intro div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
}
.blur{
background-image: url("blurimage.png");
background-color: red;
}
.clearimg {
background-size: cover;
background-color:blue
background-image: url("image.png");
}
JQ :
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".intro div").addClass("clearimg")
$(".intro div").removeClass("blur")
}else{
$(".intro div").addClass("blur")
$(".intro div").removeClass("clearimg")
}
});
Related
here is my code in which i only know the mouse over and is working completely fine, but it mouse over the whole picture and i want the mouse over from the inside as well as the a slight zoom-in, here is the site from which you can see what am i asking for? (https://woodmart.xtemos.com/demo-grocery/demo/grocery/#) when you scroll down to the ads and then you hover on ads you can experience mouseover from the inside as well as a slight zoom-in. Thanks in advance.
<body>
<div class="page-container">
<div class="page-back">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
var windowWidth = $(window).width();
$('.page-back').mouseover(function(event){
var moveX = (($(window).width() / 2) -event.pageX)*0.1;
var moveY = (($(window).height() / 2) -event.pageY)*0.1;
$('.page-back').css('margin-left', moveX +'px');
$('.page-back').css('margin-top', moveY +'px');
});
</script>
</body>
here is its css
.page-container{
width: 50%;
height: 50%;
position: fixed;
background-color: #fff;
}
.page-back{
width: 100%;
height: 100%;
left: -20%;
top: -10%;
position: absolute;
background-image: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-size: 500px;
background-position: center;
}
You don't actually need Js for this. You can do this using CSS.
HTML :
<div class="page-container">
<div class="page-back">
</div>
</div>
CSS :
.page-container{
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.page-back{
width: 100%;
height: 100%;
background: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.page-back:hover{
transform: scale(1.2);
}
The main thing here is setting overflow : hidden on page-container.
This will do the job. But the background image scales only when hovered on the image and not on any elements inside. For that you need Js.
Js :
$(document).ready(function() {
$('.page-container').mouseover(function() {
$(this).find('.page-back').css('transform', 'scale(1.2)');
});
$('.page-container').mouseout(function() {
$(this).find('.page-back').css('transform', 'scale(1)');
});
});
I want the page and contents in it to be displayed ONLY AFTER my big background images are loaded.I've tried so many ways to do it, I just can't find a way.
Already tried $(document).ready - not working.
body
{
padding: 0;
margin: 0;
background-color: #ffffff;
width: 100%;
overflow-x: hidden;
background: url('images/dark.jpg');
background-attachment: fixed;
background-size: cover;
}
You could show an overlay with loading animation
<div id="preloader"></div>
#preloader
{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center;
}
and set it to display: none after all content is loaded
window.onload = function() {
document.querySelector('#preloader').style.display = "none";
};
You can use setTimeout function to display the data after you backgrounds.
Thanks
Try this:
You must do this for every images. For example:
$('selector_images').each(function(idx, img) {
var img = $(img).attr('src', '/big_image.jpg')
.on('load', function() {
if (!this.complete) {
console.log('broken image!');
} else {
//Show content
}
});
});
Hope this helps!
Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ
Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.
As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>
I'm trying to centre an image, i've attached a jsfiddle to show the outcome of what I want, the only difference would be that the image is placed into the html and not the css code.
http://jsfiddle.net/6y2qjxm0/3/
Here's the css I'm using in the fiddle and i've already taken the image url out.
width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and finally here's the html:
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
Failing this, does anyone know a better way of doing this?
It must be centred and it must be 100% width and 100% height.
Thanks
UPDATE: The image must stay in proportion like the fiddle.
UPDATED This solution is independent of the image dimensions, apart from that it needs its with to be greater than its height. It uses CSS positioning to set the image within .full-screen to be of full height, keep proportions and with a 50% negative horizontal offset (centered).
HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS:
body, html {
margin: 0;
height: 100%;
overflow-x: hidden;
}
.full-screen {
position: relative;
height: 100%;
}
.full-screen img {
position: absolute;
left: 0;
height: 100%;
left: -50%;
}
Updated fiddle: http://jsfiddle.net/5e6btwa2/1/
background-size: cover; is your best bet, with support from ie9+. Getting an img to cover the page without distorting only works if you know its size or are willing to use javascript.
Why do you need to use an img? Is it because you want the src to be added dynamically? in that case you should use an inline style.
<div style="background-image:{{dynamicImage}}"></div>
Try use attribute align with value middle in your img tag
<img src="smth.gif" align="middle">
If you want the same behavior as you had with the image as a background, you could do it like this (depends on the CSS3 transform method):
http://jsfiddle.net/6y2qjxm0/6/
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
CSS
* {
margin:0;
padding:0;
position: relative;
}
html {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
/* overflow: hidden; enable to disable scrolling */
}
.full-screen {
width:100%;
height:100%;
overflow: hidden;
}
.full-screen img {
min-width: 100%;
min-height: 100%;
left: 50%;
transform: translate(-50%,0);
}
Try this, it works in IE8+ and pretty much every other browser:
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS
.full-screen {
position: fixed;
top: -50%; /* this will center the image vertically */
left: -50%; /* this will center the image horizontally*/
width: 200%;
height: 200%;
}
.full-screen img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Demo
For other ways have a look at this article on CSS tricks by Chris Coyier. The CSS above is used in Technique #2 in his examples.
I am adding a dark shadow (as a before element) to a div on touch/click And removing it after the effect is done.
First click seems to be fine but on subsequent clicks, the effects gets darker and darker (until it gets to complete black).
It is as if there are multiple layers of before's
The only solution I have found so far it to setup the div's display property as "display: block" but this required me to do some layout rework. Any other suggestions ?
Here is the class I am using to set the highlight
.myDivCls:before
{
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: .3;
background-color: rgb(0,0,0);
}
And her is the one for removing it:
.noEffectCls:before {
content: '';
background-color: transparent;
background-image: none;
position: static;
border-radius: 0;
background-size: auto auto;
background-repeat: repeat;
background-position: 0% 0%;
-webkit-background-size: auto auto;
}
Thanks!
Have you tried using a the background shorthand prooperty on the .noEffectCls:before element and setting it to transparent?