• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Javascript animacja lini jak na zdjęciu

+1 głos
109 wizyt
pytanie zadane 2 sierpnia w JavaScript przez chrystian Obywatel (1,720 p.)
edycja 2 sierpnia 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

+1 głos
odpowiedź 2 sierpnia przez pablop76 VIP (117,840 p.)
wybrane 3 sierpnia 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 przez chrystian Obywatel (1,720 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 przez chrystian Obywatel (1,720 p.)

@pablop76, mam to lecz wolałem w javascript

li{
    position: relative;
}
li:hover{
    content:"";
    height: 4px;
    background-color: #fff;
}
 
komentarz 3 sierpnia przez pablop76 VIP (117,840 p.)

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

komentarz 3 sierpnia przez chrystian Obywatel (1,720 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 przez chrystian Obywatel (1,720 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 przez pablop76 VIP (117,840 p.)

@chrystian, 

:hover to nie to samo co :before

 

 

0 głosów
odpowiedź 14 października przez chrystian Obywatel (1,720 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>

JS

//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 przez VBService VIP (129,150 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;
}

 

Podobne pytania

0 głosów
1 odpowiedź 86 wizyt
pytanie zadane 19 października 2020 w HTML i CSS przez nowa Początkujący (450 p.)
0 głosów
1 odpowiedź 92 wizyt
pytanie zadane 25 marca 2020 w HTML i CSS przez Majki14 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 142 wizyt
pytanie zadane 19 grudnia 2018 w HTML i CSS przez kubekszklany Bywalec (2,870 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

85,253 zapytań

134,062 odpowiedzi

297,277 komentarzy

56,338 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...