Where both would separate together?
After the play button is clicked, the gradient separates.
I want to place an image behind the fence gradient where both would separate together after the play button is clicked.
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: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 200%;
background: linear-gradient(45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
/* filter: drop-shadow(0 0 5px #000);*/
pointer-events: none;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(calc(-100% - 1px));
}
.curtain.slide .panel-right {
transform: translateX(calc(100% 1px));
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
color: #303030;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
@keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.play:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
<div >
<div >
<div >
<div >
<div data-id="CHahce95B1g"></div>
</div>
<div ></div>
<div ></div>
</div>
<a href="https://www.google.com/">
<div ></div>
</a>
</div>
<button type="button" aria-label="Open"></button>
</div>
https://jsfiddle.net/1r3576ey/
CodePudding user response:
You can put the image onto the panels that slide below the gradient. Make the background width 200% and then align one to the right and one to the left:
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;
background: url("https://www.fillmurray.com/640/500") left top/200% auto no-repeat;
}
.panel-right {
right: 0;
background: url("https://www.fillmurray.com/640/500") right top/200% auto no-repeat;
}
/*.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: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 200%;
background:
linear-gradient(45deg,
transparent,
transparent 7px,
red 7px,
red 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
red 7px,
red 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
/* filter: drop-shadow(0 0 5px #000);*/
pointer-events: none;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(calc(-100% - 1px));
}
.curtain.slide .panel-right {
transform: translateX(calc(100% 1px));
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
color: #303030;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
@keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.play:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
<div >
<div >
<div >
<div >
<div data-id="CHahce95B1g"></div>
</div>
<div >
</div>
<div >
</div>
</div>
<a href="https://www.google.com/">
<div ></div>
</a>
</div>
<button type="button" aria-label="Open"></button>
</div>