Block hiệu ứng tuyết rơi nukeviet 4.x

Thứ sáu - 26/11/2021 23:50
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
<?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 (contact@vinades.vn)
 * @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.
 

Tác giả: admin

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây