Как размыть все тело, кроме элемента списка? - PullRequest
Новая
       4

Как размыть все тело, кроме элемента списка?

3 голосов
/ 11 марта 2020

Я хотел создать эффект, при котором все тело становится размытым или затемненным, и только конкретный элемент списка выглядит чистым. Однако, когда я устанавливаю z-index для элемента списка, он не работает. И когда я устанавливаю z-index всего неупорядоченного списка, он работает, но все элементы списка выглядят чистыми (чего я не хочу).

Позвольте мне показать вам мой html код: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashish Toppo</title>
    <link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <!-- the html for the top bar starts here -->
    <div class="top_bar" id="topBar">
        <div class="logo_name" id="logoName">Ashish Toppo</div>
        <ul class="menu">
            <li class="menu_items currently_active_menuItem" id="home">home</li>
            <li class="menu_items" id="about">about</li>
            <li class="menu_items" id="education">education</li>
        </ul>
    </div>
    <!-- the html for the top bar ends here -->

    <!-- the html for the intro starts here -->
    <div class="intro" id="intro">
        <div class="profile_pic" id="profilePic">
            <img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
        </div>
        <div class="intro_box" id="introBox">
                <!-- some introduction text here -->
                <center id="aboutPointer">To know more about me, go to the about section!</center>
        </div>

    </div>
    <!-- the html for the intro ends here -->


<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>

Теперь файл Universal javaScript: 

/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
    var obj = {
        element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
                 ( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) : 
                 ( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) : 
                 console.error("The provided HTML element could not be found"),
        html: () => { return obj.element; },
        changeText: (text) => { obj.html().innerHTML = text; },
        appendText: (text) => { 
            let appendOn = obj.html().innerHTML;
            obj.html().innerHTML = appendOn + text;
        },
        previousDisplayMode: "block",
        hide: () => {
            obj.previousDisplayMode = obj.html().style.display;
            obj.html().style.display = "none"; 
        },
        show: () => { 
            obj.html().style.display = obj.previousDisplayMode;
        },
        on: (event, callBack) => {
            obj.html().addEventListener(event, callBack);
        },
        previousZIndex: 1,
        focusOn: () => {
            let blur = document.createElement("div");
            blur.className = "theDivThatBlurs";
            blur.style.width ="100vw";
            blur.style.height ="100vh";
            blur.style.display ="block";
            blur.style.position ="fixed";
            blur.style.top ="0";
            blur.style.left ="0";
            blur.style.zIndex ="9";
            blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
            blur.innerHTML = "";
            document.body.appendChild(blur);

            obj.html().style.zIndex = "100";
        }
    }
    return obj;
}

и индекс. js файл был следующим: 

/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
    const active = d.getElementsByClassName("currently_active_menuItem");
    active[0].style.textDecoration = "none";
})(document);

var about = get("about");

var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
    console.log("the about pointer has been clicked");
    focus(about);
});


function focus(theElement){
    console.log("the focus is working");
    theElement.focusOn();
}

1 Ответ

1 голос
/ 19 марта 2020

Вы можете использовать свойство box-shadow для достижения эффекта затемнения. Быстро и просто :)

Просто переключите класс программно, и он должен работать для любого элемента, который у вас есть.

Код 

function focusAndDim() {
  document.getElementById("maindiv").classList.toggle("visible");
  // if you want to get more fancy ;) 
  document.getElementsByTagName("body")[0].classList.toggle("blur");
}
.visible {
  box-shadow: 0 0 0 10000px #ccc;
  /* this code below make everything else hidden */
  /* box-shadow: 0 0 0 10000px #fff;  */
  position: relative;
}

.btn {
  height: 20px;
  line-height: 1.4;
  border: 2px solid #999;
  padding: 12px 24px;
  margin-bottom: 10px;
  border-radius: 2px;
  cursor: pointer;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

body.blur div {
  filter: blur(2px);
}

body.blur div.visible {
  filter: blur(0);
}
<div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div>

<div>Other elements</div>
...