Hiding images by using javascript DOM and only make it visible on black background

Question

[enter image description here][1]

I am new to JS and learning DOM. I was trying to learn to on rotating using DOM follow the link on this tutor below.

https://morioh.com/p/8ae9a2ad64a7?fbclid=IwAR0nTt-eix7NIUXsnYcWezZpXGj_EOughWVZ-0Xd4XdeHha_yhZsn2wW9IQ

Somehow i couldn't figure out how to manipulate it by hiding the rest which remained on the grey background that are not suppose to be visible. Really appreciate for your help in advance.

https://samuelng87.github.io/ns-pet-switch/ [2]: https://samuelng87.github.io/ns-pet-switch/

Answer 1

You could try this:

Wrap the <div id="circle"> element with a <div id="clip"> element Give this a style of

    #clip {
      -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
      clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    }

See Canisue CSS clip-path property (for HTML) for compatibility details

 var circle = document.getElementById('circle') var upBtn = document.getElementById('upBtn') var downBtn = document.getElementById('downBtn') var rotateValue = circle.style.transform; var rotateSum; upBtn.onclick = function() { rotateSum = rotateValue + "rotate(-90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum } downBtn.onclick = function() { rotateSum = rotateValue + "rotate(90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum }

 * { margin: 0; padding: 0; font-family: sans-serif; } .main { width: 100%; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(to right, #020007, #01060a); } nav { width: 80%; position: sticky; margin: 20px auto; z-index: 1; display: flex; align-items: center; } .logo { flex-basis: 20%; } .logo img { width: 200px; border-radius: 10px; position: relative; left: -5rem; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; margin: 0px 20px; } .nav-links ul li a { color: #fff; text-decoration: none; } .information { width: 1000px; height: 1000px; position: absolute; top: 50%; left: -10%; transform: translateY(-50%); } #clip { -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%); clip-path: polygon(50% 50%, 100% 0, 100% 100%); } #circle { width: 1000px; height: 1000px; top: 0; left: 0; border-radius: 50%; transform: rotate(0deg); transition: 0.4s; } .feature img { width: 100px; position: relative; object-fit: contain; border-radius: 10%; } .feature { display: flex; color: #fff; position: absolute; } .feature div { margin-left: 30px; } .feature div p { margin-top: 8px; } .one { top: 450px; right: 50px; } .two { top: 150px; left: 350px; transform: rotate(-90deg); } .three { bottom: 450px; left: 50px; transform: rotate(-180deg); } .four { bottom: 150px; right: 350px; transform: rotate(-270deg); } .char { border-radius: 10px; position: absolute; width: 200px; top: 50%; left: 35%; transform: translateY(-50%); z-index: 1; } .controls { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); text-align: center; } .controls h3 { margin: 15px 0; color: #fff; } #upBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; transform: rotate(180deg); } #downBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; } #downBtn:hover { width: 21px } #upBtn:hover { width: 21px } .overlay { width: 0; height: 0; border-top: 500px solid #ccc; border-right: 500px solid black; border-bottom: 500px solid #ccc; border-left: 500px solid #ccc; position: absolute; left: 0; top: 0; } .cover1 { position: absolute; width: 100px; background-color: red; height: 100px; } .cover2 { position: absolute; } .cover2 { position: ; }

 <base href="https://samuelng87.github.io/ns-pet-switch" /> <div class="main"> <nav> <div class="logo"> <img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo"> </div> <div class="nav-links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Game</a></li> <li><a href="#">Status</a></li> </ul> </div> </nav> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="information"> <div class="overlay"></div> <img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char"> <div id="clip"> <div id="circle"> <div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat"> <div> <h1>Nibi</h1> <p>Defence & Attack</p> </div> </div> <div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird"> <div> <h1>Yobi</h1> <p>Full Defence</p> </div> </div> <div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey"> <div> <h1>Enna</h1> <p>Full Attack</p> </div> </div> <div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog"> <div> <h1>Gobi</h1> <p>Full Attack</p> </div> </div> </div> </div> </div> <div class="controls"> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn"> <h3>Pets</h3> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn"> </div> </div>

An alternative would be to use two linear gradients as mask

#clip {
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
  -webkit-mask-size: 50% 50%, 50% 50%;
  mask-size: 50% 50%, 50% 50%;
  -webkit-mask-position: 100% 100%, 100% 0%;
  mask-position: 100% 100%, 100% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

 var circle = document.getElementById('circle') var upBtn = document.getElementById('upBtn') var downBtn = document.getElementById('downBtn') var rotateValue = circle.style.transform; var rotateSum; upBtn.onclick = function() { rotateSum = rotateValue + "rotate(-90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum } downBtn.onclick = function() { rotateSum = rotateValue + "rotate(90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum }

 * { margin: 0; padding: 0; font-family: sans-serif; } .main { width: 100%; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(to right, #020007, #01060a); } nav { width: 80%; position: sticky; margin: 20px auto; z-index: 1; display: flex; align-items: center; } .logo { flex-basis: 20%; } .logo img { width: 200px; border-radius: 10px; position: relative; left: -5rem; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; margin: 0px 20px; } .nav-links ul li a { color: #fff; text-decoration: none; } .information { width: 1000px; height: 1000px; position: absolute; top: 50%; left: -10%; transform: translateY(-50%); } #clip { width: 1000px; height: 1000px; top: 0; left: 0; -webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%); mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%); -webkit-mask-size: 50% 50%, 50% 50%; mask-size: 50% 50%, 50% 50%; -webkit-mask-position: 100% 100%, 100% 0%; mask-position: 100% 100%, 100% 0%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #circle { width: 1000px; height: 1000px; top: 0; left: 0; border-radius: 50%; transform: rotate(0deg); transition: 0.4s; } .feature img { width: 100px; position: relative; object-fit: contain; border-radius: 10%; } .feature { display: flex; color: #fff; position: absolute; } .feature div { margin-left: 30px; } .feature div p { margin-top: 8px; } .one { top: 450px; right: 50px; } .two { top: 150px; left: 350px; transform: rotate(-90deg); } .three { bottom: 450px; left: 50px; transform: rotate(-180deg); } .four { bottom: 150px; right: 350px; transform: rotate(-270deg); } .char { border-radius: 10px; position: absolute; width: 200px; top: 50%; left: 35%; transform: translateY(-50%); z-index: 1; } .controls { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); text-align: center; } .controls h3 { margin: 15px 0; color: #fff; } #upBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; transform: rotate(180deg); } #downBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; } #downBtn:hover { width: 21px } #upBtn:hover { width: 21px } .overlay { width: 0; height: 0; border-top: 500px solid #ccc; border-right: 500px solid black; border-bottom: 500px solid #ccc; border-left: 500px solid #ccc; position: absolute; left: 0; top: 0; } .cover1 { position: absolute; width: 100px; background-color: red; height: 100px; } .cover2 { position: absolute; } .cover2 { position: ; }

 <base href="https://samuelng87.github.io/ns-pet-switch" /> <div class="main"> <nav> <div class="logo"> <img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo"> </div> <div class="nav-links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Game</a></li> <li><a href="#">Status</a></li> </ul> </div> </nav> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="information"> <div class="overlay"></div> <img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char"> <div id="clip"> <div id="circle"> <div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat"> <div> <h1>Nibi</h1> <p>Defence & Attack</p> </div> </div> <div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird"> <div> <h1>Yobi</h1> <p>Full Defence</p> </div> </div> <div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey"> <div> <h1>Enna</h1> <p>Full Attack</p> </div> </div> <div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog"> <div> <h1>Gobi</h1> <p>Full Attack</p> </div> </div> </div> </div> </div> <div class="controls"> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn"> <h3>Pets</h3> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn"> </div> </div>