Tạo hiệu ứng chữ, hình ảnh di chuyển với Marquee jQuery Plugin và CSS3

31/05/2019, 10:31 AM | 31/05/2019, 10:36 AM | 1.0K | 056

Trong HTML có một thẻ là <marquee> giúp tạo hiệu ứng chữ di chuyển trên Website, tuy nhiên thẻ này có nhiều hạn chế, đặc biệt là khi di chuyển bị giật khá khó chịu. Bài này giới thiệu một Marquee jQuery Plugin có sẵn rất dễ sử dụng, đồng thời tạo hiệu ứng chữ, hình ảnh di chuyển mượt mà hơn thẻ <marquee> rất nhiều.
1. jQuery Marquee Plugin
Để thêm Plugin này vào website bạn làm các bước sau :
Bước 1 : Thêm 2 thư viện jQuery và thư viện của Plugin Marquee vào :

<script type='text/javascript' src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
<script type='text/javascript' src='http://cdn.jsdelivr.net/jquery.marquee/1.4./jquery.marquee.min.js'></script>

Hoặc bạn có thể tải thư viện về máy rồi thêm vào Project tại đây.

Bước 2 : Sau khi thêm thư viện thì bạn chỉ việc chỉ định đối tượng cần chuyển động là xong :

 <script language="javascript">
		
      $(document).ready(function(){
          $('.m-marquee').marquee();
      });
</script>

Ví dụ : Mặc định chữ sẽ di chuyển từ phải qua trái

<html>
    <head>
        <script type='text/javascript' src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
		<script type='text/javascript' src='http://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
		
        <style>
			.m-marquee {
			  width:500px;
			  overflow: hidden;
			  border: 1px solid #ccc;
			  background: #ccc;
			}

			.ver {
			  height: 80px;
			  width: 400px;
			}
       </style>
        <script language="javascript">
            $(document).ready(function(){
				$('.m-marquee').marquee();
            });
        </script>
    </head>
    <body>
		<div class="m-marquee ver">Chào bạn đến với website của chúng tôi !!!
		<p>Chúc bạn ngày mới vui vẻ.</p>
		</div>
    </body>
</html>

- Bạn có thể tùy chỉnh các hiệu ứng di chuyển như sau :

Xem DEMO

        <script language="javascript">
            $(document).ready(function(){
				$('.m-marquee').marquee({
				
					//Tốc độ di chuyển
					duration: 5000,
					//khoảng cách bằng pixels giữa các đối tượng
					gap: 100,
					//thời gian chờ tính bằng milliseconds trước khi hiệu ứng bắt đầu chuyển động.
					delayBeforeStart: 0,
					//kiểu di chuyển : trái(left), phải(right), trên(up), dưới(down)
					direction: 'down',
					// Tạm dừng khi di chuyển chuột vào đối tượng hay không
					pauseOnHover: 'true',
					//true hoặc false - Nếu đặt True thì đối tượng sẽ được lặp lại tạo ra dòng chảy liên tục
					duplicated: true
				
				});
            });
        </script>

Kết quả :

Phương thức Pause và Resume

Xem DEMO

 <script language="javascript">
            $(document).ready(function(){
			
				var $abc = $('.m-marquee').marquee({
				
					//Tốc độ di chuyển
					duration: 5000,
					//khoảng cách bằng pixels giữa các đối tượng
					gap: 100,
					//thời gian chờ tính bằng milliseconds trước khi hiệu ứng bắt đầu chuyển động.
					delayBeforeStart: 0,
					//kiểu di chuyển : trái(left), phải(right), trên(up), dưới(down)
					direction: 'down',
					// Tạm dừng khi di chuyển chuột vào đối tượng hay không
					pauseOnHover: 'true',
					//true hoặc false - Nếu đặt True thì đối tượng sẽ được lặp lại tạo ra dòng chảy liên tục
					duplicated: true
				
				});
				
				$('#stop').click(function(){
				
					$abc.marquee('pause');
				
				});
				$('#Resume').click(function(){
				
					$abc.marquee('resume');
				
				});
				
            });
        </script>

Kết quả :

Chú ý : nhiều bạn làm đúng rồi mà vẫn không chạy trong dự án của mình thì chú ý đến việc sung đột nhiều thư viện jQuery nhé.

2. Marquee với CSS3
Ngoài Plugin với jQuery thì bạn cũng có thể tham khảo cách tạo hiệu ứng với CSS3 mình thao khảo trên mạng như sau, bạn có thể tìm trên google với từ khóa Marquee CSS3 :

<!DOCTYPE html>
<html>
    <head>
    
        <style>
			.marquee {
				width: 450px;
				margin: 0 auto;
				overflow: hidden;
				white-space: nowrap;
				box-sizing: border-box;
				animation: marquee 50s linear infinite;
			}

			.marquee:hover {
				animation-play-state: paused
			}

			/* Make it move */
			@keyframes marquee {
				0%   { text-indent: 27.5em }
				100% { text-indent: -105em }
			}

			/* Make it pretty */
			.microsoft {
				padding-left: 1.5em;
				position: relative;
				font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
			}

			/* ::before was :before before ::before was ::before - kthx */
			.microsoft:before, .microsoft::before {
				z-index: 2;
				content: '';
				position: absolute;
				top: -1em; left: -1em;
				width: .5em; height: .5em;
				box-shadow: 1.0em 1.25em 0 #F65314,
							1.6em 1.25em 0 #7CBB00,
							1.0em 1.85em 0 #00A1F1,
							1.6em 1.85em 0 #FFBB00;
			}

			.microsoft:after, .microsoft::after {
				z-index: 1;
				content: '';
				position: absolute;
				top: 0; left: 0;
				width: 2em; height: 2em;
				background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
			}

			/* Style the links */
			.vanity {
				color: #333;
				text-align: center;
				font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
			}

			.vanity a, .microsoft a {
				color: #1570A6;
				transition: color .5s;
				text-decoration: none;
			}

			.vanity a:hover, .microsoft a:hover {
				color: #F65314;
			}
       </style>
       
    </head>
    <body>
		<p class="microsoft marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
		
    </body>
</html>

Chúc bạn thành công !