Javascript animacja lini jak na zdjęciu

pytanie zadane 2 sierpnia 2021 w JavaScript przez chrystian Gaduła (4,780 p.)
edycja 2 sierpnia 2021 przez ScriptyChris

Chciałbym zrobić podobną animacje jak ze zdjecia na lini nad przyciskami (https://i.stack.imgur.com/08FEE.png)

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Travel</title>
    <!--Shorcut -->
    <link rel="shortcut icon" href="https://icons8.com/icon/108778/around-the-globe" >
    <!--Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!--Polish words-->
    <meta charset="UTF-8">
    <!-- include style -->
    <link rel="stylesheet" href="../styledopodstron/style_podroze.css">
    <!--Responsive-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
<!--Script-->
<script src="../js/podroze_script.js"></script>
<!--Background-->
<div class="background_img">
    <!--Loop-->
<div id="search" class="nav justify-content-end">
    <button id='button1' class="nav-item hover_button">
        <img class="img-fluid "  src="https://img.icons8.com/ios/35/ffffff/search--v1.png" alt=""/>
    </button>
</div>
    <!--Center-->
    <div id="center_logo">
        <button class="hover_button">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                       width="150" height="150"
                                       viewBox="0 0 172 172"
                                       style=" fill:#000000;"></svg>
        </button><br>Around globe
    </div>
    <div id="under_center" class="">
        <ul class="nav justify-content-center">
        <li class="nav-item ">
            <button id="main_Page"><a  class="nav-link active text-white" aria-current="page" href="#" style="border-top:2px solid whitesmoke;text-decoration: none;">Main page</a></button>
        </li>
            <li class="nav-item ">
                <button><a  class="nav-link active text-white" aria-current="page" href="#" style="border-top:2px solid whitesmoke;text-decoration: none;">Journeys</a></button>
            </li>
            <li class="nav-item ">
                <button> <a  class="nav-link active text-white" aria-current="page" href="#" style="border-top:2px solid whitesmoke;text-decoration: none;">Documents</a></button>
            </li>
            <li class="nav-item ">
                <button><a  class="nav-link active text-white" aria-current="page" href="#" style="border-top:2px solid whitesmoke;text-decoration: none;">Guides</a></button>
            </li>
            <li class="nav-item" style="border-top:2px solid whitesmoke;text-decoration: none;padding-left:10%">
                <button><a  class="nav-link active text-white" aria-current="page" href="#" style="">Shop</a></button >
            </li>
        </ul>
    </div>

</div>

</body>
</html>

body{
    background: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container{
    position: relative;
}
.background_img{
    background-image: url('https://duze-podroze.pl/wp-content/uploads/2019/03/Hakone-Japonia.jpg');
    background-size:cover;
}
button{
    border:none;
    background: none;
    padding:0;
}
#button1{
    border:none;
    background: none;
    padding:0;
    margin-top: 5%;
    margin-right: 10%;
}
button:focus{
    outline: none;
}
.hover_button:hover{
    opacity:0.7;
}
#center_logo{
    text-align: center;
    align-items: center;
    color:whitesmoke;
    font-family: Verdana;
    font-size: 450%;
}

//backlight

const main_Page = document.getElementById("main_Page");


    main_Page.addEventListener("mouseover", function (event){
        event.target.style.boxShadow = "2% 0% 0% whitesmoke";

        setTimeout(function (){
            event.target.style.boxShadow ="";}, 500);
        },false);

2 odpowiedzi

odpowiedź 2 sierpnia 2021 przez pablop76 VIP (123,120 p.)
wybrane 3 sierpnia 2021 przez chrystian

Najlepsza

Użyj pseudo elementu dla klasy active. Oczywiście klasa powinna być dodawana tyko do aktywnego item nie jak teraz dodałeś do wszystkich.

.active{
		position: relative;
}
.active:before{
  position: absolute;
	left: 0;
	top: 0;
	content:"";
	width: 100%;
	height: 2px;
	background-color: #fff;
}

komentarz 2 sierpnia 2021 przez chrystian Gaduła (4,780 p.)

coś takiego wymysliłem

Java script

//backlight
const light1 = document.getElementById("li1");
function backLight() {
    light1.style.boxshadow = " 0 8px 7px -2px whitesmoke";
}

html

<li id="li1"  class="nav-item" style="border-top:2px solid whitesmoke;text-decoration: none;" >
    <button onmouseover = "backLight()"><a  class="nav-link active text-white" aria-current="page" href="#">Main page</a></button>
</li>

komentarz 3 sierpnia 2021 przez chrystian Gaduła (4,780 p.)

@pablop76, mam to lecz wolałem w javascript

li{
    position: relative;
}
li:hover{
    content:"";
    height: 4px;
    background-color: #fff;
}

komentarz 3 sierpnia 2021 przez pablop76 VIP (123,120 p.)

Nie wystarczy Ci, że będziesz miał klasę w css i będziesz ją sterował w js?

komentarz 3 sierpnia 2021 przez chrystian Gaduła (4,780 p.)

//hover backlight
function liaOn(li){
    li.style.content = "";
    li.style.height =  "2px";
    li.style.backgroundColor = "#fff";
    li.style.boxShadow = "1px 1px 1px white";
}
function liaOut(li){
    li.style.content = null;
    li.style.height =null;
    li.style.backgroundColor = null;
     li.style.boxShadow = null;
}

<li id="li1"  class="nav-item"  style="border-top:2px solid whitesmoke;text-decoration: none;" >
    <button class='buttonCenter' onmouseover= "liaOn(this)" onmouseout="liaOut(this)"><a  class="nav-link active text-white" aria-current="page" href="#">Main page</a></button>
</li>

jescze jeden problem napotkałem chciłem robić jeszcze poświate na tym najechaniu ale box shadow robi mi się na przycisku nie na li

komentarz 3 sierpnia 2021 przez chrystian Gaduła (4,780 p.)

oraz czy da się ten border li rozszerzyć by wystawał za napis Around world a przyciski zostały na swoim miejscu

komentarz 3 sierpnia 2021 przez pablop76 VIP (123,120 p.)

@chrystian,

:hover to nie to samo co :before

odpowiedź 14 października 2021 przez chrystian Gaduła (4,780 p.)

Animacja w java script

html

<div id="under_center" class="">
        <ul class="nav justify-content-center">
        <li id="li1"  class="nav-item"  style="border-top:2px solid whitesmoke;text-decoration: none;" >
            <button class='buttonCenter' onmouseover= "liOn(this)" onmouseout="liOut(this)"><a  class="nav-link active text-white" aria-current="page" >Main page</a></button>
        </li>
            <li class="nav-item" style="border-top:2px solid whitesmoke;text-decoration: none;">
                <button class='buttonCenter'onmouseover= "liOn(this)" onmouseout="liOut(this)"><a  class="nav-link active text-white" aria-current="page" >Journeys</a></button>
            </li>
            <li class="nav-item" style="border-top:2px solid whitesmoke;text-decoration: none;">
                <button class='buttonCenter' onmouseover= "liOn(this)" onmouseout="liOut(this)"> <a  class="nav-link active text-white" aria-current="page" >Documents</a></button>
            </li>
            <li class="nav-item " style="border-top:2px solid whitesmoke;text-decoration: none;">
                <button class='buttonCenter' onmouseover= "liOn(this)" onmouseout="liOut(this)"><a  class="nav-link active text-white" aria-current="page" >Guides</a></button>
            </li>
            <li class="nav-item" style="border-top:2px solid whitesmoke;text-decoration: none;">
                <button class='buttonCenter'  onmouseover= "liOn(this)" onmouseout="liOut(this)"><a  class="nav-link active text-white" aria-current="page"  >Shop</a></button>
            </li>
        </ul>
    </div>

//hover backlight
//ON
function liOn(li){
    li.style.content = "";
    li.style.height =  "3px";
    li.style.backgroundColor = "#fff";

}
//OFF
function liOut(li){
    li.style.content = null;
    li.style.height =null;
    li.style.backgroundColor = null;
}

komentarz 15 października 2021 przez VBService Ekspert (252,780 p.)

jescze jeden problem napotkałem chciłem robić jeszcze poświate na tym najechaniu ale box shadow robi mi się na przycisku nie na li

możesz użyć: closest()

function liaOn(li){
    li.style.height =  "2px";
    li.style.backgroundColor = "#fff";
    li.closest('li').style.boxShadow = "1px 1px 1px white";
}
function liaOut(li){
    li.style.height =  null;
    li.style.backgroundColor = null;
    li.closest('li').style.boxShadow = null;
}