Mixer zdjęć

Mixer zdjęć w CSS
Dodano: Luty 22 2018

Jak zrobić mixer dwóch zdjęć tak żeby można było przesuwać obraz? Dowiedz się już teraz :D

Dobra zadanie jest dość proste chodź nie oczywiste na pierwszy rzut oka. Mamy dwa zdjęcia i musimy sprawić żeby można było przesuwając kulką na dole odsłaniać i zasłaniać jednym zdjęciem drugie. Czysty CSS - 0% JS :) Podołacie? Jak nie to na dole wskazówki :)

Pamiętaj: efekt raczej dostępny tylko na nowszych przeglądarkach, chociaż w starym Safari (6.1) też dawał radę o ile "domyślny" width ustawić na 2% a nie na 50%.

  • Ułóż zdjęcia warstwami, "jedno na drugim" za pomocą position:absolute;
  • Wykorzystaj resize:horizontal; aby móc "górne" zdjęcie zmieniać ciągnąć jego dolny prawy róg.
  • Nałóż na róg kuleczkę albo inny kształt jako pseudoelement :before lub :after umieszczony "absolutnie" w rogu zdjęcia.
  • Żeby zrobić "szynę" to musi ona też być elementem absolutnym tylko pobaw się z-indexami tak żeby była pod kulką ale nie pod zdjeciami.
  • Foty muszą być tej samej wielkości. Jak potrzebujecie do testów to znajdziecie moje pod adresem:
  • http://geekfactory.pl/helper/1/1.jpg
  • http://geekfactory.pl/helper/1/2.jpg

 

Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.