Block hiệu ứng tuyết rơi nukeviet 4.x
admin
2021-11-27T00:01:29-05:00
2021-11-27T00:01:29-05:00
http://dacloi.net/block-nukeviet-25/block-hieu-ung-tuyet-roi-nukeviet-4-x-49.html
http://dacloi.net/uploads/news/2021_11/home_1.png
Sourcode teamplate free | Nukeviet HCMC | PSD file teamplate | Figma teamplate | Nukeviet
http://dacloi.net/uploads/vncode.png
VNCODE xin chia sẽ đến mọi người block tuyết rơi đã tạo ra một mẫu khung cảnh như sau, bạn có thể sử dụng nó để chèn vào website. Chia sẽ code tại hiệu ứng tuyết rơi, khung cảnh giáng sinh cho website của mình
Hướng dẫn làm block nukeviet trang trí Giáng Sinh cho website của bạn như tạo tuyết rơi, khung cảnh chuông giáng sinh, cây thông....
Hòa cùng với không khí Giáng Sinh từ các con đường, cửa hàng, nhà hàng, trung tâm thương mại, văn hóa... cho tới trong các nhà thờ chúng ta cũng nên chuẩn bị cho website của mình một khung cảnh để cùng khách hàng đón Giáng Sinh online. VNCODE đã tạo ra một mẫu khung cảnh như sau, bạn có thể sử dụng nó để chèn vào website.
Chúng ta tạo 3 file block theo chuẩn nukviet
global.tuyet_roi.ini
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
Hòa cùng với không khí Giáng Sinh từ các con đường, cửa hàng, nhà hàng, trung tâm thương mại, văn hóa... cho tới trong các nhà thờ chúng ta cũng nên chuẩn bị cho website của mình một khung cảnh để cùng khách hàng đón Giáng Sinh online. VNCODE đã tạo ra một mẫu khung cảnh như sau, bạn có thể sử dụng nó để chèn vào website.
Chúng ta tạo 3 file block theo chuẩn nukviet
global.tuyet_roi.ini
<?xml version="1.0" encoding="utf-8"?>
<block>
<info>
<name>Config TUYẾT RƠI</name>
<author>.,Jsc</author>
<website></website>
<description></description>
</info>
<config>
<company_name>Công ty cổ phần phát triển nguồn mở Việt Nam</company_name>
</config>
<datafunction>nv_tuyet_roi_config</datafunction>
<submitfunction>nv_tuyet_roi_submit</submitfunction>
</block>
global.tuyet_roi.php
<?php
/**
* @Project NUKEVIET 4.x
* @Author VINADES.,JSC ([email protected])
* @Copyright (C) 2014 VINADES ., JSC. All rights reserved
* @License GNU/GPL version 2 or any later version
* @Createdate Jan 17, 2011 11:34:27 AM
*/
if (! defined('NV_MAINFILE')) {
die('Stop!!!');
}
if (! nv_function_exists('nv_tuyet_roi')) {
/**
* nv_menu_theme_default_footer()
*
* @param mixed $block_config
* @return
*/
function nv_tuyet_roi($block_config)
{
global $global_config, $lang_global;
if (file_exists(NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/blocks/global.tuyet_roi.tpl')) {
$block_theme = $global_config['module_theme'];
} elseif (file_exists(NV_ROOTDIR . '/themes/' . $global_config['site_theme'] . '/blocks/global.tuyet_roi.tpl')) {
$block_theme = $global_config['site_theme'];
} else {
$block_theme = 'default';
}
$xtpl = new XTemplate('global.tuyet_roi.tpl', NV_ROOTDIR . '/themes/' . $block_theme . '/blocks');
$xtpl->assign('LANG', $lang_global);
$xtpl->assign('NV_BASE_SITEURL', NV_BASE_SITEURL);
$xtpl->parse('main');
return $xtpl->text('main');
}
}
if (defined('NV_SYSTEM')) {
$content = nv_tuyet_roi($block_config);
}
global.tuyet_roi.tpl
<!-- BEGIN: main -->
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
font-family: 'Raleway', sans-serif;
color: #000;
}
.position-absolute{
position: fixed;
bottom: 5px;
left: 0;
z-index: 9999999;
}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
</div>
<div class="position-absolute">
<img src="https://www.asuzac-acm.com.vn/uploads/ong-gia-noel.gif" >
</div>
<!-- END: main -->
Sau khi tạo xong các file, tiến hành upload lên block của giao diện /themes/tên thư mục theme đang sử dụng/blocks . Bắt đầu trải nghiệm hiệu ứng thôi nào Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
File đính kèm
Tác giả: admin
Ý kiến bạn đọc
Bạn cần đăng nhập với tư cách là Thành viên chính thức để có thể bình luận
Những tin mới hơn
-
Block nukeviet hiệu ứng cánh hoa mai rơi
(29/12/2021) -
Hướng dẫn làm menu đa cấp mobile nukeviet
(15/03/2022) -
Hướng dẫn tạo app id Facebook trong block facebook message nukeviet
(25/06/2022) -
Hướng dẫn tạo nút menu mobile trượt ngang trái sang phải trên giao diện di động nukeviet
(29/09/2022) -
Chia sẻ block groups multi tabs module shops nukeviet miễn phí
(21/11/2022)
Những tin cũ hơn
-
Hướng dẫn thêm đọc bằng audio vào module news nukeviet
(18/10/2021) -
Hướng dẫn thêm thống kê truy cập tháng trước vào block statics nukeviet
(12/10/2021) -
Block hotline contact nukevite 4.5
(17/09/2021)
Hỏi đáp với tôi
close- smart_toy Hi there 👋 How can I help you today?
send