peri hokiperihokiclarustologisticsrimashaop.compola taktis menang gates of olympus x1000 perihokipemain perihoki bongkar trik jepep starlight princess x1000perihoki beri panduan lengkap bermain mahjong ways 2 pgsofttips cara penghasil uang pgsoft mahjong ways 2 perihokimahjong wins 3 perihoki memberikan penggali terbesarfenomena gates of olympus buka peluang besar bagi duta76cara dapat pola emas rahasia di duta7 wild west goldtrik menang pgsoft mahjong ways 2 modal receh maxwin duta76duta76 main pgsoft mahjong ways 2 di sela istirahatscatter hitam mahjong wins 3 spin pasti jepe duta76pola petir tersembunyi gates of olympus perihokipgsoft perkuat mahjong ways 2 di akun perihokiperihoki beri pola jitu mahjong wins 3 auto maxwin5 scatter jackpot driver ojolstrategi satpam scatter mahjongstrategi menang mahjong abc1131scatter emas pabrik wonosobomodal tipis scatter jadi cuanrtp mahjong ways supir menanginsting kuat bermain mahjong waysmengungkap keunggulan mahjong waysserunya mahjong bermodal kecil untung melimpahstrategi terbaik untuk menang mahjongterus main terus gacormenang banyak dengan scatter mahjong ways1menggali kehebatan mahjong winsrahasia nurul di mahjong waysstrategi mahjong yang mengubah permainan andateknik menang mahjong ways yang efektif

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 314

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 315

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 316

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 317

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): Headers already sent. You cannot change the session module's ini settings at this time

Filename: drivers/Session_files_driver.php

Line Number: 108

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Cannot change save handler when headers already sent

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_start(): Cannot start session when headers already sent

Filename: Session/Session.php

Line Number: 143

Backtrace:

File: /home/blogchuabenh/domains/freetuts.net/public_html/site/controllers/Main_controller.php
Line: 10
Function: __construct

File: /home/blogchuabenh/domains/freetuts.net/public_html/sources/index.php
Line: 299
Function: require_once

File: /home/blogchuabenh/domains/freetuts.net/public_html/index.php
Line: 26
Function: require_once

Parallax - Chèn nhạc nền theo chuyển động cuộn
CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Parallax - Chèn nhạc nền theo chuyển động cuộn

Trong bài viết hôm này, freetuts sẽ hướng dẫn các bạn chèn nhạc nền vào trang web cùng với hiệu ứng thay đổi nhạc khi màn hình cuộn sang một trang khác. Đây là sự kết hợp thường thấy trong các trang web dùng hiệu ứng parallax. Nào chúng ta cùng bắt đầu.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Phần HTML

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

<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ẻ audio và một thẻ div mới để hiển thị bật tắt âm thanh. Lưu ý, là ta dùng thẻ i với định dạng bên dưới:

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

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

Bài viết này được đăng tại [free tuts .net]

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

2. Phần CSS

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

.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

.parallax audio {
  display: none;
}

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

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

.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 hover cho thẻ div.volume

.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:

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

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 muted trong thẻ audio từ true sang false hoặc ngược lại. Đồng thời thay đổi icon của volume khi 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

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.net/parallax-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.

Danh sách file tải về

Tên file tải về Pass giải nén
Parallax - Chèn nhạc nền theo chuyển động cuộn freetuts.net hoặc gameportable.net
Nhạc nền freetuts.net hoặc gameportable.net

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Top