Parallax – Sửa Máy Nhanh https://www.suamaynhanh.vn/danh-muc-phan-mem/laptrinh-parallax/ Miễn phí hướng dẫn sửa chữa, tháo lắp các thiết bị và cài đặt phần mềm. Wed, 01 Sep 2021 02:26:34 +0000 vi hourly 1 https://wordpress.org/?v=6.1.6 https://suamaynhanh.vn/wp-content/uploads/2018/06/cropped-cropped-cropped-ifix-logo-horiz-32x32.png Parallax – Sửa Máy Nhanh https://www.suamaynhanh.vn/danh-muc-phan-mem/laptrinh-parallax/ 32 32 Parallax – Tạo trang đầu và cuối https://suamaynhanh.vn/phan-mem/parallax-tao-trang-dau-va-cuoi/ https://suamaynhanh.vn/phan-mem/parallax-tao-trang-dau-va-cuoi/#respond Sun, 16 Feb 2020 14:02:00 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14657 1. Phần HTML Trước hết hãy xem qua toàn bộ mã nguồn: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Tạo trang đầu và cuối"

The post Parallax – Tạo trang đầu và cuối appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<body>
  <div class="parallax">
    <div class="shape">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/eagle.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/eagle.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/rhino.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/rhino.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/owl.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/owl.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/lion.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/lion.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/bear.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/bear.png</a>">
    </div>
    <audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>
    <div onclick="toggleMuteAudio()" class="volume">
      <span><i class="fa fa-volume-up" aria-hidden="true"></i>
      </span>
    </div>
    <div class="side-menu"><!--b2 menu-->
      <ul>
        <li class="forest" onclick="moveToImage('.forest')">Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')">Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')">Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')">Owl</li>
        <li class="lion" onclick="moveToImage('.lion')">Lion</li>
        <li class="bear" onclick="moveToImage('.bear')">Bear</li>
      </ul>
    </div>
    <!--b1 background-image-->
    <div class="forest"></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span>
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back">
      <div onclick="goHome()">
        <span><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></span>
      </div>
    </div>
  </div>
  <div>Icons made by <a href="<a href="https://www.freepik.com/">https://www.freepik.com/</a>" title="Freepik">Freepik</a> from <a href="<a href="https://www.flaticon.com/">https://www.flaticon.com/</a>"               title="Flaticon">www.flaticon.com</a> is licensed by <a href="<a href="http://creativecommons.org/licenses/by/3.0/">http://creativecommons.org/licenses/by/3.0/</a>"              title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</body>

Phần này ta thêm vào thẻ div.shape với các thẻ imgcon bên trong. Các thẻ imgsẽ trỏ tới những ảnh có phần mở rộng là pngdùng cho giao diện phần trang mở đầu.

Freetuts xin giới thiệu đến các bạn trang web mà các bạn có thể thoải mái tải các ảnh định dạng svghoặc pngmiễn phí, chỉ với điều kiện thêm thẻ divbên dưới vào mã nguồn:

1
<div>Icons made by <a href="<a href="https://www.freepik.com/">https://www.freepik.com/</a>" title="Freepik">Freepik</a> from <a href="<a href="https://www.flaticon.com/">https://www.flaticon.com/</a>"                 title="Flaticon">www.flaticon.com</a> is licensed by <a href="<a href="http://creativecommons.org/licenses/by/3.0/">http://creativecommons.org/licenses/by/3.0/</a>"              title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

Trang web có địa chỉ như sau: https://www.flaticon.com

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
.parallax div.shape {
  position: absolute;
  z-index: 99;
}
.parallax .shape > img {
  height: 50px;
  width: 50px;
  position: absolute;
}
.parallax .shape > img:nth-child(1) {
  top: 50px;
  left: 100px;
  transform: translate(0, 0);
  animation: eagle 10s ease-in infinite;
}
.parallax .shape > img:nth-child(2) {
  bottom: 150px;
  left: 180px;
  transform: rotateZ(0deg) translateY(-10px);
  animation: rhino 4s linear infinite;
}
.parallax .shape > img:nth-child(3) {
  bottom: 500px;
  left: 800px;
  transform: rotateZ(40deg) translate(0px,0px);
  animation: owl 3s ease-in infinite;
}
.parallax .shape > img:nth-child(4) {
  top: 400px;
  left: 500px;
  animation: lion 1.5s ease-out infinite;
}
.parallax .shape > img:nth-child(5) {
  top: 500px;
  left: 800px;
  opacity: 0;
  transition: 0.5s ease;
  animation: bear 2s ease-in-out infinite;
}
@keyframes eagle {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  55% {
    transform: rotateY(180deg) translate(-540px, 45px);
  }
  95% {
    transform: rotateY(180deg) translate(40px, 45px);
  }
  100% {
    transform: translate(0,0) rotateY(0deg);
  }
}
@keyframes owl {
  0% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
  30% {
    transform: rotateZ(-40deg) translate(20px,10px);
  }
  50% {
    transform: rotateZ(40deg) translate(10px,40px);
  }
  70% {
    transform: rotateZ(-40deg) translate(0px,50px);
  }
  100% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
}
@keyframes bear {
  50% {
    opacity: 1;
    transform: scale(2,2)
  }
  100% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
}
@keyframes lion {
  10% {
    transform: rotateX(360deg);
  }
  15% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateY(360deg)
  }
}
@keyframes rhino {
  50% {
    transform: rotateZ(-40deg) translateY(10px);
  }
  70% {
    transform: rotateZ(-40deg) translateY(20px);
  }
  100% {
    transform: rotateZ(0deg) translateY(-10px);
  }
}
div.back > div {
  font-size: 50px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid black;
}
div.back > div:hover {
  transition: 1s ease-in;
  background-color: azure;
  color: #196f3d ;
  border: 2px solid #196f3d ;
  cursor: pointer;
}

Các bước thực hiện:

Bước 1: định dạng cho thẻ div.shape và img

1
2
3
4
5
6
7
8
9
10
11
.parallax div.shape {
  position: absolute;
  z-index: 99;
}
.parallax .shape > img {
  height: 50px;
  width: 50px;
  position: absolute;
}

Bước 2: định dạng riêng biệt cho từng thẻ img

1
2
3
4
5
6
7
8
9
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
.parallax .shape > img:nth-child(1) {
  top: 50px;
  left: 100px;
  transform: translate(0, 0);
  animation: eagle 10s ease-in infinite;
}
.parallax .shape > img:nth-child(2) {
  bottom: 150px;
  left: 180px;
  transform: rotateZ(0deg) translateY(-10px);
  animation: rhino 4s linear infinite;
}
.parallax .shape > img:nth-child(3) {
  bottom: 500px;
  left: 800px;
  transform: rotateZ(40deg) translate(0px,0px);
  animation: owl 3s ease-in infinite;
}
.parallax .shape > img:nth-child(4) {
  top: 400px;
  left: 500px;
  animation: lion 1.5s ease-out infinite;
}
.parallax .shape > img:nth-child(5) {
  top: 500px;
  left: 800px;
  opacity: 0;
  transition: 0.5s ease;
  animation: bear 2s ease-in-out infinite;
}

Bước 3: tạo hiệu ứng cho từng thẻ img

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@keyframes eagle {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  55% {
    transform: rotateY(180deg) translate(-540px, 45px);
  }
  95% {
    transform: rotateY(180deg) translate(40px, 45px);
  }
  100% {
    transform: translate(0,0) rotateY(0deg);
  }
}
@keyframes owl {
  0% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
  30% {
    transform: rotateZ(-40deg) translate(20px,10px);
  }
  50% {
    transform: rotateZ(40deg) translate(10px,40px);
  }
  70% {
    transform: rotateZ(-40deg) translate(0px,50px);
  }
  100% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
}
@keyframes bear {
  50% {
    opacity: 1;
    transform: scale(2,2)
  }
  100% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
}
@keyframes lion {
  10% {
    transform: rotateX(360deg);
  }
  15% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateY(360deg)
  }
}
@keyframes rhino {
  50% {
    transform: rotateZ(-40deg) translateY(10px);
  }
  70% {
    transform: rotateZ(-40deg) translateY(20px);
  }
  100% {
    transform: rotateZ(0deg) translateY(-10px);
  }
}

Bước 4: định dạng thẻ divcho trang cuối

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div.back > div {
  font-size: 50px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid black;
}
div.back > div:hover {
  transition: 1s ease-in;
  background-color: azure;
  color: #196f3d ;
  border: 2px solid #196f3d ;
  cursor: pointer;
}

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function toggleMuteAudio(){
  $("audio").prop("muted",!$("audio").prop("muted"));
  if($("audio").prop("muted")) {
    $(".volume i").removeClass("fa-volume-up");
    $(".volume i").addClass("fa-volume-off");
  }
  else {
    $(".volume i").removeClass("fa-volume-off");
    $(".volume i").addClass("fa-volume-up");
  }
}
function goHome() {
  moveToImage(".forest");
}

Ở phần này ta chỉ cần thêm hàm goHome() khi nhấn vào nút trở về màn hình chính ở trang cuối, hàm này sẽ gọi ngược trở lại hàm moveToImage(".forest") để trở về trang đầu tiên.

4. Lời kết

Sau bài viết này, chúng tôi  đã hướng dẫn các bạn tạo thành công trang mở đầu và trang kết thúc của trang web với hiệu ứng parallax.Cảm ơn các bạn đã theo dõi bài viết này.

Theo:https://freetuts.net

 

The post Parallax – Tạo trang đầu và cuối appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-trang-dau-va-cuoi/feed/ 0 Parallax – Chèn nhạc nền theo chuyển động cuộn https://suamaynhanh.vn/phan-mem/parallax-chen-nhac-nen-theo-chuyen-dong-cuon/ https://suamaynhanh.vn/phan-mem/parallax-chen-nhac-nen-theo-chuyen-dong-cuon/#respond Sun, 16 Feb 2020 13:57:44 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14656 1. Phần HTML Trước hết hãy xem qua toàn bộ mã nguồn: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Chèn nhạc nền theo chuyển động cuộn"

The post Parallax – Chèn nhạc nền theo chuyển động cuộn appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<body>
  <div class="parallax">
    <audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>
    <div onclick="toggleMuteAudio()" class="volume">
      <span><i class="fa fa-volume-up" aria-hidden="true"></i>
      </span>
    </div>
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span>
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back" ></div>
  </div>
</body>

Ở phần này, ta thêm thẻ audiovà một thẻ divmới để hiển thị bật tắt âm thanh. Lưu ý, là ta dùng thẻ ivới định dạng bên dưới:

1
<i class="fa fa-volume-up" aria-hidden="true"></i>

Thì ta cần thêm vào thẻ headthư viện font-awesome 4.7:

1
<link rel="stylesheet" href="<a href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</a>">

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.parallax audio {
  display: none;
}
.parallax > div.volume {
  height: 50px;
  width: 50px;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;
  opacity: 0.4;
  border-radius: 10px;
  transition: 0.5s ease-in;
}
.parallax > div.volume:hover {
  opacity: 1;
  font-size: 25px;
  cursor: pointer;
}

Các bước thực hiện:

Bước 1: ẩn thẻ audio

1
2
3
.parallax audio {
  display: none;
}

Ta chỉ cần chèn nhạc vào, còn thẻ audiosẽ được ẩn đi.

Bước 2: định dạng cho nút bật tắt nhạc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parallax > div.volume {
  height: 50px;
  width: 50px;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;
  opacity: 0.4;
  border-radius: 10px;
  transition: 0.5s ease-in;
}

Phần khá đơn giản chỉ canh chỉnh vị trí và màu sắc của các thẻ con bên trong thẻ div.volume .

Lưu ý: vị trí thẻ div.volume phải là position: fixed và ở vị trí góc dưới cùng bên trái. Đây là vị trí quen thuộc cho người dùng khi muốn tìm kiếm nút bật tắt âm thanh.

Bước 3: tạo hiệu ứng hovercho thẻ div.volume

1
2
3
4
5
.parallax > div.volume:hover {
  opacity: 1;
  font-size: 25px;
  cursor: pointer;
}

Bước này quan trọng là cho giá trị opacityở mức cao nhất thay vì 0.4 như ban đầu.

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function toggleMuteAudio(){
  $("audio").prop("muted",!$("audio").prop("muted"));
  if($("audio").prop("muted")) {
    $(".volume i").removeClass("fa-volume-up");
    $(".volume i").addClass("fa-volume-off");
  }
  else {
    $(".volume i").removeClass("fa-volume-off");
    $(".volume i").addClass("fa-volume-up");
  }
}
if($("audio").attr("src") != ".forest.mp3") {
    $("audio").attr("src", ".forest.mp3");
}

Các bước thực hiện:

Bước 1: tạo hàm bật tắt nhạc

1
2
3
4
5
6
7
8
9
10
11
function toggleMuteAudio(){
  $("audio").prop("muted",!$("audio").prop("muted"));
  if($("audio").prop("muted")) {
    $(".volume i").removeClass("fa-volume-up");
    $(".volume i").addClass("fa-volume-off");
  }
  else {
    $(".volume i").removeClass("fa-volume-off");
    $(".volume i").addClass("fa-volume-up");
  }
}

Mục đích của hàm này là thiết lập lại giá trị của thuộc tính mutedtrong thẻ audiotừ truesang falsehoặc ngược lại. Đồng thời thay đổi iconcủa volumekhi bật hoặc tắt nhạc nền.

Bước 2: chèn nhạc khi ảnh nền được cuộn đến

1
2
3
if($("audio").attr("src") != ".forest.mp3") {
    $("audio").attr("src", ".forest.mp3");
}

Chúng sẽ thêm đoạn mã này vào các câu điều kiện trong bài https://freetuts.nparallax-tao-hieu-ung-parallax-scrolling-1682.html

Tên bài nhạc nền tương ứng với hình ảnh các bạn mong muốn.

4. Lời kết

Qua bài học hôm nay, các bạn đã học được cách chèn nhạc nền vào trang web với hiệu ứng parallax scrolling. Cảm ơn các bạn, hẹn gặp lại trong các bài viết tiếp theo.

Theo:https://freetuts.net

 

 

 

The post Parallax – Chèn nhạc nền theo chuyển động cuộn appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-chen-nhac-nen-theo-chuyen-dong-cuon/feed/ 0 Parallax – Tạo hiệu ứng cho văn bản https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cho-van-ban/ https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cho-van-ban/#respond Thu, 13 Feb 2020 13:15:14 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14612 1. Phần HTML Trước hết hãy xem qua toàn bộ đoạn mã nguồn: 1 2 3 4 5 6 7 8 …

Đọc tiếp "Parallax – Tạo hiệu ứng cho văn bản"

The post Parallax – Tạo hiệu ứng cho văn bản appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua toàn bộ đoạn mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
<body>
  <div class="parallax">
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span>
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back" ></div>
  </div>
</body>

Phần này khá đơn giản, chúng ta chỉ cần thêm các thẻ pvà thẻ span cùng với nội dung mà mình muốn trình bày.

2. Phần CSS

Trước hết hãy xem qua toàn bộ đoạn mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
.parallax > div > p {
  width: 60%;
  text-align: justify;
  color: white;
  mix-blend-mode: difference;
  margin: 50px;
  font-size: 20px;
}
.parallax > div > p > span {
  width: 100%;
  float: left;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation: text 10s 1.5s ease-in-out infinite;
}
.parallax > div > p > span:first-child{
  animation-delay: 2s;
}
.parallax > div > p > span:last-child{
  animation-delay: 1s;
}
@keyframes text {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}

Các bước thực hiện:

Bước 1: định dạng cho thẻ p

1
2
3
4
5
6
7
8
.parallax > div > p {
  width: 60%;
  text-align: justify;
  color: white;
  mix-blend-mode: difference;
  margin: 50px;
  font-size: 20px;
}

Màu sắc của văn bản phải được thiết lập để tương phản với ảnh nền do đó ta dùng thuộc tínhmix-blend-mode: difference.

Cách thể hiện văn bản cũng nên canh chỉnh hai bên lề trái và phải bằng nhau bằng cách text-align: justify.

Bước 2: tạo định dạng cho thẻ span

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parallax > div > p > span {
  width: 100%;
  float: left;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation: text 10s 1.5s ease-in-out infinite;
}
.parallax > div > p > span:first-child{
  animation-delay: 2s;
}
.parallax > div > p > span:last-child{
  animation-delay: 1s;
}

Ở phần này chỉ lưu ý độ trễ của hiệu ứng trên từng thẻ spanlà khác, giúp cho người dùng quen thuộc hơn.

Bước 3: tạo hiệu ứng cho văn bản

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@keyframes text {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}

Việc tạo hiệu ứng này rất quen thuộc, freetuts đã có một bài học hướng dẫn về cách tạo hiệu ứng với từ khóa keyframes. Các bạn có thể xem chi tiết tại đây: https://freetuts.net/css3-hieu-ung-animation-1665.html

3. Lời kết

Qua bài viết này, hy vọng các bạn sẽ sáng tạo thêm các hiệu ứng đẹp hơn nữa cho trang web của mình. Cảm ơn các bạn, hẹn gặp lại trong các bài học tiếp theo.
Theo:https://freetuts.net

 

The post Parallax – Tạo hiệu ứng cho văn bản appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cho-van-ban/feed/ 0 Parallax – Tạo hiệu ứng Parallax scrolling https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-parallax-scrolling/ https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-parallax-scrolling/#respond Thu, 13 Feb 2020 13:12:46 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14608 1. Phần HTML Trước hết hãy xem qua toàn bộ mã nguồn: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Tạo hiệu ứng Parallax scrolling"

The post Parallax – Tạo hiệu ứng Parallax scrolling appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <div class="parallax">
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle" ></div>
    <div class="rhino" ></div>
    <div class="owl" ></div>
    <div class="lion" ></div>
    <div class="bear" ></div>
    <div class="back" ></div>
  </div>
</body>

Trong phần này, bố cục không khác so với bài học trước. Chúng ta hãy xem lại cách chia các phần một lần nữa.

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
html, body, div {
  height: 100%;
}
.parallax {
  position: relative;
}
.parallax > div {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
div.forest {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/forest.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/forest.jpg</a>");
}
div.eagle {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/eagle.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/eagle.jpg</a>");
}
div.rhino {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/rhino.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/rhino.jpg</a>");
}
div.owl {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/owl.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/owl.jpg</a>");
}
div.lion {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/lion.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/lion.jpg</a>");
}
div.bear {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/bear.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/bear.jpg</a>");
}
div.back {
  background-image: url("<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1679/back.jpg">https://freetuts.net/upload/tut_post/images/2019/03/16/1679/back.jpg</a>");
}
.parallax > div.side-menu {
  position: fixed;
  top: 30%;
  left: 10px;
  background-color: transparent;
  opacity: 0.5;
  height: fit-content;
  height: -moz-fit-content;
  color: white;
  font-size: 20px;
  font-weight: 800;
  mix-blend-mode: difference;
  z-index: 99;
}
div.side-menu ul {
  padding: 0 10px;
  list-style: none;
}
div.side-menu ul li {
  margin: 20px;
  width: 100px;
  padding-bottom: 5px;
  transition: 1s ease;
  border-bottom: 2px solid white;
  box-sizing: border-box;
}
.active {
  padding-left: 50px;
}
div.side-menu ul li:hover {
  cursor: pointer;
  padding-left: 50px;
}

Phần này ta tạo thêm class active, class này sẽ được chèn vào từng thẻ likhi người dùng cuộn xuống đúng vị trí của ảnh nền.

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function () {
  //$("html, body").animate({scrollTop: $(document).height()}, 50000);
  $("ul li").click(function () {
      setTimeout(function () {
          
      }, 300);
  });
  $(window).scroll(function() {
    $("li").removeClass("active");
    if(Math.abs($(window).scrollTop() - $("div.forest").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".forest.mp3") {
        $("audio").attr("src", ".forest.mp3");
      }
      $("li.forest").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.eagle").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".eagle.mp3") {
        $("audio").attr("src", ".eagle.mp3");
      }
      $("li.eagle").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.rhino").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".rhino.mp3") {
        $("audio").attr("src", ".rhino.mp3");
      }
      $("li.rhino").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.owl").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".owl.mp3") {
        $("audio").attr("src", ".owl.mp3");
      }
      $("li.owl").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.lion").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".lion.mp3") {
        $("audio").attr("src", ".lion.mp3");
      }
      $("li.lion").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.bear").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".bear.mp3") {
        $("audio").attr("src", ".bear.mp3");
      }
      $("li.bear").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.back").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".back.mp3") {
        $("audio").attr("src", ".back.mp3");
      }
      $("li.back").addClass("active");
    }
  });
});

Chúng ta sẽ dùng thư viện jQuery để hỗ trợ cho việc viết script, để tích hợp jQuery vào mã nguồn chúng ta làm như sau:

Bước 1: vào trang https://code.jquery.com/

Bước 2: chọn phiên bản jQuery mới nhất, ở đây ta cho jQuery 3.x.

Bước 3: jQuery cung cấp rất nhiều gói khác nhau, để web xử lý nhanh gọn và hiệu quả ta chọn gói minified.

Bước 4: khi chọn minified thì một popup sẽ hiện ra, sau đó sao chép đoạn mã.

Bước 5: dán đoạn mã đã sao chép vào thẻ head

1
2
3
4
5
<script
    src="<a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a>"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

Bây giờ chúng ta bắt đầu tìm hiểu đoạn script:

Bước 1: xóa các class activeđã tồn tại trước đó trong thẻ li.

1
$("li").removeClass("active");

Mục đích của thao tác này là khi thanh cuộn di chuyển đến một vị trí mới thì, hiệu ứng ở vị trí cũ của thẻ lisẽ được loại bỏ.

Bước 2: thêm câu lệnh điều kiện

1
2
3
4
5
6
7
8
9
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
if(Math.abs($(window).scrollTop() - $("div.forest").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".forest.mp3") {
        $("audio").attr("src", ".forest.mp3");
      }
      $("li.forest").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.eagle").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".eagle.mp3") {
        $("audio").attr("src", ".eagle.mp3");
      }
      $("li.eagle").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.rhino").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".rhino.mp3") {
        $("audio").attr("src", ".rhino.mp3");
      }
      $("li.rhino").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.owl").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".owl.mp3") {
        $("audio").attr("src", ".owl.mp3");
      }
      $("li.owl").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.lion").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".lion.mp3") {
        $("audio").attr("src", ".lion.mp3");
      }
      $("li.lion").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.bear").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".bear.mp3") {
        $("audio").attr("src", ".bear.mp3");
      }
      $("li.bear").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.back").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".back.mp3") {
        $("audio").attr("src", ".back.mp3");
      }
      $("li.back").addClass("active");
    }

Chúng ta có bao nhiêu ảnh nền thì có bấy nhiêu điều kiện được thiết lập.

Bước 3: điều kiện cho từng thẻ li

1
Math.abs($(window).scrollTop() - $(elem).offset().top) < $(window).height()/2

Việc giải thích cho điều kiện này cũng khá đơn giản. Như trên, ta có thể hiểu là trị tuyệt đối của hiệu giữa khoảng cách của thẻ liđến đầu trang và khoảng cách của đỉnh góc nhìn hiện tại đến đầu trang phải nhỏ hơn phân nửa chiều cao của khung hình trên trình duyệt. Điều này có nghĩa là khi cuộn màn hình và ảnh xuất hiện quá nửa chiều cao của cửa sổ thì hiệu ứng sẽ được thiết lập. Xem hình bên dưới:

Việc còn lại là chỉ cần thêm vào class activecho thẻ likhớp với câu lệnh điều kiện.

1
$("li").addClass("active");

Theo:https://freetuts.net

 

 

The post Parallax – Tạo hiệu ứng Parallax scrolling appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-parallax-scrolling/feed/ 0 Parallax – Tạo hiệu ứng cuộn với thanh menu dọc https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cuon-voi-thanh-menu-doc/ https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cuon-voi-thanh-menu-doc/#respond Thu, 13 Feb 2020 13:09:57 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14606 Chào các bạn, ở phần này chúng ta sẽ tập trung viết script cho thanh menu mà các bạn đã được …

Đọc tiếp "Parallax – Tạo hiệu ứng cuộn với thanh menu dọc"

The post Parallax – Tạo hiệu ứng cuộn với thanh menu dọc appeared first on Sửa Máy Nhanh.

]]> Chào các bạn, ở phần này chúng ta sẽ tập trung viết script cho thanh menu mà các bạn đã được học ở bài học trước. Sau khi kết thúc bài hôm nay, các bạn có thể tạo được hiệu ứng cuộn đến hình nền tương ứng khi nhấn chuột vào menu như demo. Nào chúng ta cùng bắt đầu.

1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
  <div class="parallax">
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle" ></div>
    <div class="rhino" ></div>
    <div class="owl" ></div>
    <div class="lion" ></div>
    <div class="bear" ></div>
    <div class="back" ></div>
  </div>
  
</body>

Ở phần này, chúng ta sẽ thêm vào sự kiện onclickcho từng thẻ li, sau khi người dùng nhấn vào từng thẻ lithì sẽ gọi hàm

1
onclick = "moveToImage(className)"

Lưu ý là phần này tên class trùng với tên class trong ảnh nền như freetuts đã đề cập trong các bài học trước về cách đặt tên giúp tiện việc xử lý cho các đoạn script.

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
.active {
  padding-left: 50px;
}

Ở phần này, rất đơn giản là tạo một class mới với tên là active. Lưu ý là các thuộc tính trong class này phải giống như cách đặt trong li:hover vì chúng ta muốn tạo ra biến đổi tương tự với hiệu ứng hovertrên thẻ li.

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
function moveToImage( elem ) {
  setTimeout( function () {
    $( 'html, body' ).animate({scrollTop: $('div' + elem).offset().top}, 1500);
    setTimeout( function () {
      $( "audio" ).attr("src", elem + ".mp3");
    }, 1500)
  }, 500);
}

Chúng ta sẽ dùng thư viện jQueryđể hỗ trợ cho việc viết script, để tích hợp jQueryvào mã nguồn chúng ta làm như sau:

Bước 1: vào trang https://code.jquery.com/

Bước 2: chọn phiên bản jQuerymới nhất, ở đây ta cho jQuery 3.x.

Bước 3: jQuerycung cấp rất nhiều gói khác nhau, để web xử lý nhanh gọn và hiệu quả ta chọn gói minified.

Bước 4: khi chọn minifiedthì một popupsẽ hiện ra, sau đó sao chép đoạn mã.

Bước 5: dán đoạn mã đã sao chép vào thẻ head

1
2
3
4
5
<script
    src="<a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a>"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

Chúng ta bắt đầu tìm hiểu hàm:

1
moveToImage( elem )

Đầu tiên, ta dùng jQueryđể lấy thành phần bodyvà html:

1
$( 'html, body' )

Ta chọn 2 thẻ bodyvà htmlvì đây là 2 thẻ chính bao hàm tất cả các thành phần của trang web, do đó việc xác định vị trí chủ yếu dựa trên 2 thẻ này.

Tiếp theo, đặt hiệu ứng cuộn trên thẻ htmlvà bodybằng hàm animate. Cấu trúc của hàm animatenhư sau:

1
(selector).animate({ styles }, speed, easing, callback)

Ở bài viết này, ta dùng thuộc tính scrollTopvà cho thời gian trễ là 1,5 giây.

Giá trị của scrollTopchính là khoảng cách của ảnh nền cần tìm đến vị trí 0 của thẻ html. Để tính được khoảng cách này, ta dùng hàm bên dưới:

1
$('div' + elem).offset().top

Đối tượng đầu vào là thẻ divcùng với class tương ứng được gán cho biến elem. Trong bài học của chúng ta, các giá trị của elemđó là:

1
[ ".forest" , ".eagle" , ".rhino" , ".owl" , ".lion" , ".bear" ]

Bằng cách dùng hàm phía trên, ta sẽ lấy được khoảng cách tương ứng cho từng class. Một lần nữa các bạn thấy rằng việc đặt tên quan trọng trong việc xử lý scriptnhư thế nào.

Cuối cùng, ta đặt tất cả vào hàm setTimeout để tạo độ trễ nửa giây, trước khi thanh cuộn bắt đầu chạy, điều này tạo cảm giác dịu hơn cho quan sát của người dùng.

1
2
3
setTimeout( function () {
    $( 'html, body' ).animate({scrollTop: $('div' + elem).offset().top}, 1500);
  }, 500);

4. Lời kết

Kết thúc bài học hôm nay, freetuts đã hướng dẫn các bạn tạo được hiệu ứng nhấn chuột trên menu thông qua đoạn script. Cảm ơn các bạn, hẹn gặp lại trong các bài viết sau.

Theo:https://freetuts.net

 

The post Parallax – Tạo hiệu ứng cuộn với thanh menu dọc appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-hieu-ung-cuon-voi-thanh-menu-doc/feed/ 0 Parallax – Tạo thanh menu dọc https://suamaynhanh.vn/phan-mem/parallax-tao-thanh-menu-doc/ https://suamaynhanh.vn/phan-mem/parallax-tao-thanh-menu-doc/#respond Thu, 13 Feb 2020 13:07:37 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14605 1. Phần HTML Trước hết hãy xem qua toàn bộ đoạn mã: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Tạo thanh menu dọc"

The post Parallax – Tạo thanh menu dọc appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua toàn bộ đoạn mã:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <div class="parallax">
    <div class="forest"></div>
    <div class="eagle"></div>
    <div class="rhino"></div>
    <div class="owl"></div>
    <div class="lion"></div>
    <div class="bear"></div>
    <div class="back"></div>
  </div>
  <div class="side-menu">
    <ul>
      <li class="forest">Forest</li>
      <li class="eagle">Eagle</li>
      <li class="rhino">Rhino</li>
      <li class="owl">Owl</li>
      <li class="lion">Lion</li>
      <li class="bear">Bear</li>
    </ul>
  </div>
</body>

Ở phần này, chúng ta sẽ tạo thêm thẻ divcho phần menu. Chúng ta sẽ khai báo tên các danh mục trong thẻ li. Lưu ý, các classcủa thẻ liphải tương ứng với tên class trên thẻ divcủa ảnh nền, việc này giúp chúng ta tiện xử lý trong quá trình chạy scriptở các bài học tiếp theo.

2. Phần CSS

Trước hết hãy xem qua toàn bộ đoạn mã:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.parallax > div.side-menu {
  position: fixed;
  top: 30%;
  left: 10px;
  background-color: transparent;
  opacity: 0.5;
  height: fit-content;
  height: -moz-fit-content;
  color: white;
  font-size: 20px;
  font-weight: 800;
  mix-blend-mode: difference;
  z-index: 99;
}
div.side-menu ul {
  padding: 0 10px;
  list-style: none;
}
div.side-menu ul li {
  margin: 20px;
  width: 100px;
  padding-bottom: 5px;
  transition: 1s ease;
  border-bottom: 2px solid white;
  box-sizing: border-box;
}
div.side-menu ul li:hover {
  cursor: pointer;
  padding-left: 50px;
}

Các bước thực hiện như sau:

Bước 1: tạo định dạng cho menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parallax > div.side-menu {
  position: fixed;
  top: 30%;
  left: 10px;
  background-color: transparent;
  opacity: 0.5;
  height: fit-content;
  height: -moz-fit-content;
  color: white;
  font-size: 20px;
  font-weight: 800;
  mix-blend-mode: difference;
  z-index: 99;
}

Thuộc tính quan trọng trong phần này là position: fixed nó giúp tạo vị trí cố định cho menu, chúng ta dùng thuộc tính topvà leftđể canh chỉnh menu ở vị trí cố định phù hợp.

Vì menu nằm trong thẻ div, nên sẽ kế thừa giá trị height: 100% chúng ta cần đặt lại giá trị height: fit-content . Lưu ý, để chạy thuộc tính này trên firefox, ta dùng height: -moz-fit-content .

Để cho chữ rõ nét, ta dùngfont-size cỡ lớn vàfont-weightgiá trị cao. Đặc biệt là do ảnh nên thay đổi màu sắc nên ta cần thêm thuộc tính

1
mix-blend-mode: difference

nó giúp cho màu chữ luôn tương phản với màu ảnh nền.

Cuối cùng, phải thiết lập z-index giá trị cao để menu nằm trên ảnh nền.

Bước 2: tạo định dạng cho các danh mục

1
2
3
4
5
6
7
8
9
10
11
12
13
div.side-menu ul {
  padding: 0 10px;
  list-style: none;
}
div.side-menu ul li {
  margin: 20px;
  width: 100px;
  padding-bottom: 5px;
  transition: 1s ease;
  border-bottom: 2px solid white;
  box-sizing: border-box;
}

Trước tiên, ta loại bỏ kiểu mặc định của thẻ ulbằng cách thiết lập thuộc tính list-style: none .

Chiều rộng của thẻ liđược đặt vừa phải với giá trị 100px. Do có tạo hiệu ứng hover nên, ta phải thiếp lập transitioncho từng thẻ liở đây ta cho thời gian là 1 giây.

Điều quan trọng trong phần này là đặt giá trị của thuộc tính:

1
box-sizing: border-box;

Vì giá trị mặc định là content-box, nên khi hover sẽ tạo ra sự co dãn cả khung, không giống như mong đợi. Freetuts sẽ giải thích rõ ở bước kế tiếp.

Bước 3: tạo hiệu ứng hover

1
2
3
4
div.side-menu ul li:hover {
  cursor: pointer;
  padding-left: 50px;
}

Ở bước này, freetuts sẽ giải thích vì sao thiết lậpbox-sizing: border-box như đã nên ở trên. Trước tiên, hãy xem box model dưới đây:

Ta thấy rằng thẻ liđã được thiết lập width: 100px do đó nếu giữ nguyên giá trịbox-sizing như mặc định thì widthở đây là chiều rộng của contentnên khi hover thì padding-left tăng lên, content vẫn giữ giá trị 100pxdẫn đến việc boxsẽ dãn ra không được như mong muốn.

Chính vì vậy, việc đặt lại giá trị box-sizing: border-box có nghĩa là chiều rộng của contentkhông phải là 100pxnữa, mà nó trở thành chiều rộng của phần box borderbên ngoài. Điều này giúp khi hover chỉ phần chữ bên trong di chuyển và cả boxvẫn được giữ nguyên.

Theo:https://freetuts.net

 

 

 

The post Parallax – Tạo thanh menu dọc appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-thanh-menu-doc/feed/ 0 Parallax – Tạo chuỗi ảnh nền https://suamaynhanh.vn/phan-mem/parallax-tao-chuoi-anh-nen/ https://suamaynhanh.vn/phan-mem/parallax-tao-chuoi-anh-nen/#respond Thu, 13 Feb 2020 13:05:12 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14604 1. Phần HTML Trước hết hãy xem qua đoạn mã dưới đây: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Tạo chuỗi ảnh nền"

The post Parallax – Tạo chuỗi ảnh nền appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem qua đoạn mã dưới đây:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Parallax</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="parallax.css">
  <script src="parallax.js"></script>
</head>
<body>
  <div class="parallax">
    <div class="forest"></div>
    <div class="eagle"></div>
    <div class="rhino"></div>
    <div class="owl"></div>
    <div class="lion"></div>
    <div class="bear"></div>
    <div class="back"></div>
  </div>
</body>
</html>

Bố cục khá đơn giản  với một thẻ divchính và trong đó lần lượt là các thẻ divcon. Các bạn dự tính trang parallax của các bạn có bao nhiêu ảnh nền thì trong phần này sẽ có bấy nhiêu thẻ divcon.

2. Phần CSS

Trước hết hãy xem qua đoạn mã dưới đây:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
html, body, div {
  height: 100%;
}
.parallax {
  position: relative;
}
.parallax > div {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
div.forest {
  background-image: url("forest.jpg");
}
div.eagle {
  background-image: url("eagle.jpg");
}
div.rhino {
  background-image: url("rhino.jpg");
}
div.owl {
  background-image: url("owl.jpg");
}
div.lion {
  background-image: url("lion.jpg");
}
div.bear {
  background-image: url("bear.jpg");
}
div.back {
  background-image: url("back.jpg");
}

Bước 1: định dạng height: 100% cho các thẻ div

1
2
3
4
5
6
7
html, body, div {
  height: 100%;
}
.parallax > div {
  height: 100%;
}

Mục đích của phần này là tạo độ cao cho ảnh nên bằng với góc nhìn trên trình duyệt. Lưu ý, điều này rất quan trọng vì không phải ảnh nền nào cũng có kích thước giống nhau, nên thao tác này được xem như là đồng bộ hóa ảnh nền.

Bước 2: thiết lập các thuộc tính cho ảnh nền

1
2
3
4
5
6
7
8
9
10
11
.parallax > div {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

Ở bước này, các thuộc tính liên quan đến backgroundsẽ quyết định các thể hiện cho ảnh nền.

background-attachment: fixed giúp cho tạo hiệu ứng ảnh sau đè lấp lên ảnh trước khi thực hiện thao tác cuộn với chuột.

background-size: cover giúp  ảnh bao phủ đầy đủ trong góc nhìn của trình duyệt.

background-postionvà background-repeat giúp bổ trợ thêm cho việc canh chỉnh ảnh.

Ngoài ra, còn một số cấu hình khác cho các thẻ con như displayta sẽ bàn trong bài học sau.

Bước 3: chèn từng ảnh vào thẻ divcon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div.forest {
  background-image: url("forest.jpg");
}
div.eagle {
  background-image: url("eagle.jpg");
}
div.rhino {
  background-image: url("rhino.jpg");
}
div.owl {
  background-image: url("owl.jpg");
}
div.lion {
  background-image: url("lion.jpg");
}
div.bear {
  background-image: url("bear.jpg");
}
div.back {
  background-image: url("back.jpg");
}

Việc này khá đơn giản chỉ dùng thuộc tínhbackground-image và chỉ đường dẫn đến ảnh cần minh họa. Nhưng điều mà freetuts muốn nhắc đến ở đây đó là nguồn ảnh miễn phí chất lượng bạn có thể dùng cho trang web mà không bị vướng phải các vấn đề bản quyền cũng như là pháp lý. Freetuts chia sẻ các bạn một số trang web cho tải ảnh miễn phí với nhiều chủ đề và dĩ nhiên là bạn có thể dùng với bất cứ mục đích gì kể cả thương mại.

  • https://pixabay.com/ trang này nhiều ảnh chất lượng khi bạn tải sẽ có nhiều lựa chọn với các chất lượng ảnh khác nhau.
  • https://www.pexels.com/ trang này không chỉ chia sẻ ảnh, mà còn cả video chất lượng.
  • https://unsplash.com/ trang này số lượng ảnh nhiều và đa dạng về chủng loại cũng như là chất lượng. Thậm chí bạn có thể tìm thấy thông tin ảnh được chụp bằng máy gì, tiêu cự, ống kính …

Trên đây là những tóm tắt về nguồn tải ảnh, freetuts hy vọng các bạn tìm được những bức ảnh ưng ý nhất.

3. Lời kết

Sau bài học này, các bạn đã học được cách tạo chuỗi ảnh nền trong trang web với hiệu ứng parallax. Các bạn có thể tùy biến thay đổi những hình ảnh mình thích hoặc phù hợp nhất đối với nội dung trang web mà các bạn cần hướng đến. Cảm ơn các bạn, hẹn gặp lại trong bài viết tiếp theo.

Theo:https://freetuts.net

 

The post Parallax – Tạo chuỗi ảnh nền appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-tao-chuoi-anh-nen/feed/ 0 Parallax là gì – Hiệu ứng Parallax effect là gì? https://suamaynhanh.vn/phan-mem/parallax-hieu-ung-parallax-la-gi/ https://suamaynhanh.vn/phan-mem/parallax-hieu-ung-parallax-la-gi/#respond Thu, 13 Feb 2020 13:03:02 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14603 Parallax là gì – Hiệu ứng Parallax effect là gì sẽ được tác giả giới thiệu chi tiết ở bài viết …

Đọc tiếp "Parallax là gì – Hiệu ứng Parallax effect là gì?"

The post Parallax là gì – Hiệu ứng Parallax effect là gì? appeared first on Sửa Máy Nhanh.

]]> Parallax là gì – Hiệu ứng Parallax effect là gì sẽ được tác giả giới thiệu chi tiết ở bài viết sau đây mời các bạn cùng tìm hiểu nhé!

1. Parallax là gì?

Hiệu ứng Parallax là hiệu ứng mà hình nền của trang web sẽ di chuyển với những tốc độ khác nhau so với các đối tượng khác khi lăn chuột cuộn xuống hoặc lên. Thậm chí, một số trang web còn làm hiện ứng theo cách cuộn ngang.

Lịch sử hình thành hiệu ứng này xuất phát điểm từ giao diện game nhưng trong những năm gần đây nó đã lan rộng và trở thành một xu thế mới trong thiết kế website hiện đại. Xem ví dụ bên dưới

Từ Parallax xuất phát thuật ngữ trong thiên văn học, miêu tả sử biểu hiện hướng di chuyển khác nhau khi nhìn chúng với các góc nhìn khác nhau.

Trong thế giới kỹ thuật, một lập trình viên có thể tạo ra hiệu ứng này bằng nhiều cách khác nhau.

Để bắt đầu cho một trang web có hiệu ứng Parallax, thì chúng ta phải lên ý tưởng từ bố cục cho đến các đổi tượng chuyển động như hình ảnh hoặc đoạn văn bản.

Việc định hình nói trên sẽ tạo cho người xem cảm giác khác lạ như rơi vào một không gian đa chiều trong không gian.

2. Ý tưởng chia bố cục cho trang Parallax là gì

Hiện nay, có vô vàng ý tưởng để tạo nên một trang web với hiệu ứng Parallax, các bạn có thể dùng từ khóa Parallax là gì để tìm kiếm. Nhìn chung, thì đa phần các trang web đó đều có những bố cục chung như sau:

Chuỗi ảnh nền:

Ảnh nền chắc chắn sẽ là một đối tượng không thể thiếu trong web với hiệu ứng Parallax. Lưu ý bạn có thể sử dụng một ảnh nền với kích thước dài hoặc nhiều ảnh nền để thể hiện những nội dung khác nhau.

div.forest {
  background-image: url("forest.jpg");
}
div.eagle {
  background-image: url("eagle.jpg");
}
div.rhino {
  background-image: url("rhino.jpg");
}
div.owl {
  background-image: url("owl.jpg");
}
div.lion {
  background-image: url("lion.jpg");
}
div.bear {
  background-image: url("bear.jpg");
}
div.back {
  background-image: url("back.jpg");
  justify-content: center;
}

Thanh menu dọc hoặc ngang:

Với những trang web này thì gần như thành menu trở nên không cần thiết nữa nhưng với việc thêm vào thanh menu và những hiệu ứng chuyển động của nó làm web trở nên bắt mắt.

<div class="side-menu">
  <ul>
    <li class="forest" onclick="moveToImage('.forest')">Forest</li>
    <li class="eagle" onclick="moveToImage('.eagle')">Eagle</li>
    <li class="rhino" onclick="moveToImage('.rhino')">Rhino</li>
    <li class="owl" onclick="moveToImage('.owl')">Owl</li>
    <li class="lion" onclick="moveToImage('.lion')">Lion</li>
    <li class="bear" onclick="moveToImage('.bear')">Bear</li>
  </ul>
</div>

Chuỗi nhạc nền:

Âm thanh là một phần không thể thiếu, bởi vì Parallax xuất phát từ game nên việc bổ trợ âm thanh sẽ rất cần thiết.

Thường lệ trong trang web chúng ta dùng những âm thanh nhẹ, thanh hoặc dịu dàng để tạo cảm giác thoải mái cho người dùng, cũng như kết hợp với với hiệu ứng cuộn.

<audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is
       because your browser does not support the audio element.</p>
</audio>

Các đối tượng chuyển động:

Ảnh động hoặc ảnh vector sẽ được dùng nhiều với những ưu điểm riêng vì có thể thao tác thay đổi màu sắc cũng như những chuyển động phức tạp mà ảnh thường không làm được.

<div class="shape">
  <img src="eagle.svg">
  <img src="rhino.svg">
  <img src="owl.svg">
  <img src="lion.svg">
  <img src="bear.svg">
</div>

Trang mở đầu và kết thúc:

Tùy từng nội dung mà sẽ khai thác trang mở đầu và kết thúc. Trong loạt bài viết này, freetuts cũng sẽ hướng dẫn các bạn thực hiện các trang đó.

<div class="forest"></div>
<div class="back">
  <div onclick="goHome()">
    <span><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></span>
  </div>
</div>

Trong loạt bài viết này, freetuts sẽ lần lượt hướng dẫn các bạn từng bước cụ thể trong danh sách trên để tạo ra một trang Parallax hoàn chỉnh.

3. Lời kết

Như vậy là đã xong phần tìm hiểu và cách thức bố cục của trang web với hiệu ứng Parallax, cũng qua đây các bạn đã hiểu hiệu ứng parallax là gì rồi phải không nào. Các bạn hãy xem tiếp bài học tiếp theo nhé.

Theo:https://freetuts.net

XEM QUA BÀN PHÍM CHO IPAD  VÀ BÀN PHÍM CHO MÁY TÍNH BẢNG

Parallax là gì

Parallax là gì

Parallax là gì

 

 

The post Parallax là gì – Hiệu ứng Parallax effect là gì? appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-hieu-ung-parallax-la-gi/feed/ 0 Parallax – Hoàn thiện bố cục, hiệu ứng và mở rộng https://suamaynhanh.vn/phan-mem/parallax-hoan-thien-bo-cuc-hieu-ung-va-mo-rong/ https://suamaynhanh.vn/phan-mem/parallax-hoan-thien-bo-cuc-hieu-ung-va-mo-rong/#respond Thu, 13 Feb 2020 12:59:42 +0000 https://suamaynhanh.vn/?post_type=wtg_soft&p=14602 1. Phần HTML Trước hết hãy xem lại toàn bộ mã nguồn: 1 2 3 4 5 6 7 8 9 …

Đọc tiếp "Parallax – Hoàn thiện bố cục, hiệu ứng và mở rộng"

The post Parallax – Hoàn thiện bố cục, hiệu ứng và mở rộng appeared first on Sửa Máy Nhanh.

]]> 1. Phần HTML

Trước hết hãy xem lại toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Parallax</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<a href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</a>">
  <link rel="stylesheet" type="text/css" media="screen" href="parallax.css">
  <script
              src="<a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a>"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous">
  </script>
  <script src="parallax.js"></script><!--b3 menu click script-->
  <!--b4 scroll effects script-->
  <!--b5 text scroll effect script-->
  <!--b6 add audio-->
  <!--b7 first page and last page-->
  <!--b8 svg shape moving-->
  <!--b9 Tom tat nguon tai lieu goi y-->
  <!--b0 gioi thieu cach tao bo cuc tham khao tai lieu-->
</head>
<body>
  <div class="parallax">
    <div class="shape">
      <img src="eagle.svg">
      <img src="rhino.svg">
      <img src="owl.svg">
      <img src="lion.svg">
      <img src="bear.svg">
    </div>
    <audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>
    <div onclick="toggleMuteAudio()" class="volume">
      <span><i class="fa fa-volume-up" aria-hidden="true"></i>
      </span>
    </div>
    <div class="side-menu"><!--b2 menu-->
      <ul>
        <li class="forest" onclick="moveToImage('.forest')">Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')">Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')">Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')">Owl</li>
        <li class="lion" onclick="moveToImage('.lion')">Lion</li>
        <li class="bear" onclick="moveToImage('.bear')">Bear</li>
      </ul>
    </div>
    <!--b1 background-image-->
    <div class="forest"></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span>
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back">
      <div onclick="goHome()">
        <span><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></span>
      </div>
    </div>
  </div>
  <div>Icons made by <a href="<a href="https://www.freepik.com/">https://www.freepik.com/</a>" title="Freepik">Freepik</a> from <a href="<a href="https://www.flaticon.com/">https://www.flaticon.com/</a>"               title="Flaticon">www.flaticon.com</a> is licensed by <a href="<a href="http://creativecommons.org/licenses/by/3.0/">http://creativecommons.org/licenses/by/3.0/</a>"              title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</body>
</html>

Các lưu ý chính cho phần HTML:

– Thư viện liên kết như jQueryvà font-awesome 4.7: khi đã bước chân và thế giới web thì nhất định bạn phải biết đến những thư viện cơ bản này. Vì độ phổ biến của chúng rất rộng rãi.

– Vấn đề bản quyền hình ảnh: như freetuts đã giới thiệu cho các bạn những trang web cung cấp những hình ảnh miễn phí. Tuy nhiên, chúng ta cũng cần chú ý thêm thẻ divphụ để ghi rõ nguồn tránh những vấn đề pháp lý về sau.

– Cách đặt tên class: ở trong loạt bài này, freetuts chủ động tạo những tên class tương đồng nhau để tiện cho việc sử dụng lại trong đoạn JavaScript.

– Thứ tự các thẻ div ngang hàng rất quan trọng vì ta đang trong một trang web có hiệu ứng parallax. Các bạn chú ý những giá trị z-index mà freetuts đã thiết lập.

2. Phần CSS

Trước hết hãy xem lại toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
html, body, div {
  height: 100%;
}
.parallax {
  position: relative;
}
.parallax > div {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.parallax > div > p {
  width: 60%;
  text-align: justify;
  color: white;
  mix-blend-mode: difference;
  margin: 50px;
  font-size: 20px;
}
.parallax div.shape {
  position: absolute;
  z-index: 99;
}
.parallax .shape > img {
  height: 50px;
  width: 50px;
  position: absolute;
}
.parallax .shape > img:nth-child(1) {
  top: 50px;
  left: 100px;
  transform: translate(0, 0);
  animation: eagle 10s ease-in infinite;
}
.parallax .shape > img:nth-child(2) {
  bottom: 150px;
  left: 180px;
  transform: rotateZ(0deg) translateY(-10px);
  animation: rhino 4s linear infinite;
}
.parallax .shape > img:nth-child(3) {
  bottom: 500px;
  left: 800px;
  transform: rotateZ(40deg) translate(0px,0px);
  animation: owl 3s ease-in infinite;
}
.parallax .shape > img:nth-child(4) {
  top: 400px;
  left: 500px;
  animation: lion 1.5s ease-out infinite;
}
.parallax .shape > img:nth-child(5) {
  top: 500px;
  left: 800px;
  opacity: 0;
  transition: 0.5s ease;
  animation: bear 2s ease-in-out infinite;
}
@keyframes eagle {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  55% {
    transform: rotateY(180deg) translate(-540px, 45px);
  }
  95% {
    transform: rotateY(180deg) translate(40px, 45px);
  }
  100% {
    transform: translate(0,0) rotateY(0deg);
  }
}
@keyframes owl {
  0% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
  30% {
    transform: rotateZ(-40deg) translate(20px,10px);
  }
  50% {
    transform: rotateZ(40deg) translate(10px,40px);
  }
  70% {
    transform: rotateZ(-40deg) translate(0px,50px);
  }
  100% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
}
@keyframes bear {
  50% {
    opacity: 1;
    transform: scale(2,2)
  }
  100% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
}
@keyframes lion {
  10% {
    transform: rotateX(360deg);
  }
  15% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateY(360deg)
  }
}
@keyframes rhino {
  50% {
    transform: rotateZ(-40deg) translateY(10px);
  }
  70% {
    transform: rotateZ(-40deg) translateY(20px);
  }
  100% {
    transform: rotateZ(0deg) translateY(-10px);
  }
}
.parallax audio {
  display: none;
}
.parallax > div.volume {
  height: 50px;
  width: 50px;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;
  opacity: 0.4;
  border-radius: 10px;
  transition: 0.5s ease-in;
}
.parallax > div.volume:hover {
  opacity: 1;
  font-size: 25px;
  cursor: pointer;
}
.parallax > div.side-menu {
  position: fixed;
  top: 30%;
  left: 10px;
  background-color: transparent;
  opacity: 0.5;
  height: fit-content;
  height: -moz-fit-content;
  color: white;
  font-size: 20px;
  font-weight: 800;
  mix-blend-mode: difference;
  z-index: 99;
}
div.side-menu ul {
  padding: 0 10px;
  list-style: none;
}
div.side-menu ul li {
  margin: 20px;
  width: 100px;
  padding-bottom: 5px;
  transition: 1s ease;
  border-bottom: 2px solid white;
  box-sizing: border-box;
}
div.side-menu ul li:hover {
  cursor: pointer;
  padding-left: 50px;
}
.active {
  padding-left: 50px;
}
div.forest {
  background-image: url("forest.jpg");
}
div.eagle {
  background-image: url("eagle.jpg");
}
div.rhino {
  background-image: url("rhino.jpg");
}
div.owl {
  background-image: url("owl.jpg");
}
div.lion {
  background-image: url("lion.jpg");
}
div.bear {
  background-image: url("bear.jpg");
}
div.back {
  background-image: url("back.jpg");
  justify-content: center;
}
div.back > div {
  font-size: 50px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid black;
}
div.back > div:hover {
  transition: 1s ease-in;
  background-color: azure;
  color: #196f3d ;
  border: 2px solid #196f3d ;
  cursor: pointer;
}
.parallax > div > p > span {
  width: 100%;
  float: left;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation: text 10s 1.5s ease-in-out infinite;
}
.parallax > div > p > span:first-child{
  animation-delay: 2s;
}
.parallax > div > p > span:last-child{
  animation-delay: 1s;
}
@keyframes text {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}

Các lưu ý chính cho phần CSS:

– Thiết lập height: 100%cho thẻ divchứa ảnh nền và thẻ html, body.

– Màu sắc của văn bản phải tương phản với màu của ảnh nền bằng cách thiết lập mix-blend-mode: difference .

– Độ trễ và thời gian của các hiệu ứng là điều quan trọng trong web parallax.

3. Phần Javascript

Trước hết hãy xem lại toàn bộ mã nguồn:

1
2
3
4
5
6
7
8
9
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function moveToImage( elem ) {
  setTimeout( function () {
    $( 'html, body' ).animate({scrollTop: $('div' + elem).offset().top}, 1500);
    setTimeout( function () {
      $( "audio" ).attr("src", elem + ".mp3");
    }, 1500)
  }, 500);
}
function toggleMuteAudio(){
  $("audio").prop("muted",!$("audio").prop("muted"));
  if($("audio").prop("muted")) {
    $(".volume i").removeClass("fa-volume-up");
    $(".volume i").addClass("fa-volume-off");
  }
  else {
    $(".volume i").removeClass("fa-volume-off");
    $(".volume i").addClass("fa-volume-up");
  }
}
function goHome() {
  moveToImage(".forest");
}
$(document).ready(function () {
  //$("html, body").animate({scrollTop: $(document).height()}, 50000);
  $("ul li").click(function () {
      setTimeout(function () {
          
      }, 300);
  });
  $(window).scroll(function() {
    $("li").removeClass("active");
    if(Math.abs($(window).scrollTop() - $("div.forest").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".forest.mp3") {
        $("audio").attr("src", ".forest.mp3");
      }
      $("li.forest").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.eagle").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".eagle.mp3") {
        $("audio").attr("src", ".eagle.mp3");
      }
      $("li.eagle").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.rhino").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".rhino.mp3") {
        $("audio").attr("src", ".rhino.mp3");
      }
      $("li.rhino").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.owl").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".owl.mp3") {
        $("audio").attr("src", ".owl.mp3");
      }
      $("li.owl").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.lion").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".lion.mp3") {
        $("audio").attr("src", ".lion.mp3");
      }
      $("li.lion").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.bear").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".bear.mp3") {
        $("audio").attr("src", ".bear.mp3");
      }
      $("li.bear").addClass("active");
    }
    else if(Math.abs($(window).scrollTop() - $("div.back").offset().top) < $(window).height()/2) {
      if($("audio").attr("src") != ".back.mp3") {
        $("audio").attr("src", ".back.mp3");
      }
      $("li.back").addClass("active");
    }
  });
});

Các lưu ý chính cho phần JavaScript:

– Hiểu được điều kiện cho khi cuộn vào ảnh nền mới.

– Kiểm tra bài nhạc đã tồn tại trước đó trong thẻ audio giúp thao tác cuộn không làm ngắt quãng âm nền.

– Trả về giá trị mặc định của thẻ litrước khi thiết lập gía trị mới.

4. Phần mở rộng

Freetuts xin tặng các bạn đoạn mã JavaScriptkiểm tra một thẻ bất kỳ có năm trong màn hình cửa sổ trình duyệt hiện tại không:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return (
      ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) ||
      (((elemBottom >= docViewBottom) && (elemTop >= docViewTop)) &&
      ((docViewBottom - elemTop) > $(window).height()/2)) ||
      (((elemBottom <= docViewBottom) && (elemTop <= docViewTop)) &&
      ((elemBottom - docViewTop) > $(window).height()/2))
    );
}

5. Lời kết

Như vậy là các bạn đã hoàn thành nội dụng của loạt bài hiệu ứng parallax. Cảm ơn các bạn đã theo dõi bài viết này.

Theo:https://freetuts.net

 

 

The post Parallax – Hoàn thiện bố cục, hiệu ứng và mở rộng appeared first on Sửa Máy Nhanh.

]]> https://suamaynhanh.vn/phan-mem/parallax-hoan-thien-bo-cuc-hieu-ung-va-mo-rong/feed/ 0