I want to darken an image, but it isn't fully black in the end, because I can see the image some extent. I want to use vanilla JS only (no jQuery).
I have used a color array (colorArr), but I think there are much more elegant ways for darkening.
var element = document.getElementById("img");
var colorArr = ["#fff","#ddd","#bbb","#999","#777","#555","#333","#000",];
var counter = 0;
var j=0;
var i = setInterval(function(){
if(j < colorArr.length){
element.style.backgroundColor = colorArr[j];
j++;
}
counter++;
if(counter === 8) {
clearInterval(i);
}
}, 250);
div.darken img {
background-color: white;
}
<html>
<body>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
I'll do it using CSS and JavaScript.
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #000; transition: opacity 2.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This technique allows me to use any colour and duration. Let's say orange for 1.5 seconds:
window.onload = function () {
document.getElementById("mask").classList.add("on");
};
.dark-img {display: inline-block; position: relative;}
.dark-img .mask {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; background-color: #f90; transition: opacity 1.5s linear;}
.dark-img .mask.on {opacity: 1;}
<div class="dark-img">
<div class="mask" id="mask"></div>
<img src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" alt="" />
</div>
This is a CSS only solution!
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0;
}
<a href="http://google.com" class="darken">
<img src="http://www.placehold.it/200x200" width="200">
</a>
You can use Web Animations API, Promise.all() to animate the background-color of <img> .parentElement from #fff to #000 and animate <img> element opacity to 0 in parallel.
const element = document.getElementById("img");
element.parentElement.style.width = `${element.naturalWidth}px`;
const button = document.querySelector("button");
const colorArr = ["#fff", "#ddd", "#bbb", "#999", "#777", "#555", "#333", "#000"];
const settings = {
easing: "linear",
fill: "forwards",
duration: 2500,
iterations: 1
};
button.onclick = () =>
Promise.all([element.parentElement.animate(colorArr.map(color => ({
backgroundColor: color
})), settings)
, element.animate([{opacity: 0}],
settings)]);
div.darken img {
background-color: white;
position: relative;
opacity: 1;
}
<html>
<body>
<button>click</button>
<div class="darken">
<img id="img" src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
Use a pseudo element and keep the markup as is, add a CSS transition and then fire it with a hover or script, which ever suit best
window.addEventListener('load', function(){
document.querySelector('button').addEventListener('click', function (){
document.querySelector('.darken').classList.toggle('on');
})
})
div.darken img {
background-color: white;
}
div.darken {
display: inline-block;
position: relative;
}
div.darken::after {
content: '';
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
background: black;
opacity: 0;
transition: opacity 1s;
}
div.darken:hover::after {
opacity: 1;
}
div.darken.on::after {
opacity: 1;
background: lightgray;
}
#keyframes darken {
0% { opacity: 0; }
100% { opacity: 1; }
}
<html>
<body>
<button>Click here (or hover image) to toggle darken</button><br>
<div class="darken">
<img id="img"
src="http://davidrhysthomas.co.uk/linked/astrid_avatar2.png" />
</div>
</body>
</html>
Related
If I try this code I just wrote:
function changeBackgroundColor() {
const clickingDiv = document.getElementById("test");
clickingDiv.style.setProperty("--primary-color-new", "#3474A7");
clickingDiv.style.setProperty("--secondary-color-new", "#ffd340");
clickingDiv.style.animation = "change-background 1s";
clickingDiv.classList.add("change-bg");
setTimeout(() => {
clickingDiv.style.setProperty("--primary-color", "#3474A7");
clickingDiv.style.setProperty("--secondary-color", "#ffd340");
clickingDiv.style.animation = "";
clickingDiv.classList.remove("change-bg");
}, 1000);
}
#keyframes change-background {
from {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}
to {
background: linear-gradient(to right, var(--primary-color-new), var(--secondary-color-new));
}
}
#test {
width: 500px;
height: 500px;
}
.change-bg {
animation-name: change-background;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-timing-function: ease;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<button onclick="changeBackgroundColor()">click me</button>
</div>
the animation don't work and it directly switch from the first color to the other. (Normally I retrieve the color from an API)
I would want to do a transition between the 2 values
I found out that linear-gradient transition / animation doesn't work. To fix this error I just used a wrapper with the opacity like this so here's the modified code:
function changeBackgroundColor() {
const wrapper = document.getElementById("wrapper");
const element = document.getElementById("test");
if (!wrapper.classList.contains("wrapper-moving")) {
wrapper.classList.add("wrapper-moving");
wrapper.style.setProperty("--new-primary-color", "#2568f6");
wrapper.style.setProperty("--new-secondary-color", "#804cda");
setTimeout(() => {
element.style.setProperty("--primary-color", "#2568f6");
element.style.setProperty("--secondary-color", "#804cda");
wrapper.classList.remove("wrapper-moving");
}, 1000);
}
}
#test {
width: 500px;
height: 500px;
background: linear-gradient(to right, #3474A7, #ffd340);
z-index: 1;
}
.wrapper {
z-index:-1;
height: 600px;
width: 600px;
position: absolute;
transition: all 1s;
background: linear-gradient(to right, var(--new-primary-color), var(--new-secondary-color));
}
.wrapper:not(.wrapper.wrapper-moving) {
opacity: 0;
}
.wrapper.wrapper-moving {
opacity: 1;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<div id="wrapper" class="wrapper"></div>
<button onclick="changeBackgroundColor()">click me</button>
</div>
(I couldn't get it to work properly in my case but it is the answer)
I am trying to make a slide panel, https://codyhouse.co/gem/css-slide-in-panel. when I run the following code, I can't click on my bottom. Can someone please help to fix it.
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
position: fixed;
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
I want to see 'here' logged in console as I click on the trigger button, I tried to add a cursor: pointer in .trigger, but it didn't work as well.
The problem in .cd-panel__container it should not be postition:fixed
the .cd-panel__container have specific width and height, when you make it's position as fixed, it will cover the elements behind it.
So you just need to modify class .cd-panel__container's position to static
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
const btn = document.querySelector('#btn');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
/* position: fixed;*/
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
<script src="index.js"></script>
</body>
</html>
I am using JavaScript to toggle notification like below.
How can I add transition between display: block and display: none;
I don't want to add an external library like jQuery because I am only going to be using the toggle effect alone.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.display == 'none'){
hint.style.display = 'block';
}
else{
hint.style.display = 'none';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I know I can use jQuery to achieve this like below.
$(document).ready(function(){
$('button').click(function(){
$('#hint').toggle('slow');
});
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Can I make the button moves up and down gradually while the #hint is being toggle like in the jQuery example above? I don't want the button to jump from one position to another.
#vothaison's suggestion: CSS transitions
Technically, #vothaison wanted to use setInterval as opposed to setTimeout, but I don't see the need for that. It's just more work.
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 1;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
hint.style.display = 'block';
window.setTimeout(function(){
hint.style.opacity = 1;
hint.style.transform = 'scale(1)';
},0);
}
if (hint.className === 'hide') {
hint.style.opacity = 0;
hint.style.transform = 'scale(0)';
window.setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
transform: scale(0);
transition: .6s ease opacity,.6s ease transform;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using CSS animations
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
setTimeout(function(){
hint.style.display = 'block';
},0); // timed to occur immediately
}
if (hint.className === 'hide') {
setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#-webkit-keyframes in {
0% { -webkit-transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#keyframes in {
0% { transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#-webkit-keyframes out {
0% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { -webkit-transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#keyframes out {
0% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
}
#hint.show {
-webkit-animation: in 700ms ease both;
animation: in 700ms ease both;
}
#hint.hide {
-webkit-animation: out 700ms ease both;
animation: out 700ms ease both;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using vanilla JavaScript
There are many, many ways to do this sort of thing with vanilla JavaScript, so here's a quick sketch of one way:
// you may need to polyfill requestAnimationFrame
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 0;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
window.setTimeout(function(){
hint.style.display = 'block';
fadein();
},0); // do this asap
}
if (hint.className === 'hide') {
fadeout();
window.setTimeout(function(){
hint.style.display = 'none';
},700); // time this to fit the animation
}
function fadein(){
hint.style.opacity = ctr !== 10 ? '0.'+ctr : 1;
hint.style.transform = ctr !== 10 ? 'scale('+('0.'+ctr)+')' : 'scale(1)';
ctr++;
if (ctr < 11)
requestAnimationFrame(fadein);
else
ctr = 0;
}
function fadeout(){
hint.style.opacity = 1 - ('0.'+ctr);
hint.style.transform = 'scale('+(1 - ('0.'+ctr))+')';
ctr++;
if (ctr < 10)
requestAnimationFrame(fadeout);
else
ctr = 0;
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Say what you want about GreenSock, Velocity.js, jQuery, etc — they all trivialise this process of showing and hiding of things. Why not just borrow the show and hide functions from jQuery's source code?
see my example below:
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
var height = hint.clientHeight;
var width = hint.clientWidth;
console.log(width + 'x' + height);
// initialize them (within hint.style)
hint.style.height = height + 'px';
hint.style.width = width + 'px';
btn.addEventListener('click', function(){
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
//hint.style.opacity = '1';
hint.style.height = height + 'px';
hint.style.width = width + 'px';
hint.style.padding = '.5em';
}
else{
hint.style.visibility = 'hidden';
//hint.style.opacity = '0';
hint.style.height = '0';
hint.style.width = '0';
hint.style.padding = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
box-sizing: border-box;
overflow: hidden;
font-weight: bold;
transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Hi I dont use display: block to display:none but changing the opacity, height and padding instead
please review this one:
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
var hint = document.getElementById('hint');
if (hint.classList.contains('h-hide')) {
hint.classList.remove('h-hide');
} else {
hint.classList.add('h-hide');
}
});
div#hint {
display: block;
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: .5s all linear;
opacity: 1;
overflow: hidden;
height: 100px;
}
#hint.h-hide {
padding: 0;
opacity: .25;
height: 0;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community</p>
<p>This is another hint on how to be safe in this community</p>
</div>
<button>show hint</button>
the drawback for this approach is we have to keep tract of the div#hint height and change it using javascript if needed.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
hint.style.opacity = '1';
}
else{
hint.style.visibility = 'hidden';
hint.style.opacity = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: visibility 1s, opacity 0.5s linear;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I think using visibility over display is better option
Without using css3 transition, you can use js setInterval to change some css property of the div, such as:
Change opacity from 0 to 1
Change height from 0 to full height
Change width from 0 to full width
Initially, you should have display: none; opacity: 0; height: 0; width: 0'
Then you have to change display: none to display: block; before you use setInterval to change other properties.
(I guess you know how to hide the div)
You can also use setTimeout(), with a trick of recursive.
Try something like this:
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
hint.classList.toggle("hide");
});
.hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
visibility: visible;
opacity: 1;
max-height: 500px;
transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}
.hide {
visibility: hidden;
opacity: 0;
max-height: 0px;
transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}
<div id='hint' class="hint">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I have also tried to do this
please have a look if it can help you
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
hint.style.opacity = 1;
hint.style.transition = "opacity 1s";
btn.addEventListener('click', function(){
if(hint.style.opacity == 0 || hint.style.opacity==''){
hint.style.opacity = 1;
}
else{
hint.style.opacity = 0;
}
});
let redBox = document.getElementById('redBox');
let blueBox = document.getElementById('blueBox');
let [redButton, blueButton] = document.querySelectorAll('button'); //Destructuring
redButton.addEventListener('click', () => {
smoothDisplayNone(redBox);
});
blueButton.addEventListener('click', () => {
smoothDisplayNone(blueBox);
});
//By using smoothDisplayNone() function, you can add this effect to whatever element you want.
function smoothDisplayNone(selectedElement){
if(!selectedElement.classList.contains('animationDisplayNone')){
selectedElement.classList.add('animationDisplayNone');
selectedElement.classList.remove('animationDisplayBlock');
}
else{
selectedElement.classList.remove('animationDisplayNone');
selectedElement.classList.add('animationDisplayBlock');
}
}
#redBox{
width: 200px;
height: 200px;
background-color: red;
}
#blueBox{
width: 200px;
height: 200px;
background-color: blue;
}
.animationDisplayNone{
animation: smoothDisplayNone 0.5s linear forwards;
}
.animationDisplayBlock{
animation: smoothDisplayBlock 0.5s linear forwards;
}
/*You should set the width and height according to the size of your element*/
#keyframes smoothDisplayBlock{
0% { opacity: 0; width: 0px; height: 0px; }
25% { opacity: 0.25; }
50% { opacity: 0.50; }
75% { opacity: 0.75; }
100% { opacity: 1; width: 200px; height: 200px; }
}
#keyframes smoothDisplayNone {
0% { opacity: 1; width: 200px; height: 200px; }
25% { opacity: 0.75; }
50% { opacity: 0.50; }
75% { opacity: 0.25; }
100% { opacity: 0; width: 0px; height: 0px; }
}
<div id="redBox"></div>
<div id="blueBox"></div>
<button type="button" style="margin-top:10px;">Red</button>
<button type="button" style="margin-top:10px;">Blue</button>
The code looks long at first glance but it is actually very simple to understand. I used the power of css animation to create a smooth effect.
You can use smoothDisplayNone() function easily.
I have this image that gets revealed when clicked, but i would like there to be a transition animation of 1s or so.
I don't want to use jQuery. A mobile friendly css solution would be great.
Any ideas?
#cover {
height: 100px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
#image {
width: 100%;
display: block;
}
<div class="cover" id="cover">
<img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
var isOpen = false;
function myFunction() {
var image = document.getElementById('image');
var cover = document.getElementById('cover');
if (isOpen === false) {
cover.setAttribute("style", "height:" + image.offsetHeight + "px");
isOpen = true;
} else if (isOpen !== false) {
cover.setAttribute("style", "height:100px");
isOpen = false;
}
}
</script>
You can just add transition: height 1s to have a one second animation:
#cover {
height: 100px;
overflow: hidden;
border-radius: 4px 4px 0 0;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
#image {
width: 100%;
display: block;
}
<div class="cover" id="cover">
<img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
var isOpen = false;
function myFunction() {
var image = document.getElementById('image');
var cover = document.getElementById('cover');
if (isOpen === false) {
cover.setAttribute("style", "height:" + image.offsetHeight + "px");
isOpen = true;
} else if (isOpen !== false) {
cover.setAttribute("style", "height:100px");
isOpen = false;
}
}
</script>
Theres a hacky way to do this without any JS at all. I used the max-height attribute, this way it could be used for images that does not have a fixed height.
#cover {
min-height:100px;
max-height:100px;
overflow:hidden;
position:relative;
transition: all linear 1s;
}
#coverToggle:checked + #cover {
max-height:500px;
}
label {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
input {
position:absolute;
visibility:hidden;
top:-100px;
left:-100px;
}
<input type="checkbox" id="coverToggle" />
<div class="cover" id="cover">
<label for="coverToggle"></label>
<img src="http://lorempixel.com/500/500/cats/" id="image" />
</div>
so I have some images and I would like to show them as a slideshow in the background. However, I want the image to cross-fade between the current image and the next image. So far, I have only been able to switch between the images:
$(document).ready(function () {
var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"];
var currentImage = 0;
function changeBackgroundImage() {
$("html").fadeIn().css({
"background-image": "url('img/backgrounds/" + images[++currentImage] + "')",
});
if (currentImage >= images.length - 1) {
//set it back to the begining
currentImage -= images.length;
}
}
setInterval(changeBackgroundImage, 1500);
});
Any help would be much appreciated! :)
What you have to do is layer two element on top of each other. Then have one fadeout and the other fadein.
Here is how I would go about doing it ...
css ...
#background-images {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#bImg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background: url(starting-img1.jpg) no-repeat;
background-size: contain;
}
#bImg2 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url(starting-img2.jpg) no-repeat;
background-size: contain;
}
.container {
width: 960px;
height: 900px;
background: rgba(255,255,255,.7);
margin: auto;
position: relative;
z-index: 10;
}
The html ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
<div id="background-images">
<div id="bImg1"></div>
<div id="bImg2"></div>
</div>
<div class="container">
Content Here
</div>
</body>
</html>
The script ...
var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;
var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;
function changeBackgroundImages() {
img1Fade();
setTimeout(img2Fade, 2000);
}
function img1Fade(){
$('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
$('#bImg2').fadeIn('slow');
if (currentImageSet1 >= imageSet1.length - 1) {
currentImageSet1 -= imageSet1.length;
};
}
function img2Fade(){
$('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
$('#bImg1').fadeIn('slow');
if (currentImageSet2 >= imageSet2.length - 1) {
currentImageSet2 -= imageSet2.length;
};
}
$(document).ready(function(){
setInterval(changeBackgroundImages, 5000);
});
You will need to mess with the timing to get it to look good. Make sure to set your urls to the images in the image array or when the sting in the css is built.
I've spent a lot of time to find the most clean and easy way.
This finally works:
var i=0;
var imghead=[
"url(http://yoururl.com/picture0.jpg)",
"url(http://yoururl.com/picture1.jpg)"
];//add as many images as you like
function slideimg() {
setTimeout(function () {
jQuery('#element').css('background-image', imghead[i]);
i++;
if(i==imghead.length) i=0;
slideimg();
}, 6000);
}
slideimg();
#element{
height: 100%;
overflow: hidden;
opacity: 1.0;
-webkit-transition: background-image 1.5s linear;
-moz-transition: background-image 1.5s linear;
-o-transition: background-image 1.5s linear;
-ms-transition: background-image 1.5s linear;
transition: background-image 1.5s linear;
}
Easier:
var current = 1;
function anim() {
if(current == 4) {current = 1; }
$('#bImg'+ current).fadeOut(3000);
++current;
$('#bImg'+ current).fadeIn(3000);
setTimeout(anim, 8000);
}
anim();
html:
<div class="inside" >
<div id="bImg2"></div>
<div id="bImg3"></div>
</div>
css:
.inside {
background:url(top_01.jpg) no-repeat center top ;
}
#bImg2 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_02.jpg) no-repeat center top ;
display: none;
}
#bImg3 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_03.jpg) no-repeat center top ;
display: none;
}