Orta gibi görüntüleri nasıl yakınlaştırılır
Orta blog blog platformu kullanır özel görüntü yakınlaştırma efekti blog sayfalarında. Kullanıcı bir resmi tıkladığında otomatik olarak daha büyük bir boyuta yakınlaştırır.
Harika bir etki ve kesinlikle Medium'a özgü, ancak hiçbir zaman kolayca kopyalanabilecek bir şey olmadı.
Şimdi MediumLightbox senaryo, her zamankinden daha kolay. Bu JS betiği hafif ve herhangi bir web sitesine veya bloga eklenmesi kolaydır.
Bunun nasıl çalıştığını görmek isterseniz, canlı demo sayfası oluşturan Davide Calignano tarafından barındırılan.
Tam geçiş ve özel animasyon efekti için çivilemeye zaman harcadı. Ortama yakınlaştırma görüntüsünün ayna görüntüsünü oluşturun. Bütün kütüphane saf JavaScript ile yazılmış, bu yüzden herhangi bir 3 güvenmiyorrd jQuery gibi parti komut dosyaları.
Ayarlamak için küçük bir JS bilmeniz gerekecek, ancak kesinlikle bir uzman olmanıza gerek yok.
Her görüntü alabilir data- * nitelikleri tam boy yüksekliğini ve genişliğini ayarlamak için dinamik olarak çekilmiş lightbox eklentisinden. Kurulum kodu çok basittir ve görüntüleri kendileri hedefleyin, veya gibi kaplar
Eklentiyi çalıştırmak için ihtiyacınız olan tek kod pasajı:
MediumLightbox ( 'figure.zoom etkisi);
Fonksiyonun içinde seçiciyi geçmek tüm elemanlar için (örneğin;. .yakınlaştırma etkisi sınıf. Bu sınıf özel olarak tanımlanmış MediumLightbox stil sayfasında, bu yüzden bunu sayfanızda da kullanmak en iyisidir.
Ve bir kez ayarlandı, hepiniz hazırsınız.!
Sayfanızın içerik alanında, tüm görüntüleri bir
Bu betiğin bir kopyasını indirip başlamak için sadece GitHub deposunu ziyaret edin. Burada da bulacaksınız kod parçacıklarıyla birlikte belgeler hızlı ayarlamak için kopyalayabilirsiniz.
