body background-image fade in - javascript

I'm trying to replicate the fade in the background image of this site. How would I go about doing so with jQuery?


Use an image as a background image. i.e., <img /> tag. Then use jQuery's .animate() function:
$(document).ready(function(){
$('img.bg').animate({
opacity: 1;
}, 1000);
});
CSS:
.bg {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
HTML:
<img src="bgimage.png" class="bg" />


Working demo http://jsfiddle.net/9HTkV/ (and coz I like hulk) :P
Start with opacity 1 and then make it zero as it is fade in.
This should help :)
code
$('.box2').animate({
opacity: 0
});
​
CSS in start you want Opacity to be 1 and then make it 0.
.box2 {
height: 500px;
width: 700px;
background: #000000;
opacity: 1;
}

Related

Fade in and out background image on button hover

In a slider with background image as image of the slide, i want to change the background image when the mouse is hover a button, with a transition effect, and return to first image when the mouse leave the button. The first image have a blur effect while the second haven't it. I know how to change the image, but can't find a solution to apply a transition effect
$('#open-wowstyle').hover({
$('#img-wowstyle').css("background-image","image2.jpg");
});
$('#open-wowstyle').mouseleave({
$('#img-wowstyle').css("background-image","image1.jpg");
});
Also, I don't know why but the event "mouseleave" won't work.

Changing image by css url will not support css transition. You can place images in separate elements like DIV and position DIVs in exact same position using position: absolute. Now you can change the opacity of the DIVS on hover. The opacity property will support css transition.
Please check the below example. The ugly text is the image url from google. sorry for that.
$('.click').hover(function(){
$('.hover-bg-2').fadeOut(300);
});
$('.click').mouseleave(function(){
$('.hover-bg-2').fadeIn(300);
});
.me{
width: 300px;
height: 300px;
position: relative;
float:left;
border: solid 1px black;
}
.hover-bg-1,
.hover-bg-2{
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hover-bg-1{
background: yellow url('data:image/jpeg;base64,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');
}
.hover-bg-2{
background: red url('data:image/jpeg;base64,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');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me">
Im the content here
<div class="hover-bg-1"></div>
<div class="hover-bg-2"></div>
</div>
<button class="click">clickme</button>

You need to use :hover with animate, purly done with js and css no jquery.
#btn {
/* background-color: red; */
opacity: 0.6;
transition: 0.3s;
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
#btn:hover {
background-color: green;
opacity: 0.6;
transition: 0.3s;
background-image: url(https://s3.amazonaws.com/gazelle2.cdn.yolocare.com/sites/370/2015/05/line-art-icons-150x150-activity.png);
}
<button id="btn">Button</button>

Change opacity of div background picture

I have a DIV with some text and a background image. I want to reduce the opacity of the background image. But when I apply opacity to the DIV it affects the texts within the DIV. How do I change the opacity of the background image without changing the opacity of the texts in the DIV?
I have this code I got from another question on stackoverflow, which I use to reduce opacity of another div but i dont know how to modify it to achieve the above question.
function convertHex(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
$(".add_to_cart_button").click(function() {
$(".cart-contents").css("background-color",convertHex('#f47d32',40));
});

First step is add z-index: -1; and position: relative; to your back div css:
Ways to change opacity background:
$("#backDiv").css("opacity", "0.4");
$("#backDiv").css({ opacity: 0.4 });
$("#backDiv").fadeTo("slow", 0.4);
$("#backDiv").fadeTo(1000, 0.4); // fist parameter is animate time in ms
Test button with possibility do some action after the animation:
$("#buttonTest").click(function() {
$("#backDiv").fadeTo("slow" , 0.4, function() {
// Animation complete. You can add some action.
});
});
I hope it helps...
Good Luck!

I think below is something you are looking for:
#d1 {
background: url("http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG");
height: 200px;
width: 500px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.7);
height: 100%;
width: 100%;
display: block;
}
#d2 {
color: red;
position: relative;
}
<div id="d1">
<div class="overlay"> </div>
<div id="d2">
Test content
</div>
</div>

How do I do the image mouse hover effect?

How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.

You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!

If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.

In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}

Making images fade in

I have images that I want to be invisible and then faded in when certain events occur. My jQuery works fine and the elements are positioned correctly, I just can't get the elements to fade in.
When I type in console $('#img1').fadeIn();nothing happens.
CSS
img {
position: absolute;
border-radius: 20px;
height: 195px;
width: 300px;
opacity: 0;
}
#img1 {
left: 270px;
}
#img2 {
right: 270px;
}

Use display: none; instead opacity: 0;
http://jsfiddle.net/rLjz1rv0/

Remove opacity: 0, and replace by
visibility: hidden;

use fadeTo
$('#img1').fadeTo( 'slow', '1')
demo - http://jsfiddle.net/rLjz1rv0/1/

How to get minimal jQuery slideshow to slide properly?

Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?
http://jsfiddle.net/frank_o/eku4Lwt1/44/
JS:
changeSlide(1, $(".slideshow img"));
function changeSlide(i, items) {
setTimeout(
function()
{
var currentItem = items.eq(i),
prevItem = items.eq(i-1);
prevItem.css("left", -prevItem.width());
currentItem.css("right", 0);
changeSlide(i+1, items);
}, 2000);
}
HTML:
<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
<img src="http://lorempixel.com/200/100" />
<img src="http://lorempixel.com/200/101" />
<img src="http://lorempixel.com/200/102" />
</div>
CSS:
.slideshow {
background: white;
position: relative;
}
.slideshow img {
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100px;
-webkit-transition: all 2s ease;
}
.slideshow img:first-child {
left: 0;
}
Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):
http://jsfiddle.net/frank_o/eku4Lwt1/2/

I have changed your code quite a bit: JSFidle
First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this:
.slideshow img:first-child {
right: 0px;
}
I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/

How about this: http://jsfiddle.net/eku4Lwt1/64/
In your JS change this line:
currentItem.css("right", 0);
->
currentItem.css("left", 0);
And in your CSS change the image positioning to left: 200px;:
.slideshow img {
position: absolute;
top: 0;
left: 200px;
}

Categories

Resources