Thứ Bảy, 23 tháng 1, 2016

Tạo trang giới thiệu ấn tượng với CSS3 và jQuery

1/23/2016 01:28:00 CH    No comments

08/04/2015
Nếu các bạn đang cần tìm một mẫu thiết kế web dùng để giới thiệu công ty hoặc sản phẩm nổi bật nào đó thì thử dùng mẫu 3D Curtain Template mà mình chia sẻ trong bài viết này xem sao. Mẫu này được xây dựng từ những hiệu ứng động của CSS3 và được điều khiển bởi jQuery.
Tạo trang giới thiệu ấn tượng với CSS3 và jQuery
HTML
Để tạo khung chuẩn html, các bạn chỉ cần chý ý đến 2 phần : phần nội dung và phần điều hướng. Và chúng được sắp xếp như sau.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>
 
            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </section>
 
    <section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>
 
            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </section>
 
    <section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>
 
            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </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>
CSS
Và mỗi phần sẽ được định dạng với đoạn css sau :
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* --------------------------------
 
Main Components
 
-------------------------------- */
@media only screen and (min-width: 1170px) {
  .cd-section {
    height: 100vh;
  }
}
.cd-section h1 {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-size: 2.6rem;
}
@media only screen and (min-width: 768px) {
  .cd-section h1 {
    font-size: 3.2rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-section h1 {
    font-size: 4.2rem;
  }
}
 
.cd-block, .cd-half-block {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
 
.cd-block {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}
.cd-section:first-of-type .cd-block {
  visibility: visible;
  height: 100vh;
  background-color: #263b40;
}
@media only screen and (min-width: 1170px) {
  .cd-block {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    height: 100vh;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
    visibility: hidden;
  }
  .cd-section:first-of-type .cd-block {
    visibility: visible;
  }
  .cd-block > * {
    visibility: visible;
  }
}
 
.cd-half-block {
  background: #ffffff;
  color: #263b40;
}
.cd-half-block:nth-of-type(1) {
  height: 60vh;
  background-color: #263b40;
  background-position: center center;
  background-repeat: no-repeat;
}
.cd-half-block:nth-of-type(2) {
  padding: 4em 10%;
}
.cd-half-block p {
  font-size: 1.8rem;
  line-height: 1.8;
}
.cd-section:nth-of-type(2) .cd-half-block:first-of-type {
  background-image: url("../img/img-1.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(3) .cd-half-block:first-of-type {
  background-image: url("../img/img-2.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(4) .cd-half-block:first-of-type {
  background-image: url("../img/img-3.jpg");
  background-size: cover;
}
@media only screen and (min-width: 1170px) {
  .cd-half-block {
    height: 100vh !important;
    width: 50%;
    position: absolute;
    top: 0;
  }
  .cd-half-block p {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    padding: 0 30%;
    font-size: 2.4rem;
  }
  .cd-section:nth-of-type(even) .cd-half-block:first-of-type, .cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) {
    left: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .cd-section:nth-of-type(odd) .cd-half-block:first-of-type, .cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) {
    right: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
 
.cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: transparent url(../img/cd-icon-arrow.svg) no-repeat center center;
  -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1170px) {
  .cd-vertical-nav {
    display: block;
  }
}
jQuery
Cuối cùng là các bạn sử dụng đoạn script sau để tạo hiệu ứng.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
jQuery(document).ready(function($){
    //change this value if you want to change the speed of the scale effect
    var scaleSpeed = 0.3,
    //change this value if you want to set a different initial opacity for the .cd-half-block
        boxShadowOpacityInitialValue = 0.7,
        animating = false;
     
    //check the media query
    var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "");
    $(window).on('resize', function(){
        MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "");
    });
 
    //bind the animation to the window scroll event
    triggerAnimation();
    $(window).on('scroll', function(){
        triggerAnimation();
    });
 
    //move to next/previous section
    $('.cd-vertical-nav .cd-prev').on('click', function(){
        prevSection();
    });
    $('.cd-vertical-nav .cd-next').on('click', function(){
        nextSection();
    });
    $(document).keydown(function(event){
        if( event.which=='38' ) {
            prevSection();
            event.preventDefault();
        } else if( event.which=='40' ) {
            nextSection();
            event.preventDefault();
        }
    });
 
    function triggerAnimation(){
        if(MQ == 'desktop') {
            //if on desktop screen - animate sections
            (!window.requestAnimationFrame) ? animateSection() : window.requestAnimationFrame(animateSection);
        } else {
            //on mobile - remove the style added by jQuery
            $('.cd-section').find('.cd-block').removeAttr('style').find('.cd-half-block').removeAttr('style');
        }
        //update navigation arrows visibility
        checkNavigation();
    }
     
    function animateSection () {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            windowWidth = $(window).width();
         
        $('.cd-section').each(function(){
            var actualBlock = $(this),
                offset = scrollTop - actualBlock.offset().top,
                scale = 1,
                translate = windowWidth/2+'px',
                opacity,
                boxShadowOpacity;
 
            if( offset >= -windowHeight && offset <= 0 ) {
                //move the two .cd-half-block toward the center - no scale/opacity effect
                scale = 1,
                opacity = 1,
                translate = (windowWidth * 0.5 * (- offset/windowHeight)).toFixed(0)+'px';
 
            } else if( offset > 0 && offset <= windowHeight ) {
                //the two .cd-half-block are in the center - scale the .cd-block element and reduce the opacity
                translate = 0+'px',
                scale = (1 - ( offset * scaleSpeed/windowHeight)).toFixed(5),
                opacity = ( 1 - ( offset/windowHeight) ).toFixed(5);
 
            } else if( offset < -windowHeight ) {
                //section not yet visible
                scale = 1,
                translate = windowWidth/2+'px',
                opacity = 1;
 
            } else {
                //section not visible anymore
                opacity = 0;
            }
             
            boxShadowOpacity = parseInt(translate.replace('px', ''))*boxShadowOpacityInitialValue/20;
             
            //translate/scale section blocks
            scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
 
            var directionFirstChild = ( actualBlock.is(':nth-of-type(even)') ) ? '-': '+';
            var directionSecondChild = ( actualBlock.is(':nth-of-type(even)') ) ? '+': '-';
            if(actualBlock.find('.cd-half-block')) {
                translateBlock(actualBlock.find('.cd-half-block').eq(0), directionFirstChild+translate, boxShadowOpacity);
                translateBlock(actualBlock.find('.cd-half-block').eq(1), directionSecondChild+translate, boxShadowOpacity);
            }
            //this is used to navigate through the sections
            ( offset >= 0 && offset < windowHeight ) ? actualBlock.addClass('is-visible') : actualBlock.removeClass('is-visible');       
        });
    }
 
    function translateBlock(elem, value, shadow) {
        var position = Math.ceil(Math.abs(value.replace('px', '')));
         
        if( position >= $(window).width()/2 ) {
            shadow = 0;
        } else if ( position > 20 ) {
            shadow = boxShadowOpacityInitialValue;
        }
 
        elem.css({
            '-moz-transform': 'translateX(' + value + ')',
            '-webkit-transform': 'translateX(' + value + ')',
            '-ms-transform': 'translateX(' + value + ')',
            '-o-transform': 'translateX(' + value + ')',
            'transform': 'translateX(' + value + ')',
            'box-shadow' : '0px 0px 40px rgba(0,0,0,'+shadow+')'
        });
    }
 
    function scaleBlock(elem, value, opac) {
        elem.css({
            '-moz-transform': 'scale(' + value + ')',
            '-webkit-transform': 'scale(' + value + ')',
            '-ms-transform': 'scale(' + value + ')',
            '-o-transform': 'scale(' + value + ')',
            'transform': 'scale(' + value + ')',
            'opacity': opac
        });
    }
 
    function nextSection() {
        if (!animating) {
            if ($('.cd-section.is-visible').next().length > 0) smoothScroll($('.cd-section.is-visible').next());
        }
    }
 
    function prevSection() {
        if (!animating) {
            var prevSection = $('.cd-section.is-visible');
            if(prevSection.length > 0 && $(window).scrollTop() != prevSection.offset().top) {
                smoothScroll(prevSection);
            } else if(prevSection.prev().length > 0 && $(window).scrollTop() == prevSection.offset().top) {
                smoothScroll(prevSection.prev('.cd-section'));
            }
        }
    }
 
    function checkNavigation() {
        ( $(window).scrollTop() < $(window).height()/2 ) ? $('.cd-vertical-nav .cd-prev').addClass('inactive') : $('.cd-vertical-nav .cd-prev').removeClass('inactive');
        ( $(window).scrollTop() > $(document).height() - 3*$(window).height()/2 ) ? $('.cd-vertical-nav .cd-next').addClass('inactive') : $('.cd-vertical-nav .cd-next').removeClass('inactive');
    }
 
    function smoothScroll(target) {
        animating = true;
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; });
    }
});
Đoạn code tuy dài nhưng không khó để hiểu, mình mong là hiệu ứng này sẽ giúp các bạn có thêm ý tưởng thiết kế cho trang web hay blog của mình.
Chúc các bạn thành công !

0 nhận xét:

Đăng nhận xét