Weebly'de Perspektif Görüntü Vurgu Efekti Nasıl Eklenir?

[bLastX]

Metin2 EP, Valorant VP dahil tüm oyun ürünlerini en uygun fiyatlarla bulabilir, Item ve Karakterlerinizi hızlıca satabilirsiniz. HEMEN TIKLA!

Weebly sitenizde çok sayıda görsel kullanıyor olabilirsiniz ancak kullanıcıların dikkatini çekmek için yalnızca önemli görselleri farklı bir şekilde vurgulamak istiyorsunuz. Örneğin, bir vitrin portföy sayfası oluşturabilir ve çalışmalarınızın görsellerini projeler, fotoğraflar, videolar vb. üzerinde sergileyebilirsiniz. Bu tür portföy görsellerine perspektif vurgulu efekti eklemek kullanıcının dikkatini çeker ve etkileşimi artırır. Bu rehberimizde Weebly sitenizdeki görsellere perspektif gezinme efektinin nasıl ekleneceğini gösteriyoruz . Kodu kopyalayıp sitenize yapıştırabilir ve resim URL'lerini kendi URL'nizle değiştirebilirsiniz.
​

Perspektif Görüntü Vurgulu Efekti​

Perspektif gezinme efektinin nasıl görüneceğini açıklamak zordur. En iyi seçenek görsel olarak göstermektir ve aşağıda gezinme efektli görüntünün bir örneği bulunmaktadır. Perspektif gezinme efektini görmek için fareyi resmin üzerine getirebilirsiniz.

Not: Bu widget öncelikle masaüstü cihazlar için tasarlanmıştır. Bu widget'ı cep telefonlarında kullanmak istiyorsanız, görseli bağlamadığınızdan ve küçük ekranda düzgün şekilde hizalanabilecek daha küçük boyutlu görsel kullandığınızdan emin olun.
​

Bir Görüntüye Perspektif Hovering Efekti Nasıl Eklenir?​

Widget'ı herhangi bir JavaScript olmadan CSS kullanarak oluşturabilirsiniz. Süreç üç basit adımdan oluşur:
​

• Weebly sitenize resim yükleniyor​
• CSS Kodu Ekleme​
• HTML Kodu Ekleme​

Talimatları takip edebilmeniz için her adımı ayrıntılı olarak açıklayalım.
​

Adım 1 – Resim Yükleme​

İlk adım, perspektif gezinme efekti eklemek istediğiniz görüntüyü hazırlamaktır. Kamuya açık alanlardan ücretsiz görseller bulabilir veya Photoshop veya Snagit gibi araçları kullanarak kendi görsellerinizi oluşturabilirsiniz . Weebly'deki görselleri de kullanabilirsiniz ancak bunu yaptığınızda telif hakkı bilgileri eklenecektir.
​

• Weebly hesabınıza giriş yapın ve widget'ı eklemek istediğiniz siteyi düzenleyin.​
• Weebly düzenleyicisine girdiğinizde “Tema” bölümüne gidin ve ekranın sol alt köşesinde görünen “HTML / CSS'yi Düzenle” düğmesine tıklayın. Maalesef Weebly bu düğmenin görünürlüğünü gizlediğinden, düğmeyi net bir şekilde görüntülemek için yakınlaştırmanız gerekebilir.​
• “HTML / CSS'yi Düzenle” düğmesine tıkladığınızda sitenizin kaynak kodunu değiştirebileceğiniz Weebly kod düzenleyicisine yönlendirilirsiniz . Ancak kodu değiştirmemize gerek yok, bir resim yüklememiz gerekiyor.​
• “Varlıklar”ın yanında bulunan + düğmesine tıklayın ve ardından “Dosya(ları) Yükle” seçeneğini seçin.​
• Fareyle üzerine gelme efekti eklemek istediğiniz görseli yükleyin.​

Weebly Sitesine Dosya Yükleme​

• Yüklenen görselin URL'si aşağıdaki gibi olmalıdır:​

https://yoursitename.weebly.com/files/theme/image-name.jpg
or
https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/218853455352650432/files/image-name.jpg

• Ayrıca yüklenen görsel dosyasını seçebilir ve görsel adresini kopyalamak için sağ bölmede gösterilen görsele sağ tıklayabilirsiniz.​

Weebly'de Resim Adresini Kopyala

Şimdi değişikliklerinizi kaydetmek için sağ üst köşede gösterilen “Kaydet” butonuna tıklayın. Kod düzenleyicide ilk kez değişiklik yapıyorsanız temanıza bir ad verip kaydetmeniz gerekir.
​

Adım 2 – Vurgulu Efekti için CSS Kodu Ekleme​

Sonraki adım, yüklenen görüntü üzerinde perspektif görüntü vurgulu efektini göstermek için CSS oluşturmaktır. Weebly editöründe "Sayfalar" bölümüne gidin ve widget'ı eklemek istediğiniz sayfayı seçin. O sayfa için “SEO Ayarları” butonuna tıklayın ve ayarlar bölümünün en altına gidin. CSS kodunu sizler için hazırladık, yapmanız gereken

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

. Resim URL'sini 1. adımdaki kendi resim URL'nizle değiştirdiğinizden emin olun.

<style type="text/css">
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("https://img.webnots.com/2015/07/Image-1.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
.thumb a:after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
}
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>

Editörde aşağıdaki gibi görünmelidir:

​

Adım 3 – HTML Ekleme​

Son adım, içerik alanınızda perspektif görüntüsünü göstermek için HTML eklemektir. Aşağıdaki kodu kopyalayıp bir “Embed Code” öğesini kullanarak içerik alanına yapıştırın . Yine, HTML'nize adım attığınızda doğru resim URL'sini kullandığınızdan emin olun.

<div class="thumb">
<a href="https://img.webnots.com/2015/07/Image-1.jpg">
<span>KungFu Panda</span>
</a>
</div>

Resim Weebly editöründe görünmeyebilir. Sitenizi yayınlayın ve görsele perspektif görsel efektinin eklendiğini görmek için fareyi görselin üzerine getirin​

 

[Carissa]

Paylaşım için teşekkürler.

 

[bLastX]

Paylaşım için teşekkürler.

Rica ederim.