Witam,
Jak uzyskać efekt po klikaniu w ikony, podobny do tego na stronie główej: link?
0
2
Generalnie nie ma tutaj nic trudnego.
Masz obrazek i ikony na stronie w DIV o rozmiarze większym niż ekran a po kliknięciu w ikonkę ustawiasz go w odpowiednim miejscu i pokazujesz okienko...
Pewnie wszystko porozmieszczanie jako position:absolute.
10 - 20 linijek JS załatwiłoby sprawę.
Tu masz nawet ten obrazek: https://cdn.lp.stage.arcnes.io/images/background.svg?imwidth=1920
Z czym konkretnie masz problem?
0
Dzięki. Znajdę podobny przykład np. na https://codepen.io?
1
Mateusz T napisał(a):
Dzięki. Znajdę podobny przykład np. na https://codepen.io?
Skąd ktoś może wiedzieć czy znajdziesz?
Spróbuj to zrobić samemu i tyle... chyba, że szukasz gotowca to wówczas życzę miłych i owocnych poszukiwań...
0
Raczej szukam czegoś podobnego/w innym kontekście żeby przeanalizować kod
0
Wiem już jak zrobić zoom, ale jak zrobić zoom w konkretne miejsce?
0
Ktoś coś podpowie?
0
Masz obrazek z tłem ograniczony kontenerem z overflow hidden i jak w niego klikasz to po kliknięciu masz jego tło, które jest obrazkiem ustawić tak aby przesunąć w porządne miejsce powiązane z daną ikonką i to koniec filozofii. Powiąż każdą klikalną ikonkę z parametrami:
- position absolute leftX, leftY i zoom i po kliknięcie po prostu je zastosuj dla tła.
Raczej nikt nic więcej nie podpowie bo ogólna idea działania jest prosta i została opisana a jako przykład masz już stron, którą sam wskazałeś.
Jeśli analiza tej strony lub zrozumienie koncepcji stanowi dla Ciebie problem to znaczy, że wiesz zdecydowanie zbyt mało aby zacząć to robić i prawdopodobnie musisz nadrobić ogóle braki w podstawach HTML, CSS i JS.
1
Mateusz T napisał(a):
Wiem już jak zrobić zoom, ale jak zrobić zoom w konkretne miejsce?
Mateusz T napisał(a):
Ktoś coś podpowie?
Cała magia jaką dostrzegam przy mechanizmie zoom'owania to zmiana marginesów i zabawa właściwością transform
.slide-main {
margin-left: 0;
margin-top: 0;
transform: scale(1);
}
.slide-1 {
margin-left: 300px;
margin-top: -100px;
transform: scale(2.5);
}
.slide-2 {
margin-left: 600px;
margin-top: -150px;
transform: scale(2.5);
}
/* itd */
:p