Jak osiągnąć taki efekt?

pytanie zadane 24 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
zamknięte 24 lipca 2018 przez Layoutowiec

Witam Wszystkich!

Chciałbym osiągnąć taki efekt aby:

Po wejściu na stronę logo pojawiało się większe na środku ekranu a następnie po kilku sekundach przemieściło się (w tym samym czasie stopniowo zmieniając wielkość) w lewy górny róg i przypięło się do menu (menu ma być "sticky")

Dzięki za poświęcony czas!

Ps. Będę wdzięczny jak ktoś przynajmniej poda jakiegoś linka bo sam nic nie mogę znaleźć

komentarz zamknięcia: Dzieki wspaniałym osobom udało mi się rozwiązać problem

komentarz 24 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

Hasło klucz: preloader

komentarz 24 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

A czy to nie są efekty ładowania?

komentarz 24 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

To jest efekt ładowania ale do tego będzie Ci potrzebny jakiś prosty preloader - najpierw wyświetla się preloader z Twoim logiem a potem tylko to logo się przemieszcza (tak na prawdę kończąc działanie preloadera).

komentarz 24 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Czy aby wprowadzić taki preloader na stronę wystarczy do strony dodać kod. I jak sprawić aby wyświetlał on moje logo lub jakiś napis

komentarz 24 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

Czy aby wprowadzić taki preloader na stronę wystarczy do strony dodać kod.

Tak, na tym polega programowanie - dodając jakąś funkcjonalność dodajesz kod.

I jak sprawić aby wyświetlał on moje logo lub jakiś napis

Po prostu w zawartości tego diva dajesz jakiś tekst

1 odpowiedź

odpowiedź 24 lipca 2018 przez cz3ran Stary wyjadacz (13,380 p.)
wybrane 24 lipca 2018 przez Layoutowiec

Najlepsza

Na początku ustawiasz swoje logo z position: absolute na środku, dając właściwość left: calc (50% - 1/2 szerokości logo). Następnie tworzysz drugą klasę, która:

zmienia właściwiość left na np. 0
zmienia position na fixed
zmienia width i height dla logo

Żeby uzyskać efekt płynnego przejścia, używasz właściwości transition - w moim przypadku transition: all .5 ease-out <-- tutaj możesz poeksperymentować.

Następnie w JS przy pomocji funkcji setTimeout, opóźniasz funkcję, która doda tą Twoją drugą klasę do elementu loga.

Prosty przykład: https://codepen.io/Czeran/pen/wxdyxE

komentarz 24 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Ok dzięki za pomoc :)

komentarz 24 lipca 2018 przez cz3ran Stary wyjadacz (13,380 p.)

Cieszę się że mogłem pomóc :) Pozdrawiam

komentarz 24 lipca 2018 przez pablop76 VIP (123,180 p.)

dałoby się również osiągnąć to bez js

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.logo {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: red;
  left: calc(50% - 100px);
  animation: left--top 2s normal forwards;
  animation-delay: 2s;
}
@keyframes left--top {
    from {left: calc(50% - 100px); width: 200px; height: 200px;}
    to {left: 0px; width: 100px; height: 100px;}
}