Is there a way to incorporate an image into the background of a gradient?

Question

Is there a way to incorporate an image into the background of a gradient?

Where can the separation occur simultaneously?

Once the play button is clicked, the gradient splits apart.

I'm looking to place an image behind the fence gradient where both will separate together upon clicking the play button.

code:

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 4s;
  overflow: hidden;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}


/*.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}*/

.panel-left::before,
.panel-right::before {
  content: "";
...

        <a href="https://www.google.com/">
                <div class="exit"></div>
            </a>

</div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

https://jsfiddle.net/1r3576ey/

css background linear-gradients

Answer 1

Answer №1

You have the option to place the image on the panels that slide beneath the gradient. To do this, set the background width to 200% and align one panel to the right and another to the left:

const coverManagement = (function setupCoverManagement() {

  function show(element) {
    element.classList.remove("hide");
  }

  function hide(element) {
    element.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function displayVideo(curtain) {
    const wrapElement = curtain.parentElement.querySelector(".wrap");
    show(wrapElement);
  }

  function handleCoverClick(event) {
    const cover = event.currentTarget;
    const curtain = openCurtain(cover);
    displayVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function initialize(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", handleCoverClick);
    cover.addEventListener("afterClick", callback);
  }

  return {
    initialize
  };
}());

const playerController = (function setupPlayerController() {
  let player;

  function loadIframeScript() {
    const iframeTag = document.createElement("script");
    iframeTag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(iframeTag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const playCover = document.querySelector(".play");
    const wrapperElement = playCover.parentElement;
    const frameContainer = wrapperElement.querySelector(".video");
    addPlayer(frameContainer);
  }

  function whenPlayerIsReady() {
    player.setVolume(100);
  }

  function addPlayer(videoElement) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: videoElement.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": whenPlayerIsReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = videoElement.dataset.id;
    player = new YT.Player(videoElement, options);
  }

  function playVideo() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function initPlayer() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return playVideo;
  }

  return {
    init: initPlayer,
    play: playVideo
  };
}());
coverManagement.initialize(playerController.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* CSS styles for container, curtain, panels, etc., goes here */

.exit {
  /* CSS styles for exit button */
}

.hide {
  display: none;
}

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>

      <div class="panel-left">
      </div>
      <div class="panel-right">
      </div>
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

Answer 2

You have the option to place the image on the panels that slide beneath the gradient. To do this, set the background width to 200% and align one panel to the right and another to the left:

const coverManagement = (function setupCoverManagement() {

  function show(element) {
    element.classList.remove("hide");
  }

  function hide(element) {
    element.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function displayVideo(curtain) {
    const wrapElement = curtain.parentElement.querySelector(".wrap");
    show(wrapElement);
  }

  function handleCoverClick(event) {
    const cover = event.currentTarget;
    const curtain = openCurtain(cover);
    displayVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function initialize(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", handleCoverClick);
    cover.addEventListener("afterClick", callback);
  }

  return {
    initialize
  };
}());

const playerController = (function setupPlayerController() {
  let player;

  function loadIframeScript() {
    const iframeTag = document.createElement("script");
    iframeTag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(iframeTag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const playCover = document.querySelector(".play");
    const wrapperElement = playCover.parentElement;
    const frameContainer = wrapperElement.querySelector(".video");
    addPlayer(frameContainer);
  }

  function whenPlayerIsReady() {
    player.setVolume(100);
  }

  function addPlayer(videoElement) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: videoElement.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": whenPlayerIsReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = videoElement.dataset.id;
    player = new YT.Player(videoElement, options);
  }

  function playVideo() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function initPlayer() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return playVideo;
  }

  return {
    init: initPlayer,
    play: playVideo
  };
}());
coverManagement.initialize(playerController.init());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* CSS styles for container, curtain, panels, etc., goes here */

.exit {
  /* CSS styles for exit button */
}

.hide {
  display: none;
}

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>

      <div class="panel-left">
      </div>
      <div class="panel-right">
      </div>
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

Is there a way to incorporate an image into the background of a gradient?

Answer №1

Similar questions

Ways to eliminate the gap produced by a fixed element

Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Ways to incorporate design elements for transitioning focus between different elements

What are some ways I can condense this code?

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

Can you remind me of the specific CSS class used for Internet Explorer in Twitter Bootstrap?

Gradually make a section disappear and delete it in WordPress

How to style multiple tags using CSS

Is there a way to adjust the height pixel value in my code so it can be dynamic?

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Is it possible to adjust the fill color of an SVG embedded within an object without directly modifying the SVG file with CSS code?

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

The most effective method for transferring settings from the server to the user interface within WordPress

Are there any jQuery plugins available that animate elements as the page is scrolled?

Customize hover effects in tailwind css with dynamic values

The dropdown div does not activate when the image is clicked

The scrollbar is shifting the page's content towards the left

Ways to eliminate a css class with jquery based on a specific screen dimension