• Thủ Thuật
    • Tất cả
    • cPanel
    • Direct Admin
    • Domain
    • Linux
    • WordPress

    Bảo mật đăng nhập với xác minh 2 bước

    Hướng dẫn cài đặt mô hình apache + nginx (reverse proxy)

    Hướng dẫn cài đặt mô hình apache + nginx (reverse proxy)

    Hướng dẫn chuyển Mysql sang Mariadb DirectAdmin

    Hướng dẫn chuyển Mysql sang Mariadb DirectAdmin

    Hướng dẫn cài đặt và cấu hình SpamAssassin

    Hướng dẫn cài đặt và cấu hình SpamAssassin

    Hướng dẫn nâng cấp Custombuild và các cấu hình dịch vụ trong Custombuild DirectAdmin

    Hướng dẫn nâng cấp Custombuild và các cấu hình dịch vụ trong Custombuild DirectAdmin

    Hướng dẫn cài đặt OPcache trên Direct Admin

    Hướng dẫn cài đặt OPcache trên Direct Admin

    Tệp tin php.ini nằm ở đâu ?

    Tệp tin php.ini nằm ở đâu ?

    Cách cài đặt Redis và Redis-PHP trong DirectAdmin CentOS

    Cách cài đặt Redis và Redis-PHP trong DirectAdmin CentOS

    Direct Admin là gì?

    Sao lưu toàn bộ dữ liệu với Command line trên Direct Admin

    Trending Tags

    • cPanel : Thêm addon domain trong cPanel
    • Domain : Trỏ tên miền từ Mắt Bão về Hosting
    • duplicator lê xuân hảo
    • WordPress : Lỗ hổng từ Plugins Duplicator – WordPress Migration Plugin
  • Kinh Nghiệm
    • Tất cả
    • Kinh Nghiệm Mua Hosting / VPS / Tên Miền
    • Make Money Online
    Vultr : sử dụng dịch vụ lưu trữ với cách thức tính phí theo giờ

    Đăng ký VPS tại Vultr và truy cập vào VPS

    Địa chỉ nào mua Hosting WordPress tốt để sử dụng tại trong và ngoài nước

    Địa chỉ nào mua Hosting WordPress tốt để sử dụng tại trong và ngoài nước

    Tạo Landing page và tìm kiếm khách hàng mục tiêu

    Tạo Landing page và tìm kiếm khách hàng mục tiêu

    Affiliate Marketing và hiểu rõ hơn về cách thức về luật hưởng hoa hồng

    Affiliate Marketing và hiểu rõ hơn về cách thức về luật hưởng hoa hồng

    AZDIGI : Sự khác nhau nào giữa Turbo Cloud và Hosting Shared thông thường ?

    AZDIGI : Sự khác nhau nào giữa Turbo Cloud và Hosting Shared thông thường ?

    Trending Tags

    • Howto
      Sử dụng API trong Zabbix

      Sử dụng API trong Zabbix

      influxdb-backup-restore

      Influxdb backup restore database

      [Tips OpenVPN Client] Một số kinh nghiệm sử dụng trên Linux

      Hướng dẫn cài đặt OpenVPN trên CentOS 7 từ A-Z

      Hướng dẫn tạo yum proxy

      Trending Tags

      • Series
        • Tất cả
        • Ansible
        • AWS
        • ELK Stack
        High Available trong bastion host

        [AWS] High Available cho Bastion Host

        Cloudwatch monitor state instance EC2

        [AWS] Cloudwatch monitor state instance EC2

        Ansible – Playbook Testing

        Variable host trong ansible

        Monitor instance sử dụng Cloudwatch (Full)

        [AWS] Monitor instance sử dụng Cloudwatch (Full)

        Connect instance EC2 voi Session Manager

        [AWS] Connect instance EC2 voi Session Manager

        Ansible – Playbook Testing

        Ansible – Playbook Testing

        [AWS] fix lỗi “sudo: /etc/sudo.conf is owned by uid 996, should be 0”

        [AWS] fix lỗi “sudo: /etc/sudo.conf is owned by uid 996, should be 0”

        Xóa indices tự động với Elasticsearch Curator

        Xóa indices tự động với Elasticsearch Curator

        Tự động tạo, xóa instance AWS sử dụng ansible

        Trending Tags

          • Ansible
        • True Story

        Hướng dẫn chèn hiệu ứng pháo hoa vào trong website WordPress

        được đăng bởi Trí Trần
        13/01/2019
        trong chuyên mục WordPress
        7
        0
        125
        CHIA SẼ
        366
        LƯỢT XEM
        Chia sẻ lên Facebook

        Nội dung bài viết

        1. Hướng dẫn chèn hiệu ứng pháo hoa vào trong website WordPress

        Hướng dẫn chèn hiệu ứng pháo hoa vào trong website WordPress

        Tết đến ! luôn là điều gì đó nhộn nhịp và sống động, chính vì vậy luôn có cách nào đó để trang trí website của bạn một cách “đặc biệt” và “thú vị” nhất. Bài viết này sẽ hướng dẫn các bạn có cho mình một khung bắn pháo hoa trên website của mình.

        Thông tin các phần bạn có thể tải :
        Plugin chèn mã Partical
        Hình ảnh Background mặc định
        Visual Composer plugin

        Tải Xuống Tệp

        Bước 1 : Tải lên plugin Particle Background để có thể đưa mã vào website của bạn một cách tốt nhất , đơn giản và dễ quản lý

        sử dụng đoạn code bên dưới và gắn vào phần trống của Plugin ( đoạn code đã được chỉnh sửa và có hiệu ứng rơi của tàn pháo bông )

        coppy toàn bộ mã dưới và dán vào phần như hình trên

        // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
        // not supported in all browsers though and sometimes needs a prefix, so we need a shim
        window.requestAnimFrame = ( function() {
        	return window.requestAnimationFrame ||
        				window.webkitRequestAnimationFrame ||
        				window.mozRequestAnimationFrame ||
        				function( callback ) {
        					window.setTimeout( callback, 1000 / 60 );
        				};
        })();
        
        // now we will setup our basic variables for the demo
        var canvas = document.getElementById( 'canvas' ),
        		ctx = canvas.getContext( '2d' ),
        		// full screen dimensions
        		cw = window.innerWidth,
        		ch = window.innerHeight,
        		// firework collection
        		fireworks = [],
        		// particle collection
        		particles = [],
        		// starting hue
        		hue = 120,
        		// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
        		limiterTotal = 5,
        		limiterTick = 0,
        		// this will time the auto launches of fireworks, one launch per 80 loop ticks
        		timerTotal = 80,
        		timerTick = 0,
        		mousedown = false,
        		// mouse x coordinate,
        		mx,
        		// mouse y coordinate
        		my;
        		
        // set canvas dimensions
        canvas.width = cw;
        canvas.height = ch;
        
        // now we are going to setup our function placeholders for the entire demo
        
        // get a random number within a range
        function random( min, max ) {
        	return Math.random() * ( max - min ) + min;
        }
        
        // calculate the distance between two points
        function calculateDistance( p1x, p1y, p2x, p2y ) {
        	var xDistance = p1x - p2x,
        			yDistance = p1y - p2y;
        	return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
        }
        
        // create firework
        function Firework( sx, sy, tx, ty ) {
        	// actual coordinates
        	this.x = sx;
        	this.y = sy;
        	// starting coordinates
        	this.sx = sx;
        	this.sy = sy;
        	// target coordinates
        	this.tx = tx;
        	this.ty = ty;
        	// distance from starting point to target
        	this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
        	this.distanceTraveled = 0;
        	// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
        	this.coordinates = [];
        	this.coordinateCount = 3;
        	// populate initial coordinate collection with the current coordinates
        	while( this.coordinateCount-- ) {
        		this.coordinates.push( [ this.x, this.y ] );
        	}
        	this.angle = Math.atan2( ty - sy, tx - sx );
        	this.speed = 0.5;
        	this.acceleration = 1.05;
        	this.brightness = random( 50, 70 );
        	// circle target indicator radius
        	this.targetRadius = 1;
        }
        
        // update firework
        Firework.prototype.update = function( index ) {
        	// remove last item in coordinates array
        	this.coordinates.pop();
        	// add current coordinates to the start of the array
        	this.coordinates.unshift( [ this.x, this.y ] );
        	
        	// cycle the circle target indicator radius
        	if( this.targetRadius < 8 ) {
        		this.targetRadius += 0.3;
        	} else {
        		this.targetRadius = 1;
        	}
        	
        	// speed up the firework
        	this.speed *= this.acceleration;
        	
        	// get the current velocities based on angle and speed
        	var vx = Math.cos( this.angle ) * this.speed,
        			vy = Math.sin( this.angle ) * this.speed;
        	// how far will the firework have traveled with velocities applied?
        	this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
        	
        	// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
        	if( this.distanceTraveled >= this.distanceToTarget ) {
        		createParticles( this.tx, this.ty );
        		// remove the firework, use the index passed into the update function to determine which to remove
        		fireworks.splice( index, 1 );
        	} else {
        		// target not reached, keep traveling
        		this.x += vx;
        		this.y += vy;
        	}
        }
        
        // draw firework
        Firework.prototype.draw = function() {
        	ctx.beginPath();
        	// move to the last tracked coordinate in the set, then draw a line to the current x and y
        	ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
        	ctx.lineTo( this.x, this.y );
        	ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        	ctx.stroke();
        	
        	ctx.beginPath();
        	// draw the target for this firework with a pulsing circle
        	ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
        	ctx.stroke();
        }
        
        // create particle
        function Particle( x, y ) {
        	this.x = x;
        	this.y = y;
        	// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
        	this.coordinates = [];
        	this.coordinateCount = 5;
        	while( this.coordinateCount-- ) {
        		this.coordinates.push( [ this.x, this.y ] );
        	}
        	// set a random angle in all possible directions, in radians
        	this.angle = random( 0, Math.PI * 2 );
        	this.speed = random( 1, 20 );
        	// friction will slow the particle down
        	this.friction = 0.95;
        	// gravity will be applied and pull the particle down
        	this.gravity = 1;
        	// set the hue to a random number +-50 of the overall hue variable
        	this.hue = random( hue - 50, hue + 50 );
        	this.brightness = random( 50, 80 );
        	this.alpha = 1;
        	// set how fast the particle fades out
        	this.decay = random( 0.001, 0.03 );
        }
        
        // update particle
        Particle.prototype.update = function( index ) {
        	// remove last item in coordinates array
        	this.coordinates.pop();
        	// add current coordinates to the start of the array
        	this.coordinates.unshift( [ this.x, this.y ] );
        	// slow down the particle
        	this.speed *= this.friction;
        	// apply velocity
        	this.x += Math.cos( this.angle ) * this.speed;
        	this.y += Math.sin( this.angle ) * this.speed + this.gravity;
        	// fade out the particle
        	this.alpha -= this.decay;
        	
        	// remove the particle once the alpha is low enough, based on the passed in index
        	if( this.alpha <= this.decay ) {
        		particles.splice( index, 1 );
        	}
        }
        
        // draw particle
        Particle.prototype.draw = function() {
        	ctx. beginPath();
        	// move to the last tracked coordinates in the set, then draw a line to the current x and y
        	ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
        	ctx.lineTo( this.x, this.y );
        	ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        	ctx.stroke();
        }
        
        // create particle group/explosion
        function createParticles( x, y ) {
        	// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
        	var particleCount = 30;
        	while( particleCount-- ) {
        		particles.push( new Particle( x, y ) );
        	}
        }
        
        // main demo loop
        function loop() {
        	// this function will run endlessly with requestAnimationFrame
        	requestAnimFrame( loop );
        	
        	// increase the hue to get different colored fireworks over time
        	//hue += 0.5;
          
          // create random color
          hue= random(0, 360 );
        	
        	// normally, clearRect() would be used to clear the canvas
        	// we want to create a trailing effect though
        	// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
        	ctx.globalCompositeOperation = 'destination-out';
        	// decrease the alpha property to create more prominent trails
        	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        	ctx.fillRect( 0, 0, cw, ch );
        	// change the composite operation back to our main mode
        	// lighter creates bright highlight points as the fireworks and particles overlap each other
        	ctx.globalCompositeOperation = 'lighter';
        	
        	// loop over each firework, draw it, update it
        	var i = fireworks.length;
        	while( i-- ) {
        		fireworks[ i ].draw();
        		fireworks[ i ].update( i );
        	}
        	
        	// loop over each particle, draw it, update it
        	var i = particles.length;
        	while( i-- ) {
        		particles[ i ].draw();
        		particles[ i ].update( i );
        	}
        	
        	// launch fireworks automatically to random coordinates, when the mouse isn't down
        	if( timerTick >= timerTotal ) {
        		if( !mousedown ) {
        			// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
        			fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
        			timerTick = 0;
        		}
        	} else {
        		timerTick++;
        	}
        	
        	// limit the rate at which fireworks get launched when mouse is down
        	if( limiterTick >= limiterTotal ) {
        		if( mousedown ) {
        			// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
        			fireworks.push( new Firework( cw / 2, ch, mx, my ) );
        			limiterTick = 0;
        		}
        	} else {
        		limiterTick++;
        	}
        }
        
        // mouse event bindings
        // update the mouse coordinates on mousemove
        canvas.addEventListener( 'mousemove', function( e ) {
        	mx = e.pageX - canvas.offsetLeft;
        	my = e.pageY - canvas.offsetTop;
        });
        
        // toggle mousedown state and prevent canvas from being selected
        canvas.addEventListener( 'mousedown', function( e ) {
        	e.preventDefault();
        	mousedown = true;
        });
        
        canvas.addEventListener( 'mouseup', function( e ) {
        	e.preventDefault();
        	mousedown = false;
        });
        
        // once the window loads, we are ready for some fireworks!
        window.onload = loop;

         

        Bước 2 : Thêm CSS vào website của bạn, bạn có thể chỉnh sửa thông qua tệp style.css của themes nếu themes hỗ trợ CSS tùy chỉnh bạn có thể thêm vào

        Bạn có thể thêm vào Child Themes để dễ quản lí hơn các mã mà mình thêm vào nhé.

        /* kiểu cơ bản cho nền đen và con trỏ hình tròn */
        body {
        	background: #000;
        	margin: 0px;
        }
        
        canvas {
        	cursor: full;
        	display: block;
        }

         

        Bước 3 : Sử dụng đoạn mã mà bạn có thể gắn cho website của mình

        – Chỉ cần bạn thêm đoạn mã dưới vào Post / Page ở văn bản thì hiệu ứng sẽ hoạt động.

        <canvas id="canvas">Canvas không được hỗ trợ trong trình duyệt của bạn.</canvas>

         


        Cách làm với Visual Composer ( Bạn cũng có thể áp dụng cho Divi Bulder – Elementor – hay bất cứ trình builder nào khác )

        Bạn có thể sử dụng đoạn mã dưới ở Table văn bản, sau khi chèn mã dưới vào bạn chuyển sang sử dụng với Backend Editor bạn sẽ có được các cấu hình tại Visual Composer mà mình đã cấu hình, tất nhiên bạn cũng có thể tuy biến theo như nhu cầu của bạn.

        Mở tệp tin Visualcode.txt trong file Drive và chèn mã vào như trên hình hướng dẫn

        Chú ý : https://blog.dilinhgroup.org/wp-content/uploads/2019/01/pexels-photo-218983.jpeg?id=1011 là đường dẫn của hình ảnh trên website của mình, bạn nên thay thế bằng hình ảnh của bạn nhé. !

        Như vậy là bạn đã cài xong cho website của mình, nhấn xem trước để xem sự hoạt động, đừng quên để lại bình luận và chia sẽ cho bạn bè cùng xem nhé.

        Thẻ : Hướng dẫn chèn hiệu ứng pháo hoa vào trong website WordPresspháo hoa cho website

        Liên quan Bài đăng

        Quản lý và thao tác website của bạn ngay trên ứng dụng WordPress !
        WordPress

        Quản lý và thao tác website của bạn ngay trên ứng dụng WordPress !

        05/08/2019
        207
        TinoHost dịch vụ Cloud Hosting và Cloud VPS chất lượng cao tại Việt Nam
        WordPress

        Tối ưu điểm Page Speed Insight miễn phí ? – Tại sao không !

        01/10/2019
        1.2k
        Khắc phục nhanh lỗi chuyển hướng website do Plugin Live Chat with Facebook Messenger
        WordPress

        Khắc phục nhanh lỗi chuyển hướng website do Plugin Live Chat with Facebook Messenger

        20/05/2019
        532
        Lấy lại mật khẩu Website WordPress thông qua PhpMyAdmin
        WordPress

        Lấy lại mật khẩu Website WordPress thông qua PhpMyAdmin

        09/04/2019
        232
        Cài đặt SSMTP cho VPS để thực hiện gửi mail mặc định
        WordPress

        Khắc phục Tấn công bằng từ khóa tiếng Nhật

        29/03/2019
        258
        WordPress : Cài đặt SMTP cho website của bạn
        WordPress

        Lỗ hổng zero-day nghiêm trọng trong plugin WordPress Easy WP SMTP

        20/03/2019
        565
        Xem thêm
        Bài tiếp theo
        cPanel : Tạo tài khoản FTP và sử dụng với File Zilla

        cPanel : Tạo tài khoản FTP và sử dụng với File Zilla

        Kích hoạt chủ đề GutenMag và cài DEMO

        Kích hoạt chủ đề GutenMag và cài DEMO

        Hướng dẫn cài HOCVPS lên Server và cài Website WordPress

        Hướng dẫn cài HOCVPS lên Server và cài Website WordPress

        Hướng dẫn cài VPSSIM lên Server và cài Website WordPress

        Hướng dẫn cài VPSSIM lên Server và cài Website WordPress

        Để lại bình luận

        Nội dung bài viết

        1. Hướng dẫn chèn hiệu ứng pháo hoa vào trong website WordPress

        © 2019 – Syslife Blog – All Right Reserved Powered by tritran

        Recent Posts

        • [AWS] High Available cho Bastion Host 18/07/2021
        • Sử dụng API trong Zabbix 19/01/2021
        • [AWS] Cloudwatch monitor state instance EC2 12/01/2021
        • Variable host trong ansible 08/01/2021
        • [AWS] Monitor instance sử dụng Cloudwatch (Full) 08/01/2021

        Follow me

        Facebook LinkedIn Github Instagram

        Thông tin về Site

        Blog cá nhân đơn thuần chia sẽ kiến thức trong lĩnh vực cài đặt, quản trị và vận hành hệ thống. Mình rất vui nếu mọi người có góp ý nào khác, hãy contact mình qua email caotritran.14@gmail.com nhé.

        Cám ơn các bạn đã ghé thăm trang web!!!

        Những người bạn

        https://jobsvina.com/

        • Thủ Thuật
        • Kinh Nghiệm
        • Howto
        • Series
          • Ansible
        • True Story

        © 2019 - Syslife Blog - All Right Reserved Powered by tritran

        Đăng nhập vào tài khoản của bạn bên dưới

        Đã quên mật khẩu?

        Điền vào các mẫu dưới đây để đăng ký

        Tất cả các trường đều được yêu cầu. Đăng nhập

        Truy xuất mật khẩu của bạn

        Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

        Đăng nhập