Sayfaları çevirmenin etkisi. Sayfa çevirme programları. Farklı cihazlar için farklı resimler nasıl gösterilir?

Görüntüler veya metinler gibi herhangi bir içeriği kullanabilirsiniz. Bu eklenti, kitap şeklinde yapılmış bir resim galerisi oluşturur. Fikir, kitap sayfaları gibi içerikleri çevirmek ve sayfalara sola açılan kenar çubuğu menüsünden erişmektir. Özelleştirme komut dosyasında yapılandırılmıştır. Kaydırma dokunmatik cihazlar için anlamlı olsa da, normal tarayıcılar için sürükleme yapılacaktır. Çalışanların fotoğraflarının altüst olduğu siteleri gördünüz mü?

Farenizi çalışanın resminin üzerine getirin ve resim, çalışanın adını göstermek için üzerine gelecektir.

• Dosyayı açın.
• Dosyayı sitenize yükleyin.

• Daha sonra arayacağımız sınıf, basamakları olan konteyner sınıfında.
• Varsayılan olarak görüntülenecek resim. arka konteyner sınıfı.
• Bir kapak oluştuğunda gösterilecek içerik.

Başlık etiketi içinde, aşağıdaki kodu aşağıdaki sırayla indirin. Son sonucu görmek için web sitenizi bir tarayıcıda açın. Yatay yansıma efektini görüntülemek için resmin üzerine gelin. Ayrı olarak indirmeniz gerekir. Bu kütüphane kişisel kullanım için ücretsizdir. Dijital bir kitabın sayfasını çevirmek, içeriği sunmak ve daha fazla okuyucu çekmek için harika bir yoldur. Sayfayı belgeleriniz için çevirmenin etkisi nasıl getirilir?

En iyi sayfa çevirme deneyimine ve kitap arayüzüne sahip bir flipbook oluşturun. Kitabın her sayfasını elle çevirebilir veya animasyonun tadını çıkarırken otomatik olarak oynatabilirsiniz.

Birden fazla içe aktarma formatını destekleyin. Sayfanın tamamı veya bir kısmı için bir içe aktarma sayfası tanımlayın.

Modern tarayıcılarla uyumlu ve mobil cihazlar.



Bu programı ücretsiz olarak indirebilir ve kullanabilirsiniz. Ücretsiz kullanıcılar kitabı İnternetten indirebilir.

Öncelikle, “Dosyaları Al” panelinde belgenizi görüntülemeniz ve açmanız ve ardından “Şimdi Al” düğmesini tıklamanız gerekir.

Olağandışı arama formu

İkincisi, şablon bölmesinde bir şablon seçin. Üçüncüsü, benzersiz bir arka plan ve maç düğmesinin rengi ile harika bir tema yapın. Zamandan tasarruf etmek istiyorsanız, program önceden yüklenmiş birçok tema sunar. Dördüncü olarak, bu adım isteğe bağlıdır. Her sayfanın başlığını değiştirmek için basitçe Yer İşareti panelini açın. Son olarak, çevrimiçi olarak indirelim ve yarattığımız flipbook'u insanlarla paylaşalım.

Temel işlevsellik, kısa resimlerle birkaç görüntüye ve boyutlarına dayalı yeni bir galeri türü oluşturmak olacaktır. En iyi yol   eylemde görmek kendiniz yüklüyor. Eklentiyi kurun ve etkinleştirin, sonra tek yapmanız gereken sayfaya kısa bir kod eklemek.

Ve bu aldığınız sonuçtur. Ama hangi kara büyü oluyor? Aslında bu oldukça basit. Böyle bir şey yaratmayı öğrenelim. üzerinde bu an   Bir test ortamınız olsaydı harika olurdu, böylece malzemeyi parçalayabilir ve test edebilirsiniz. Dosya ve klasörün basit ve benzersiz bir adı olmalıdır, bu nedenle mevcut eklentilerle çakışmaları önlersiniz. O zaman dosyamızın ana içeriği şöyle gözüküyor.

Şimdi bazı önemli dış varlıkları dahil etmemiz gerekiyor. İçin gerekli harici dosyalar temel fonksiyonlar   Bunlar. Sadece komut dosyası ve stil etiketleri eklerseniz, bazı problemleriniz olur. Dış unsurları üç ile çağırırız. çeşitli şekillerde: işte buradalar.

Dış komut dosyalarını çağırırken göz önünde bulundurmanız gereken önemli şeylerden biri, bu eklentiye bağlı olacak daha fazla koda sahip olmaktır. Bu, temel olarak, dosyanızın üstbilgide mi, altbilgide mi çağrılacağını belirler.

Kısa kod oluşturma adımları ile başlayalım. Çok basit, sadece bir kısa kod tetikleyici ve çalıştırılacak bir işlev eklemeniz gerekiyor. Şimdi fonksiyonumuzu yaratmamız ve niteliklerimizi almamız gerekiyor. Ancak bazı özellikler isteğe bağlı olabilir; bu, onlar için varsayılan değerler oluşturmamız gerektiği anlamına gelir.

Onları fonksiyonumuzun ilk bölümünde görebilirsiniz. Buradaki bir diğer önemli nokta, derginin tarzını kullanırsak boyutu ayarlamaktır. Artık istediğiniz gibi özelleştirebilir ve değiştirebilirsiniz, ek parametreler ekleyebilir, sizin için işe yaramayacakları düzenleyebilir veya diğer eklentilerle birleştirebilirsiniz.

Belki nasıl yapıldığını öğrenmek istersin? E-kitap kullanıcıyı nasıl memnun etmeli? Bugün piyasada pek çok yüksek kaliteli okuyucu ile, bu özelliği oldukça iyi anlaşılmış gibi görünüyor. Ancak, elektronik okuma algısını özelleştirmenin mümkün olup olmadığını merak ettik. Bir sonraki sayfaya mümkün olduğunca çabuk gitmek isteyenler olacak. Sonra, sayfanın basılı biçimde aynı şekilde dönüştürülmesini isteyenler olacaktır.

Referans düzlemini ayarlama

Basılı bir kitabı okurken bunu hiç fark ettiniz mi, bazıları okurken yavaşça sayfa üzerinde kayıyorlar, bazıları ise daha agresif bir manevraya sahip bir sayfayı çevirirken? Ayrıntıları atlamayı tercih ederseniz, sayfanın altında etkileşimli bir gösteri vardır. Kurmamız gereken ilk şey sayfa döndürme algoritması için referans noktasıydı. Algoritmamız tamamen düz geometriye dayandığından, bağlantımızı sadece iki boyut kullanarak özelleştirmek güzel olurdu.

Sağdaki şekildeki üst rakam, varsayımsal bir kitaptan “sayfa” içeren standart üç boyutlu bir koordinat sistemidir. Bununla birlikte, bu etki görsel olarak çekici değildir, ancak kitabınızda karton sayfalar varmış gibi oldukça elverişsiz ve serttir. Sonuç olarak, algoritma basit Öklid geometrilerinden biri haline gelir. Kesişme noktasında sahip olduğunuz hangi üçgen tamamen sayfa döndürme efekti türüne bağlıdır, algoritmamızı geliştirmeye karar verdik, böylece iki sayfanın kesişimi bir ikizkenar dik üçgen oluşturur.

CSS animasyonu kullanmanın harika örnekleri

Daha ilginç bir görsel efekt sağlayabilen diğer üç taraflı geometrik şekillerin kullanılması da mümkündü, ancak ikizkenar doğru üç açı belki de en basit ve belki de en kolay anlatılması en kolay olanı. Varsayılan olarak bu sahnenin merkezidir. Rotasyonun başka bir noktaya değinmesini istiyorsanız, yansıtma perspektifini ayarlamanız gerekecektir. İkizkenar üçgen iki eşit tarafa sahiptir. Ek olarak, her sayfanın genişliğini, orijinal konumundan dönme açısına göre ölçekleriz.

Bunu üç tarafı da √2 ile çarparak normalleştirirseniz, doğru ikizkenar üçgen için yukarıda bahsettiğimiz bir en boy oranına sahip olduğumuzu görebilirsiniz. Şu anda, bir sonraki sayfa kitaptaki sayfanın görünümünü ve sırasını yakalamaya çalıştığımızda, geçerli sayfadaki “kıvrılmasını” başlatır. İnteraktif gösteride göreceğiniz bir not, sayfa dikdörtgenlerini yansıtmak için yapay dikdörtgenler eklememiz gerektiğidir.

Düzenli ikizkenar üçgen oluşumu

Sayfalar kesiştiğinde ve bir sonraki sayfa geçerli sayfa üzerinde “kıvrılmaya” başladığında, yalnızca bir sonraki sayfanın ölçeklendirmesini değil, aynı zamanda bir sonraki sayfanın gölgelendirilmiş geçerli sayfayı görüntülemesini veya gizlemesini sağlayan maskelerin doğru yerleşimini hesaplamak için bir yol bulmamız gerekir. Sağdaki gösterimi kullanarak, açıklığa kavuşturacağımızı umuyoruz.

Bu nedenle matematiği az görsel olan bir yaklaşımla basitleştirmeye karar verdik. Bitiş noktaları arasındaki fark çok az farkedilir. Bu, bizi sonraki sayfayı “açan” maskenin genişliği ifadesiyle bırakır. Ayrıca sonraki sayfayı ölçeklendirmek, böylece dönüş tamamlandığında tam genişliğine geri dönecek şekilde, dönüş açısı 45 ° 'den küçük olduğunda yaptığımız şeyi “tersine çevirmek” meselesidir. Maskelerinizi üçüncü boyutta döndürmek isteseniz bile, flaşı maskeleri yokmuş gibi gösterip göstermesini sağlayamazsınız.

Bu, gerçek sayfaların hareketini simüle etmek için sabit genişliğe sahip hayali dikdörtgenler eklemenin ve maskelerin konumlarını göreceli olarak konumlandırmalarını sağlamak için iyi tanımlanmış bir “ipucu” vermemizin ana nedenidir. Efekti oluşturmak için renk dolgusu ayarlama katmanını, degrade katmanının maskesini ve deformasyonunu kullanacağız.

Bu efekti varolan bir resme uygulayabilir veya örneğin bir web sitesindeki kenar çubuğunda kullanabileceğiniz bir renk bloğuna uygulayabilirsiniz. Köpeğin görüntüsünün yığındaki en alt katman olması önemlidir. Bir arka plan katmanı varsa, sadece bir katmanınız olsun diye silin. Sonuç böyle bir şey olmalı.

Sadece katman maskesi seçilecektir. Şimdi görüntünün sol alt köşesinde küçük bir çapa noktası ızgarası görmelisiniz. Bu günlerde kitaplarda benzer şeyler oldu, neredeyse hiç kimse kağıttan yapılmış kitap okumuyor, çünkü çoğunlukla kitap kapağı ya da ücretsiz indiren bir e-kitap okumak çok daha kolay. Ama eğer fiyatlara dokunursak; e-kitaplar, kağıt kitaplardan daha ucuzdur ve bazı kitap okuyucular, tüm kağıt kitaplardan daha az değere sahiptir.

Sitenizin rehabilitasyonu

Tüm metni, bağlantıları ve görüntüleri uzun ve sıkıcı bir sayfada görüntülemek yerine, sunumu, çevirmeli sayfaların efektleriyle daha etkileşimli ve hareketli hale getirebilirsiniz. Değişken bildirimler ve olay dinleyicisi aboneliği gibi ilkel kuralların bazıları bu makaledeki snippet'lerin dışında bırakılmıştır, bu nedenle çalışma örneğine başvurduğunuzdan emin olun. Joe Lambert, sizi portföyünüzdeki resim galerisini geliştirmek için çarpıcı bir sayfa döndürme efekti oluşturmaya davet ediyor.