Ali @mintik
8 Ağustos 2020 0:22

Immersive.js

ImmerSive

Slider uygulamalarının  genel amacı içerik kaydırma için kullanılır. Bu kısmı bilmeyen yoktur  sanırım. Nadiren slider uygulamalarında  farklı özellikler  bulunur. Kodlamaları farklı bile olsa  çoğunun çalışma şekli  aynıdır. Hepsi  birbirinin kopyası gibi  görünür. Bu  seferki slider örneğinin  çalışma şekli daha önce  hiç karşılaşmadığım türden. Sağ tarafta  resim, sol tarafta resim açıklaması  bulunuyor. Sağ ve sol ok  tuşlarına tıklayarak yada alt kısımda bulunan küçük noktacıklara tıklayarak içerikler  arası geçiş yapılabiliyor. İşin buraya  kadar  olan kısmı  diğer  bütün slayt  eklentilerinde olduğu gibi  görünüyor. Immersive slider uygulamasını diğerlerinden  farklı kılan özellik ise her  slayt geçiş işlemi  sırasında sağ tarafta  bulunan resmin aynısı  ama  daha bulanık hali  slayt çerçevenin arkaplanında tam boy olarak hareket  ediyor. Yanlız bulanık resim otmatik Immersive uygulaması tarafından oluşturulmadığı için kendiniz düzenlemek zorundasınız. Her slayt için bir normal resim bir de bulanık resim ayarlamanız gerekiyor.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

js vs css dosyaları :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="jquery.immersive-slider.js"></script>
 <link href='immersive-slider.css' rel='stylesheet' type='text/css'>

 

JavaScript :

<script type="text/javascript">
 $(document).ready( function() {
 $("#immersive_slider").immersive_slider({
 container: ".main"
 });
 });
 </script>

Css :

Demo sayfasında kullanılan kodlar.

<style>
 html {
 height: 100%;
 }
 a {
 text-decoration: none;
 } 
 .page_container {
 max-width: 960px;
 margin: 50px auto;
 }
 .immersive_slider .is-slide .content h2{
 line-height: 140%;
 font-weight: 100;
 color: white;
 font-weight: 100;
 }
 .immersive_slider .is-slide .content a {
 color: white;
 } 
 .immersive_slider .is-slide .content p{
 float: left;
 font-weight: 100;
 width: 100%;
 font-size: 17px;
 margin-top: 5px;
 }
 </style>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="main">
 <div class="page_container">
 <div id="immersive_slider">
 <div class="slide" data-blurred="img/slide1_blurred.jpg">
 <div class="content">
 <h2><a href="http://mintik.com/?p=14423" target="_blank">Başlık</a></h2>
 <p>Açıklama yazısı...</p>
 </div>
 <div class="image">
 <a href="#" target="_blank">
 <img src="img/slide1.jpg" alt="Slider 1">
 </a>
 </div>
 </div>
 <div class="slide" data-blurred="img/slide2_blurred.jpg">
 <div class="content">
 <h2><a href="http://mintik.com/?p=14423" target="_blank">Başlık</a></h2>
 <p>Açıklama yazısı...</p>
 </div>
 <div class="image">
 <a href="#" target="_blank">
 <img src="img/slide2.jpg" alt="Slider 1">
 </a>
 </div>
 </div>
 <div class="slide" data-blurred="img/slide3_blurred.jpg">
 <div class="content">
 <h2><a href="http://mintik.com/?p=14423" target="_blank">Başlık</a></h2>
 <p>Açıklama yazısı...</p>
 </div>
 <div class="image">
 <a href="#" target="_blank">
 <img src="img/slide3.jpg" alt="Slider 1">
 </a>
 </div>
 </div> 
 <a href="#" class="is-prev">&laquo;</a>
 <a href="#" class="is-next">&raquo;</a>
 </div>
 </div>
 </div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla