[section] about us

about us 부분은 skrollr 이라는 라이브러를 이용해서 제작하는데 skrollr은 parallax scrolling library로써 스크롤에 따른 시간차 효과를 쉽게 구현합니다.

동일한 기능을 스크립트로도 구현이 가능하지만 skrollr 만 잘 활용해도 이 라이브러리만으로도 훌륭한 사이트를 충분히 제작 가능합니다.

그럼 우선 해당 사이트에서 다운로드 받아서 functions.php 에 등록하는 작업으로 시작하겠습니다.

skrollr 라이브러리와 함께 enquire.js 도 다운 받아야 하는데 enquire.js 는 css 미디어 쿼리에 따른 효과를 script에서 제어할수 있는 라이브러리입니다.

두 사이트에 방문해서 파일을 다운 받은 후에 압축을 해제하고 폴더 그대로 저장를 하면

zeein-yellow > assets > enquire.js-master
zeein-yellow > assets > skrollr-master

위의 폴더 경로가 되고 functions.php 파일에 두개의 스크립트를 사용할 수 있도록 등록 합니다.

등록 방법은 functoin zeein_yellow_scripts() { 안의 하단에 custom.js 파일을 등록 하기전에

functions.php

// skrollr 0.6.30
wp_enqueue_script( 'zeein-skrollr.min', get_stylesheet_directory_uri() .'/assets/skrollr-master/dist/skrollr.min.js', array(), 'v0.6.30', true );

// enquire.js-master
wp_enqueue_script( 'zeein-enquire', get_stylesheet_directory_uri() .'/assets/enquire.js-master/dist/enquire.min.js', array(), 'v2.1.6', true );

// custom
wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );

index.php

기존의 내용에서 service 이후에 아래 내용을 입력 하세요.

<!-- about us -->
<section id="section_2" class="about bg-light-gray">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h4 class="under-bar text-center mb-5" >ABOUT US</h4>
			</div>
			<div class="col-12 about-box-wrap">
				<div class="box box-yellow" 
					 data-bottom-top="transform: translateY(0%)" 
					 data-top-bottom="transform: translateY(20%)"
					 >
					<figure>
						<img src="/wp-content/uploads/2017/11/about-01.jpg" alt="">
					</figure>
					Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.<br>
				</div>
				<div class="box box-white"
					 data-bottom-top="transform: translateY(0%)" 
					 data-top-bottom="transform: translateY(-30%)"
					 >
					<h4>Nulla vitae elit libero</h4>
					Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
					<br>
					Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br>
					<figure class="mt-3 mb-0">
						<img src="/wp-content/uploads/2017/11/about-02.jpg" alt="">
					</figure>
				</div>
			</div>
		</div>
	</div>
</section>

main.css

상단에 img 관련해서 스타일 추가 해주고 하단에 about us 관련해서 스타일을 추가 해 줍니다.

/* ==========================================================================
   Image
   ========================================================================== */
img {
    height: auto;
    max-width: 100%; }

/* about us */
section.about .about-box-wrap {
    min-height: 780px; }
    .about-box-wrap .box {
        position: absolute;
        padding: 1rem; }
    .about-box-wrap .box.box-yellow {
        background-color: #FBD04B;
        width: 50%;
        z-index: 10;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2); }
    .about-box-wrap .box-white {
        z-index: 5;
        padding: 1rem 1rem 1rem 23%;
        background-color: white;
        top: 100px;
        left: 30%;
        width: 70%;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28); }

custom.js

(function ($) {

    // skrollr on off
    function enableSkrollr(){
		console.log('we are on desktop');
		var s = skrollr.init({
			forceHeight: false
		});
    }
    function disableSkrollr(){
		console.log('we are on mobile');
		// Destroy Skrollr
		var s = skrollr.init();
		s.destroy();
	}
    
    enquire.register("screen and (min-width: 992px)", {
	    match : function() {
            enableSkrollr();
            isMobileSize = false;
	    },  
	    unmatch : function() {
            disableSkrollr();
            isMobileSize = true;
            $('#masthead').removeClass('nav-up nav-down nav-top');
	    }
    });
    
    function initSlick() {
        var $slider = $('.slick-slider')
            .on('init', function(slick) {
                $('.slick-slider .bg-wrap').addClass('init');
            })
            .slick({
                dots: true, 
                infinite: true,
                speed: 350,
                cssEase: 'ease-in-out'
            });
    }
    $( document ).ready(function() {
        initSlick();
    });
})(jQuery);

4: skrollr 초기화 합니다.
10: skrollr 기능을 종료 시킵니다.
16: enquire 라이브러리를 이용해서 미디어 사이즈에 따른 스크립트 제어를 할 수 있습니다.

마지막으로 heaer.php 파일과 footer.php 파일도 1줄씩 내용을 추가 하겠습니다.

header.php

body 태그 밑에 #skrollr-body 를 추가 해줍니다.

<body <?php body_class(); ?>>
<div id="skrollr-body">
<div id="page" class="site">

footer.php

header.php 파일의 #skrollr-body 의 닫는 태그를 입력해 줍니다.

<?php wp_footer(); ?>
</div><!-- #skrollr-body -->
</body>
</html>

위의 과정을 모두 입력 하면 about us 부분이 추가 되고 화면의 스크롤에 따라 좌우의 div 박스가 상하로 이동하는 것을 보실 수 있습니다. 또한 enquire 라이브러리를 이용해 탭과 모바일 사이즈에서는 skrollr 기능을 종료시키고 레이아웃도 변경되서 노출하도록 화면을 구성 했습니다.

아래 링크를 클릭하시면 사이트 구현된 모습을 동영상으로 보실 수 있습니다.
http://d.pr/v/fsetCT

Site link

zeein