• 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
112 wizyt
pytanie zadane 2 sierpnia w JavaScript przez chrystian Obywatel (1,730 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 (118,740 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,730 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,730 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 (118,740 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,730 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,730 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 (118,740 p.)

@chrystian, 

:hover to nie to samo co :before

 

 

0 głosów
odpowiedź 14 października przez chrystian Obywatel (1,730 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 (138,250 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ź 91 wizyt
pytanie zadane 19 października 2020 w HTML i CSS przez nowa Początkujący (450 p.)
0 głosów
1 odpowiedź 34 wizyt
pytanie zadane 13 listopada w JavaScript przez Jacek Śmiel Początkujący (290 p.)
0 głosów
1 odpowiedź 105 wizyt
pytanie zadane 25 marca 2020 w HTML i CSS przez Majki14 Nowicjusz (200 p.)

85,875 zapytań

134,648 odpowiedzi

298,919 komentarzy

56,743 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 912p. - nidomika
  7. 867p. - Michal Drewniak
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 704p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

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.

...