CODEWITHSUNDEEP
javascriptcssanimationcss-transitionstransition
Tyler Morales
Tyler Morales

Reputation: 1830

How to fade background images

UPDATE:THIS WORKS ON CHROME, HOW CAN I GET THIS TO WORK ON FIREFOX

I am trying to fade consecutive background images when I hover over a specific element. For example, if I have three text elements, and if I hover over one, I would like the background image to change with a transitional effect.

Here is my codepen: https://codepen.io/tmocodes/pen/MWwXxZO?editors=0110
Here is my inspiration source: https://www.awwwards.com/inspiration/fullscreen-menu-66nord

let seattleEl = document.querySelector("#Seattle");
let ecuadorEl = document.querySelector("#Ecuador");
let arizonaEl = document.querySelector("#Arizona");

let imgArea = document.querySelector(".container");

ecuadorEl.addEventListener("mouseover", e => {
  imgArea.style.background = "url('https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg')";
  imgArea.classList.add = 'bg'  
});
seattleEl.addEventListener("mouseover", e => {
  imgArea.style.background =
    "url('https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg')";
  imgArea.classList.add = 'bg'

});
*{
  padding:0;
  margin:0;
  box-sizing:border-box
}

.container{
  background: url("https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg");
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  height:100vh;
  transition: all .3s;
  

  h1{
    color:white;
    opacity: .6;
    font-family: Helvetica;
    font-size: 48px;
    padding: 10px;
    cursor:pointer;
    display:block;
    width:min-content;
    height:min-content;
    margin-bottom:10px;
    
    &:hover{
      opacity:1;
    }
  }
}

@keyframes transition {
  from {
    opacity:0
  }
  
  to {
        opacity:1
  }
}

.bg{
  background-color: black;
  z-index:10;
  animation: transition .3s !important;
  transition: all .2s;
}
<div class="container">
  <h1 id="Ecuador">Ecuador</h1>
  <h1 id="Seattle">Seattle</h1>
  <h1 id="Arizona">Arizona</h1>
</div>

Upvotes: 0

Views: 112

Answers (1)

StackSlave
StackSlave

Reputation: 10627

Maybe this will help?

//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, inArray, isNum, isInt; // for use on other loads
addEventListener('load', ()=>{
get = (url, success)=>{
  const x = new XMLHttpRequest;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success(JSON.parse(x.responseText));
  }
  x.send();
  return x;
}
post = (url, send, success)=>{
  const x = new XMLHttpRequest;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success(JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(typeof FormData !== 'undefined' && send instanceof FormData){
      x.send(send);
    }
    else{
      let s, r = [];
      for(let p in send){
        s = send[p];
        if(typeof s === 'object')s = JSON.stringify(s);
        r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
      }
      x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&'));
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  const w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  const w = within || doc;
  return w.querySelectorAll(selector);
}
hC = (element, className)=>{
  return element.classList.contains(className);
}
aC = (element, className, func)=>{
  element.classList.add(className.trim());
  if(func)func(element);
  return (className, func)=>{
    return aC(element, className, func);
  }
}
rC = (element, className, func)=>{
  element.classList.remove(className.trim());
  if(func)func(element);
  return (className, func)=>{
    return rC(element, className, func);
  }
}
tC = (element, className, yFunc, nFunc)=>{
  const c = element.classList, n = className.trim();
  if(c.contains(n)){
    c.remove(n);
    if(nFunc)nFunc(element);
  }
  else{
    c.add(n);
    if(yFunc)yFunc(element);
  }
  return (className, yFunc, nFunc)=>{
    return tC(element, className, yFunc, nFunc);
  }
}
inArray = (mixed, array)=>{
  if(array.indexOf(mixed) === -1){
    return false;
  }
  return true;
}
isNum = mixed=>typeof mixed === 'number' && !isNaN(mixed); isInt = mixed=>Number.isInteger(mixed);
// put below on another page using a load Event - except the end load line and below
function FadeMaker(faderElement, placesElement){
  const places = [];
  let place;
  this.addPlace = (name, background)=>{
    const h = M('h1'), d = M('div'); 
    aC(d, 'fadeOut'); d.style.backgroundImage = 'url("'+background+'")'; 
    h.textContent = name;
    h.onmouseenter = ()=>{
      rC(place, 'fadeIn'); aC(place, 'fadeOut'); rC(d, 'fadeOut'); aC(d, 'fadeIn');
      place = d;
    }
    placesElement.appendChild(h); faderElement.appendChild(d); places.push([h, d]);
    return this;
  }
  this.make = ()=>{
    place = places[0][1]; rC(place, 'fadeOut');
    places.forEach(a=>{
      aC(a[1], 'fade');
    });
    return this;
  }
}
const fm = new FadeMaker(I('fader'), I('places'));
fm.addPlace('Equador', 'https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg').addPlace('Seattle', 'https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg').addPlace('Arizona', 'https://azgovernor.gov/sites/default/files/styles/panopoly_image_original/public/6871930-arizona.jpg?itok=sbFgZG8r').make();
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body,.container,#fader,.fade{
  width:100%; height:100%;
}
.container{
  position:relative;
}
.container>div,.fade{
  position:absolute;
}
.fade{
  background-position:center; background-size:cover; transition:opacity 0.5s ease-in-out;
}
.hide{
  display:none;
}
#places>h1{
  cursor:pointer; color:#fff; font:bold 48px Helvetica; padding:10px 20px 10px;
}
.fadeOut{
  opacity:0;
}
.fadeIn{
  opacity:1;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='container'>
    <div id='fader'></div>
    <div id='places'></div>
  </div>
</body>
</html>

You can ignore most of the JavaScript above FadeMaker... but use that stuff all the time in the future. Notice that FadeMaker takes two arguments. One where all the fader Elements go and one where the name Elements go. Once you create a new instance, you just fadeMakerInstance.addPlace(yourNameHere, yourURLHere), then .make() when your done. Note that you don't have to chain the methods like I show in the example. Once you have the instance variable you can just execute right off that like fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make().

Upvotes: 2

Related Questions