Powiększenie zdjęcia wokół kursora po najechaniu


(Lufcik) #1

Cześć,

Czy da się w CSS zrobić taki efekt lub podobny (chodzi mi o efekt dynamiczny), że po najechaniu kursorem na fragment zdjęcia, fragment wokół kursora się powięszka i zmienia wraz z przemieszczaniem się kursora po zdjęciu??

Przykład użycia poniżej

http://blog.piotrnalepa.pl/demo/powiekszanie-zdjec/

 


(ktoś tam) #2

W CSS się nie da (no dobra, da, ale to byłby po prostu koszmar, a programista dostałby zawału, gdyby to zobaczył). Jak widzisz, na stronie, do której link podałeś, jest napisane, że efekt jest dzięki JQuery. Dobrym rozwiązaniem jest właśnie zrobienie tego za pomocą JQuery.


(Fizyda) #3

Bez JS jest to nie wykonalne w takiej formie w jakiej podałeś w przykładzie.


(ktoś tam) #4

A użycie :hover dla każdego pojedynczego piksela i wyświetlanie innego obrazka dla każdego z nich? :smiley:


(Lufcik) #5

Dzięki Panowie za wypowiedzi. Jeżeli nie ma takiej możliwości, to odpuszczę ten temat i zostanę przy nieco prymitywnym sposobie z CSS i użycia transform-scale. Kompletnie nie znam JS, a tym bardziej jQuery. Strona którą tworzę jest typowo informacyjna i HTML+CSS spokojnie wystarczy.

Temat do zamknięcia. Jeszcze raz dzięki.


(Fizyda) #6

Nie ma czegoś takiego jak hover dla piksela. Hover możesz użyć dla elementu dom.

Możesz użyć nawet pseudoklasy hover i wyświetlić obrazek obok w pełnych wymiarach lub większych niż miniaturka, podobnie jak w przykładzie który dałeś, ale nie uzyskasz efektu przesuwania kursorem myszki i powiększania wybranego fragmentu zdjęcia. Możesz obok miniaturki wyświetlić ten sam obrazek w większych rozmiarach, musisz jedynie odpowiednio napisać kod html i umieścić 2 razy ten sam obrazek ale z różnym ostylowaniem gdzie ustalisz pozycję zdjęcia w dużych wymiarach względem tego w małych no i odpowiedni ich rozmiar. Ogólnie trudniej to zrobić w css+html niż przy użyciu JS, bo trzeba naprawdę dobrze przemyśleć strukturę dokumentu by to zadziałało.


(ktoś tam) #7

To tak w skrócie, chodziło mi o to, aby zrobić masę elementów 1x1 px :D 


(Drobok) #8

Nawet nie wszystkie musiałyby być 1x1, bo ramka o szerokości powiększonej grafiki mogła by być szersza / wyższa :slight_smile:


(Fizyda) #9

Bez sensu, dla miniaturki o wymiarach 350x600px uzyskujesz 210 000 pikseli nawet gdybyśmy to zwiększyli do kwadratów o bokach 10x10px jak proponuje @drobok to masz 21 000 elementów a każdy z nich to osobny tag img czyli masz przynajmniej 21 000 linijek kodu który odpowiada za miniaturkę. Strata transferu, masa pracy dla przeglądarki aby to zinterpretować, jedyny plus że masz jeden obrazek a nie 21k, taniej, szybciej i przede wszystkim czytelniej byłoby zrobić to z js.


(Drobok) #10

Nie trzeba obrazków, jeden obrazek i nakładasz na niego te miniaturowe bloki, ew można by zastosować mapę odsyłaczy :slight_smile:


(ktoś tam) #11

A czy ja mówiłem, że to ma sens? Po prostu udowadniam, że się da :smiley:


(narandill) #12

Najlepiej do tego użyć canvas. Ma lepsze wsparcie na urządzeniach mobilnych, a dodatkowo nie trzeba do tego zaprzęgać dodatkowych bibliotek. Przykład tutaj: http://jsfiddle.net/powerc9000/G39W9/

 


(Fizyda) #13

Użyłeś JS, a co za tym idzie czy zrobisz to za pomocą diva i przesunięcia bg czy za pomocą img w div i marginesów ujemnych i dodatnich, a może za pomocą canvas nie ma znaczenia. Fakt faktem efekt ten średnio będzie dostępny na urządzeniach mobilnych bo ciężko obsłużyć tam evekt mousemove. Zauważyłem też że podany przez Ciebie przykład nie działa na firefoxie, więc to też może być argument przeciw jeśli zależy nam na dostępności rozwiązania.


(narandill) #14

Czytajmy --> https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial dodatkowo przykład znalazłem w G. Można to zrobić lepiej, miał tylko pokazać kierunek, w którym można zrealizować temat. Co do mobilem są dla nich specjalne eventy - wystarczy poszukać…