Coding HTML CSS Web Desain

CSS Page Scroll Effect

CSS Page Scroll Effect Juli 3, 20152 Comments

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

css page scroll effect, tutorial belajar desain web, tutorial web desain

[row][col span=”1/2″][wp_ad_camp_2][/col][col span=”1/2″]Page Scroll efect yang akan penulis jelaskan ini dibuat oleh Claudia Romano seorang web developer wanita pendiri CodyHouse. Semua animasi yang dihasilkan dibuat dengan Velocity.js.

Sebagai catatan, efek yang dihasilkan hanya cocok untuk desktop dan device yang memiliki resolusi tinggi sehingga tidak akan muncul di mobile device seperti smartphone atau tablet dengan resolusi sedang.
[/col][/row]

Cara Kerja CSS Page Scroll Effect

Untuk menerapkan efek animasi atau untuk mengenable/disable scroll hijacking, cukup dengan menyisipkan type data data-animation dan data-hijacking pada body tag sebagai berikut:

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="none">

Struktur HTML

Struktur HTML yang digunakan pada effek ini hanya berupa sederetan elemen >section<, dan navigasi halaman untuk berpindah antar page:

<section class="cd-section visible">
	<div>
		<h2>Page Scroll Effects</h2>
	</div>
</section>
 
<section class="cd-section">
	<div>
		<h2>Section 2</h2>
	</div>
</section>
 
<section class="cd-section">
	<!-- ... -->
</section>
 
<nav>
	<ul class="cd-vertical-nav">
		<li><a href="#0" class="cd-prev inactive">Next</a></li>
		<li><a href="#0" class="cd-next">Prev</a></li>
	</ul>
</nav> <!-- .cd-vertical-nav -->

Menambahkan CSS style

Semua efek animasi dibuat dengan jQuery dengan menggunakan Velocity.js sehingga tidak banyak yang perlu dijelaskan tentang CSS. penulis secara simple hanya menambahkan property height sebesar 100vh disetiap <section> tag agar halaman bisa tampil secara penuh di layar, tidak kurang tidak lebih. Selain itu penulis juga menambahkan warna background untuk setiap section menggunakan selector :nth-of-type().

.cd-section {
  height: 100vh;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

Event Handling

Penulis hanya menggunakan 2 metode yaitu saat data-hijacking=on atau off

Saat data-hijacking = off, animasi yang diterapkan untuk setiap section adalah relatif terhadap viewport. Animasi untuk scaledown, digunakan kombinasi nilai dari opacity, scale, translateY dan boxShadowBlur values pada elemen section > div:

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
	windowHeight = $(window).height();
 
if( offset >= -windowHeight && offset <= 0 ) {
	// section entering the viewport
	translateY = (-offset)*100/windowHeight;
    scale = 1;
	opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
	//section leaving the viewport 
    scale = (1 - ( offset * 0.3/windowHeight));
	opacity = ( 1 - ( offset/windowHeight) );
	translateY = 0;
	boxShadowBlur = 40*(offset/windowHeight);
}

Saat data-hijacking = on, penulis mendefinisikan custom effects untuk setiap animasi menggunakan Velocity UI Pack registration feature. Sebagai contoh untuk animasi efek scale-down effect, penulis menggunakan script sebagai berikut:

$.Velocity
    .RegisterEffect("scaleDown", {
    	defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });

[wp_ad_camp_2]

Diterjemahkan dengan bahasa sendiri oleh Tanto prihartanto. Pemilik dan pengelola Bestariweb Studio, Bestariwebhost dan Humayraa.
Sumber: http://codyhouse.co/gem/page-scroll-effects/

Incoming search terms:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

2 comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *