Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek dla www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Animacja w HTML oraz JavaScript

09 Sie 2018 16:05 648 25
  • Poziom 6  
    Zamieszczam opis problemu w pliku txt Animacja w...script.txt Download (5.96 kB), ponieważ podczas próby stworzenia tematu normalnym sposobem wyświetla mi się strona:

    Access Denied
    You don't have permission to access "https://www.elektroda.pl/rtvforum/posting.php?" on this server.
    Reference #18.2eb51002.1533728562.7e9a175

    Niestety nie mam czasu, aby czekać aż administrator się z tym problemem upora.
    Z góry wielkie dzięki za pomoc. :)
  • Poziom 18  
    Tak od początku to zacząłeś od ambitnego zadania, żeby zrozumieć co jak działa polecam krok po kroku w3schools. com css i javascript.

    Zeby coś przesunac:
    Kod: javascript
    Zaloguj się, aby zobaczyć kod


    Sa to proste rzeczy, jeśli się uczysz to zacznij od prostych tutoriali, pokazujących działanie poszczególnych elementów, transistion, keyframes animation itd, gwarantuje że małymi krokami po tygodniu sumiennych ćwiczeń sam zobaczysz jak banalne jest robienie tego typu rzeczy.
    Polecam mocno:
    https://youtu.be/wj1bwqO0aHk
  • Poziom 6  
    Nie jest to pierwsza strona jaką tworzę. Chcę zrobić tzw. stronę 'wizytówkę' firmy i pracuję właśnie nad galerią robiąc customowy pasek z przesuwającymi się zdjęciami, po których wybraniu wyświetla się większa wersja w innej części ekranu.
    Zwyczajnie nie wiem co powinienem zmienić w skrypcie i w kodzie css, aby nie tylko ostatnia animacja wyświetlała się prawidłowo a wszystkie. Zależy mi na płynnym przejściu, a nie przeskoku "żeby było przesunięte" i dlatego próbuję to zrobić keyframes'ami. Jeszcze dzisiaj wypróbuję kod, który wysłałeś. Dzięki :P
  • Poziom 33  
    Redowyman napisał:
    Po kliknieciu w div #main_image zdjecia powinny sie przesunac o 350 pikseli w lewo. Po drugim kliknieciu o nastepne 350 pikseli. Chcialbym, aby moznabylo tak zrobic do pieciu razy.
    Pięć to zbyt dużo by to ręcznie mnożyć i wpisywać wyniki do CSS. ;) Chyba lepiej użyć transition i zmieniać tylko pozycję, którą policzy procesor. Do przesuwania użyłbym pozycjonowania względnego.

    Redowyman napisał:
    Problem polega na tym, ze po zaladowaniu strony pierwsze zdjecie #first jest juz w pozycji, gdzie rozpoczyna sie ostatnia animacja, czyli przesuniete o 700 pikseli w lewo.
    Bierze wartość z ostatniego 0%.
    Cytat:
    If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to, browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.
    Źródło
  • Pomocny post
    Poziom 18  
    Js który wstawiłem będzie działał ale jeśli oprzesz cssclass na transistion, postaram się dziś wrzucić przykład, ogólnie zrobiłbym div że wszystkimi zdjęciami, to które ma być widoczne ustawił opacity 0 a pozostałe na 1, do tego transistion all, i zmiana opacity i left w javascript powinno fajnie działać.

    html musiałem wrzucić jako obrazek, ale to materiał na osobny temat? :)

    opacity wyciąłem ostatecznie, ale jak masz ochotę to możesz dopisać do funkcji spadanie opacity wraz z przesuwaniem na przykład.

    Animacja w HTML oraz JavaScript
    Kod: css
    Zaloguj się, aby zobaczyć kod

    Dodano po 3 [godziny] 36 [minuty]:

    Kod: javascript
    Zaloguj się, aby zobaczyć kod
  • Pomocny post
    Poziom 33  
    Nie
    Kod: javascript
    Zaloguj się, aby zobaczyć kod
    tylko
    Kod: javascript
    Zaloguj się, aby zobaczyć kod
    Trzeba było podejrzeć, ile wynosi pbI.offsetLeft przy pierwszym kliknięciu. Na pewno nie 0.
  • Poziom 6  
    Racja, wszystko działa jak powinno. Nie wpadłem na to, żeby posłużyć się mnożeniem, zamiast odejmowaniem i dodawaniem oraz tak naprawdę nie wiem do czego służy offset :P Dzięki wielkie, jak będę miał jeszcze jakiś problem to was powiadomię, więc na razie tematu nie zamykam :)
  • Poziom 33  
    Dodawać też można, tylko do odpowiedniej wartości.

    Redowyman napisał:
    [...] nie wiem do czego służy offset :P
    https://www.w3schools.com/jsref/prop_element_offsetleft.asp Trzeba jednak zwrócić uwagę, jak zachowuje się, gdy nie ma niestatycznie umiejscowionego rodzica. Swoją drogą ciekawe, jak wygląda dokument HTML pisany z takim podejściem...
    Ciekawostka: Uruchom pierwszy przykład z linka na Firefox i innej przeglądarce. Pokażą 118, a później dopisz
    Kod: css
    Zaloguj się, aby zobaczyć kod
  • Poziom 18  
    Do offset lepiej używać outline:
    Kod: html
    Zaloguj się, aby zobaczyć kod
  • Poziom 6  
    Witam ponownie :)
    mam problem po zabawie z animacją niebieskiego pasku na górze na stronie galerii. Na każdej innej stronie ten problem nie występuje.

    Element html jest o 183 piksele za wysoki i jakkolwiek nie próbowałbym ustawić jego wysokości za pomocą np.
    Kod: css
    Zaloguj się, aby zobaczyć kod


    strona dalej pozostaje za wysoka tak jak na tym obrazku.
    Animacja w HTML oraz JavaScript
    Mój wskaźnik myszy znajduje się na błękitnym polu na dole strony (pod stopką).

    Dodatkowo, po najechaniu na zakładki kolor od razu powinien się zmieniać na czerwony, natomiast występuje animacja w czasie zmieniania się koloru niebieskiego paska na górze.

    Załączam również plik z kodem danej strony. Rozpakować i odpalić.
    Z góry dziękuję jeszcze raz za pomoc :lol:
  • Poziom 33  
    Redowyman napisał:
    Element html jest o 183 piksele za wysoki i jakkolwiek nie próbowałbym ustawić jego wysokości za pomocą np.
    Kod: css
    Zaloguj się, aby zobaczyć kod


    strona dalej pozostaje za wysoka tak jak na tym obrazku.
    Animacja w HTML oraz JavaScript
    Tak właśnie działa position: relative (#container_data, #footer_galeria) - miejsce pozostaje zarezerwowane, mimo, że element jest przesunięty. Jeśli coś nie działa to upraszczaj kod a nie dokładaj.

    Redowyman napisał:
    Dodatkowo, po najechaniu na zakładki kolor od razu powinien się zmieniać na czerwony, natomiast występuje animacja w czasie zmieniania się koloru niebieskiego paska na górze.
    Zdaje się, że występuje to tylko w Chrome i wynika z tego, że tam jest miejsce czerwonego tła. Gdy poprawisz pozycjonowanie problem powinien zniknąć.

    Poza tym strona w ogóle się nie dopasowuje do wielkości okna.
  • Poziom 18  
    Nie ustawiaj sztywnych wymiarów dla html czy body, w body zalecam wstawić główny element <div> , który będzie się wpasowywał w stronę, strona nie jest w żadeń sposób responsywna, więc jak ma się dopasowywać do okna? Prosty przykład - trzeba zamienić * na <
    Kod: html
    Zaloguj się, aby zobaczyć kod
  • Poziom 33  
    Dotnetvb napisał:
    w body zalecam wstawić główny element <div> , który będzie się wpasowywał w stronę,
    Po co?

    Dotnetvb napisał:
    strona nie jest w żadeń sposób responsywna, więc jak ma się dopasowywać do okna?
    Właśnie o to chodzi, że nie jest.

    Dotnetvb napisał:
    .mainCont{
    width:100%;
    height:100vh;
    background-color:black;
    }
    Po co ustawiasz szerokość? height:100vh; może uniemożliwić ukrycie paska adresu na urządzeniach mobilnych. Jeżeli nie jest wymagane, nie stosujmy.

    Dotnetvb napisał:
    .flow{
    top:50%;
    left:50%;
    position:fixed;
    transform:translate (-50% -50%);
    color:white;
    }
    Brakuje przecinka. Wstawia mi spację przy kopiowaniu przed ( i to też powoduje, że nie działa.
  • Poziom 18  
    Przyklad gdzie wymiarowanie html może przynieść odwrotne skutki, to umieszczenie elementu iframe i wyświetlenie w nim całej innej strony, elementy html body wystąpią dwukrotnie, przykład to użycie gotowych kontrolek m.in freetextbox.

    Strona autora na urządzeniu mobilnym wyświetli się w dużym rozmiarze że scrollami pionowym i poziomym, obecnie coraz częściej użytkownicy odwiedzają strony korzystając z telefonów, wymiarowanie strony na sztywno jest stosowane coraz rzadziej.

    Może podejść inaczej do tematu i zastosować viewport:

    https://www.w3schools.com/css/css_rwd_viewport.asp
  • Poziom 33  
    @Dotnetvb Piszesz jakby jeden styl dotyczył obu dokumentów a wymiary tego samego okna...
    Viewport trzeba ustawić by nie pozwolić przeglądarce decydować, jak przeskalować stronę.
  • Poziom 18  
    Autorze, otwórz stronę w Firefox, chrome w trybie developer (F12) jest możliwość wyłączania poszczególnych stylów, tak chyba najszybciej wylapiesz w czym problem, szukaj w stylach elementu html i górnego paska nawigacji.

    @LED5W może inaczej, mam zupełnie inne podejście do tworzenia stron niż ten przykład, w zależności od potrzeb sięgam po bootrap czy inne frameworki, trzeba iść z duchem czasu i przyjąć responsywnosc jako standard, definiujac element z szerokością stała np 1024 px, strona będzie ok na ekranie komputera, ale telefon czy tablet pokaże ułamek strony plus paski przewijania, ale gdy ustawimy width np na 100%, można na prawdę fajnie pokazać stronę i na pc i na urządzeniu mobilnym. Ja praktycznie wyparlem stosowanie stałych wartości wymiarów, stale jakie ustawiam to min-width, min-height, max-height itd.
  • Poziom 6  
    Pokombinowałem i sobie poradziłem w końcu. Ta konkretna strona nie musi się dostosowywać do rozmiaru ekranu odbiorcy, więc z tym nie ma problemu :)
    Kiedyś wrzucałem stronę na darmowy polski hosting i nie miałem z tym problemów, ale teraz wykupując hosting www na dreamhost oraz domenę na ovh mam problem z połączeniem tych dwóch serwisów. Adresy DNS z dreamhost ustawiłem w panelu klienta na stronie ovh (bo tak miałem zrobić, prawda?). Zmiany zostały wprowadzone, ale pliki, które wgrałem za pomocą FTP (Filezilla) na serwer dreamhost się nie pojawiają na stronie, a zamiast tego dalej jest "strona startowa" z serwisu ovh. Nie wiem czy błędnie mam skonfigurowaną domenę na ovh, czy na dreamhost. Czy muszę utworzyć katalog o konkretnej nazwie i tak wrzucać pliki razem z plikiem index.html? Jak to ugryźć?
  • Poziom 33  
    Redowyman napisał:
    Pokombinowałem i sobie poradziłem w końcu.
    Pokaż. :)

    Redowyman napisał:
    Ta konkretna strona nie musi się dostosowywać do rozmiaru ekranu odbiorcy, więc z tym nie ma problemu :)
    A to ciekawe.

    Skoro po wpisaniu adresu wyświetla się strona hostingu to DNS najprawdopodobniej jest ustawiony poprawnie. Na hostingu www podałeś jaką domenę masz?
  • Poziom 6  
    [img-0]Animacja w HTML oraz JavaScript

    Dalej mam ten pasek po prawej ale strona się nie przesuwa. Tak jakby ten pasek był cały i nie miał miejsca, żeby się przesunąć. Oczywiście próbowałem zmniejszać wysokość strony, ale ten pasek uparcie tam stoi. Nie wiem dlaczego tak jest, poddaję się z tym, ale ważne, że strona nie chodzi w pionie.

    Po wpisaniu adresu wyświetla się strona hosta domeny, nie hosta strony www.
    Zarejestrowałem domenę na ovh.
    Mam hosting strony na dreamhost.
    Dodałem domenę z ovh na dreamhost.
    Adresy DNS przypisane do domeny ovh zmieniłem na te podane na stronie dreamhost.
    Mimo wszystko wyświetla się strona z ovh, mówiąca, że domena została poprawnie zarejestrowana, jestem w jej posiadaniu i inne takie. Powinna pokazywać się strona dostępna na dreamhost. Czegoś nie zrobiłem, czy wykonałem błędnie?

    Dodano po 8 [minuty]:

    Dobra, nieważne. Mimo, że adresy DNS zostały zaktualizowane wczoraj (zmieniłem je 3 dni temu) to dosłownie przed chwilą 'wskoczyła' strona z dreamhost. Jak jeszcze pisałem poprzedni post to jej nie było :P
  • Poziom 33  
    HTML miałeś pokazać. ;)

    A, pomyliło mi się. Jeśli ustawiłeś zewnętrzne serwery DNS, strona OVH nie powinna się wyświetlać.
  • Pomocny post
    Poziom 18  
    Aby ukryć oba paski przewijania na przykład, używasz w stylu:
    Overflov:none;
    Lub
    Overflov:hidden;
    Zlokalizuj element, który wyświetla pasek, pewnie html i dodaj do stylu elementu powyższy wiersz.
  • Poziom 33  
    @Dotnetvb Nie powinno być paska bez takich kombinacji.
  • Poziom 6  
    @LED5W Masz rację :P

    overflow działa, więc wszystko przywróciłem tak jak było i dałem ten overflow. Teraz wszystko wygląda tak jak ma być. Jeszcze tylko małe poprawki w niektórych miejscach i kuniec :P

    Dzięki wam obu :lol:
  • Poziom 33  
    Redowyman napisał:
    overflow działa, więc wszystko przywróciłem tak jak było i dałem ten overflow.
    To źle zrobiłeś.
  • Poziom 6  
    Czemu? Wiem, że strona fizycznie dalej tam jest, ale nie można jej przesunąć w dół. Jest statyczna w punkcie, w którym ma być statyczna. Czyli tak jak ma być.

    Dodano po 50 [sekundy]:

    A kod który pisałem tylko powiększał plik, choć nie dużo to zawsze. Więc co za różnica?

    Dodano po 9 [minuty]:

    Dodałem overflow do głównego kontenera (nie html, czy body). Działa? Działa! A jak działa to nie ruszać :D Na mniejszych rozdzielczościach niż full HD strona prawidłowo ustawia się na środku i pokazuje się scroll po prawej. Tak ma być i niech tak będzie :P
    Dzięki jeszcze raz :)