Background Slide, Hiệu ứng tự chuyển đổi hình nền cho web Xenforo

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
Chào các bạn, đôi khi cái background của web bạn nó cứ có một hình nằm chình ình đó nhìn sẽ chán lắm đúng không? Một số bạn đề ra ý kiến là có thể làm sao cho nó tự thay đổi hình nền thì làm như thế nào nhỉ?
hôm nay mình sẽ hướng dẫn các bạn cách làm cho phông nền của website bạn nhìn mới mẻ và thú vị hơn nhé.

Demo hình nền sẽ tự chuyển:

1.png


2.png


3.png


4.png


5.png

Đầu tiên là các bạn hãy chuẩn bị vài tấm hình nền đẹp.
tiến hành nào
Đầu tiên bạn mở Template page_container_js_head của style đang dùng và thêm vào cuối các dòng sau
Mã:
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.backstretch([
      "http://i543.photobucket.com/albums/gg452/tuanpbfb/1226024710.jpg"
   , "http://vuiqua99.wap.sh/hinh-nen/lien-minh-huyen-thoai/109.jpg"
   , "http://w.game8.vn/relax/thaivinhau/09-2012/1109-02-hinh1a.jpg"
   , "http://hinhanh.giare365.net/datafiles/kietxuat/12960254964746_1ty.vn-game-chien-dau-wallpaper-hinh-nen-gamecj_5011.jpg"
   , "http://hinh-nen.org/images/131015Hinh-nen-game-hd.jpg"
      ], {duration: 5000, fade: 1500});
});
</script>

Bước tiếp theo bạn tải file js ở file đính kèm up lên thư mục js của xenforo. Vậy là xong rồi đó
Lưu lại và cảm nhận. Khuyến cáo nên dùng ảnh kích thước lớn nha. Chúc các bạn thành công.


Nguồn: congngheaz.com​
 

Đính kèm

  • jquery.backstretch.min.rar
    1.9 KB · Lượt xem: 64

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
:)) chỉ cho ai muốn đẹp thôi mà :)), chém dữ :3
 
  • Like
Reactions: THB

2L.Ohayo

Cộng Sự Đắc Lực
Thành viên BQT
Tham gia
08/03/2015
Bài viết
761
Được Like
835
cái gì cũng có giá của nó. muốn đẹp thì phải chịu nặng :))
 
  • Like
Reactions: THB

2L.Ohayo

Cộng Sự Đắc Lực
Thành viên BQT
Tham gia
08/03/2015
Bài viết
761
Được Like
835
à mà thím @PVS (păng vệ sinh) cho hỏi phát, áp dụng cái trên cho chỉ background của header thì làm sao nhỉ?
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
@2L.Ohayo :nếu dùng cách này thì không áp dụng được đâu ^^, phải dùng cách khác :D
 
  • Like
Reactions: THB

2L.Ohayo

Cộng Sự Đắc Lực
Thành viên BQT
Tham gia
08/03/2015
Bài viết
761
Được Like
835
chán hầy :(
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
@2L.Ohayo : mình tìm trên xenforo thì có, nhưng mà nó bán với giá 6$ thì phải :D, nên đành bó tay ^^
 

dev.xf

Thượng Đế
Tham gia
28/02/2015
Bài viết
449
Được Like
518
à mà thím @PVS (păng vệ sinh) cho hỏi phát, áp dụng cái trên cho chỉ background của header thì làm sao nhỉ?
dùng bình thường. chứ có điều dùng thế lag thêm chứ làm gì
 
  • Like
Reactions: THB

darkvn88

Thượng Đế
Tham gia
15/05/2015
Bài viết
12
Được Like
13
Mã:
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.backstretch([ "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/201203219HT4C48YJ75J6G49.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/20120321ECXXUEGLQD2B34YO.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/201203212JUD7E59LMAZ7XYX.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/20120321OKKU5PJ2E2L06065.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/20120321UQWYQHVBCMTT5ONB.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/20120321G1N1A885OZ7U5US8.jpg" , "http://uploadcdn.webzen.com/Files/Clara/portal-inquiry-notice/2012/03/21/20120321I81GGFEQ35VJPJ5H.jpg" ], {duration: 5000, fade: 1500}); }); </script>

Mình copy y nguyên thế này chèn vào page_container_js_head như thế này nguyên file

Mã:
    <script src="{$jQuerySource}"></script>   
    <xen:if is="{$jQuerySource} != {$jQuerySourceLocal}">
        <script>if (!window.jQuery) { document.write('<scr'+'ipt type="text/javascript" src="{$jQuerySourceLocal}"><\/scr'+'ipt>'); }</script>
    </xen:if><xen:if is="{$xenOptions.uncompressedJs} == 1 OR {$xenOptions.uncompressedJs} == 3">
    <script src="{$javaScriptSource}/jquery/jquery.xenforo.rollup.js?_v={$xenOptions.jsVersion}"></script></xen:if>   
    <script src="{xen:helper javaScriptUrl, '{$javaScriptSource}/xenforo/xenforo.js?_v={$xenOptions.jsVersion}'}"></script>
<!--XenForo_Require:JS-->
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.backstretch([ "http://i543.photobucket.com/albums/gg452/tuanpbfb/1226024710.jpg" , "http://vuiqua99.wap.sh/hinh-nen/lien-minh-huyen-thoai/109.jpg" , "http://w.game8.vn/relax/thaivinhau/09-2012/1109-02-hinh1a.jpg" , "http://hinhanh.giare365.net/datafiles/kietxuat/12960254964746_1ty.vn-game-chien-dau-wallpaper-hinh-nen-gamecj_5011.jpg" , "http://hinh-nen.org/images/131015Hinh-nen-game-hd.jpg" ], {duration: 5000, fade: 1500}); }); </script>

và đã download file js về copy vào thư mục js trên forum nhưng không chạy đc. Bạn xem lại giúp mình mình làm vậy đúng chưa
Mình đang dùng xenforo 1.4.7
 
  • Like
Reactions: THB

tranthanh

Thượng Đế
Tham gia
07/09/2015
Bài viết
95
Được Like
36
chắc cái này làm cho vui chứ load ảnh kiểu này chạy chậm sao chơi được :)
 

phong 1997

Thượng Đế
Tham gia
17/11/2016
Bài viết
87
Được Like
18
add giúp em mới nó không được ạ nó vẫn trắng xóa ạ
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom