- vừa được xem lúc

Tách file svg và tạo animation siêu cấp vip pro cho website của bạn.

#Animation

0 0 11

Người đăng: Hà Minh Thuận

Theo Viblo Asia

Hi mọi người. Mình mới gia nhập cộng đồng Viblo. Đây cũng là bài viết đầu tiên của mình trên nền tảng này. Nếu có gì thiếu xót mong mọi người thông bỏ qua nhé. Hôm nay mình xin chia sẻ cách tạo hiệu ứng animation cho một file svg tĩnh.

Demo sản phẩm đạt được.

Sản phẩm từ file svg ban đầu: https://github.com/thuanhmdev/thuanhm-share-svg-animation/blob/main/server.svg

Sản phẩm sau khi chỉnh sửa: https://thuanhmdev.github.io/thuanhm-share-svg-animation/

Demo trên Codepen:

Ý Tưởng

  • Mình sẽ tạo chuyển động cho 3 box trong file svg. Thêm 1 hiệu ứng di chuyển của box góc trên phải.

Chuẩn bị

Các bước sẽ thực hiện

  • Tách các box con trong file svg gốc ra một svg riêng. Xóa luôn 3 box trong file svg gốc.
  • Viết html, css để tạo lại vị trí giống file svg ban đầu
  • Viết hiệu ứng cho box bằng css

1. Tách file svg

  1. Mình sẽ sử dụng trang web https://boxy-svg.com/ để edit file svg ban đầu của mình.
  2. Các bạn chọn 'file' >> 'Open' >> file svg của mình
  3. Mình mở thêm 1 cửa tab mới và chọn "new file" và copy cái box ra thành 1 file svg riêng. Thu gọn background vừa đủ cái ảnh. Sau đó lưu lại.
  4. Tại file svg gốc mình xóa 3 box này ra

Link file của mình đã tách:

Box : https://github.com/thuanhmdev/thuanhm-share-svg-animation/blob/main/box.svg

server: https://github.com/thuanhmdev/thuanhm-share-svg-animation/blob/main/server-no-box.svg

2. Viết html, css để tạo lại vị trí giống file svg ban đầu

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .server-container { position: relative; } .server-box { position: absolute; } .server-box-1 { top: 30%; left: 18%; } .server-box-2 { top: 72%; left: 18%; } .server-box-3 { top: 72%; left: 80%; } </style> </head> <body> <div class="server-container" style="width: 647px; height: 514px"> <img src="./server-no-box.svg" class="server-main" alt="svg" /> <img src="./box.svg" class="server-box server-box-1" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-2" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-3" src="" alt="svg" /> <div class="server-line server-line-1"> <div class="light"></div> </div> <div class="server-line server-line-2"> <div class="light"></div> </div> </div> </body>
</html> anime({ targets: ".server-box-1", translateY: -40, direction: "alternate", easing: "easeInOutSine", loop: true, }); anime({ targets: ".server-box-2", translateX: 30, direction: "alternate", loop: true, easing: "easeInOutSine", }); anime({ targets: ".server-box-3", translateX: -30, direction: "alternate", loop: true, easing: "easeInOutSine", }); anime({ targets: ".server-line-1 .light", translateX: { value: 90, duration: 3500, }, translateY: { value: -5, duration: 3500, }, scale: { value: 0, duration: 4000, delay: 0, }, easing: "linear", loop: true, }); anime({ targets: ".server-line-2 .light", translateY: { value: -90, duration: 2000, }, scale: [ { value: 0.2, duration: 250, delay: 0, }, { value: 1, duration: 1000, delay: 0, }, { value: 0, duration: 750, delay: 0, }, { value: 0, duration: 1000, delay: 0, }, ], easing: "linear", loop: true, });
</script> -->

3. Viết hiệu ứng cho box bằng css

Mình sẽ đánh số 1, 2, 3. 4 tương ứng với bức ảnh bên dưới:

  • Box 1 sẽ tạo hiệu ứng theo trục Y.
  • Box 2, 3 sẽ tạo hiệu ứng theo trục X.
  • Box 4: sẽ tạo hiệu ứng một điểm đi từ server bự qua box 4, rồi chạy lên cloud. 
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .server-container { position: relative; } .server-box { position: absolute; } .server-box-1 { top: 30%; left: 18%; animation: rotateY 0.8s alternate infinite ease-in-out; } .server-box-2 { top: 72%; left: 18%; animation: rotateX_1 0.8s alternate infinite ease-in-out; } .server-box-3 { top: 72%; left: 80%; animation: rotateX_2 0.8s alternate infinite ease-in-out; } @keyframes rotateY { from { transform: translateY(-25%); } to { transform: translateY(0); } } @keyframes rotateX_1 { from { transform: translateX(-25%); } to { transform: translateX(0); } } @keyframes rotateX_2 { from { transform: translateX(25%); } to { transform: translateX(0); } } /* server-line */ .server-line-1, .server-line-2 { position: absolute; background-color: #f0f0f0; } .server-line-1 { width: 86px; height: 6px; top: 44%; right: 16%; transform: rotate(-32deg); } .server-line-2 { width: 7px; height: 90px; top: 16%; right: 13.5%; } .server-line-1 .light, .server-line-2 .light { position: absolute; width: 16px; height: 16px; border-radius: 50rem; } .server-line-1 .light { top: -4px; left: 0; background-color: #ff99cc; z-index: 1000; animation: moveLight1 6s linear infinite; } .server-line-2 .light { bottom: -2px; left: -6px; background-color: #66ccff; animation: moveLight2 5s linear infinite; } @keyframes moveLight1 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(90px, -5px) scale(0); } 100% { transform: translate(90px, -5px) scale(0); } } @keyframes moveLight2 { 0% { transform: translate(0, 0) scale(1); } 20% { transform: translate(0, -90px) scale(0.2); } 50% { transform: translate(0, -90px) scale(1); } 75% { transform: translate(0, -90px) scale(0); } 100% { transform: translate(0, -90px) scale(0); } } </style> </head> <body> <div class="server-container" style="width: 647px; height: 514px"> <img src="./server-no-box.svg" class="server-main" alt="svg" /> <img src="./box.svg" class="server-box server-box-1" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-2" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-3" src="" alt="svg" /> <div class="server-line server-line-1"> <div class="light"></div> </div> <div class="server-line server-line-2"> <div class="light"></div> </div> </div> </body>
</html>

Cách sử dụng thư viện animejs thay cho hàm animation keyframe của css

  • Nếu bạn không muốn viết animation @keyframe Chúng ta cũng thể sử dụng thư viện animejs như sau:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .server-container { position: relative; } .server-box { position: absolute; } .server-box-1 { top: 30%; left: 18%; } .server-box-2 { top: 72%; left: 18%; } .server-box-3 { top: 72%; left: 80%; } /* server-line */ .server-line-1, .server-line-2 { position: absolute; background-color: #f0f0f0; } .server-line-1 { width: 86px; height: 6px; top: 44%; right: 16%; transform: rotate(-32deg); } .server-line-2 { width: 7px; height: 90px; top: 16%; right: 13.5%; } .server-line-1 .light, .server-line-2 .light { position: absolute; width: 16px; height: 16px; border-radius: 50rem; } .server-line-1 .light { top: -4px; left: 0; background-color: #ff99cc; z-index: 1000; } .server-line-2 .light { bottom: -2px; left: -6px; background-color: #66ccff; } </style> </head> <body> <div class="server-container" style="width: 647px; height: 514px"> <img src="./server-no-box.svg" class="server-main" alt="svg" /> <img src="./box.svg" class="server-box server-box-1" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-2" src="" alt="svg" /> <img src="./box.svg" class="server-box server-box-3" src="" alt="svg" /> <div class="server-line server-line-1"> <div class="light"></div> </div> <div class="server-line server-line-2"> <div class="light"></div> </div> </div> </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
></script>
<script> anime({ targets: ".server-box-1", translateY: -40, direction: "alternate", easing: "easeInOutSine", loop: true, }); anime({ targets: ".server-box-2", translateX: 30, direction: "alternate", loop: true, easing: "easeInOutSine", }); anime({ targets: ".server-box-3", translateX: -30, direction: "alternate", loop: true, easing: "easeInOutSine", }); anime({ targets: ".server-line-1 .light", translateX: { value: 90, duration: 3500, }, translateY: { value: -5, duration: 3500, }, scale: { value: 0, duration: 4000, delay: 0, }, easing: "linear", loop: true, }); anime({ targets: ".server-line-2 .light", translateY: { value: -90, duration: 2000, }, scale: [ { value: 0.2, duration: 250, delay: 0, }, { value: 1, duration: 1000, delay: 0, }, { value: 0, duration: 750, delay: 0, }, { value: 0, duration: 1000, delay: 0, }, ], easing: "linear", loop: true, });
</script>

Link source

Hẹn gặp lại các bạn ở các bài viết tiếp theo. Nhớ like cho mình nhé,

Bình luận

Bài viết tương tự

- vừa được xem lúc

Làm hiệu ứng Animation Transition với Swift

Mở đầu. . Xin chào các bạn hôm này mình sẽ giới thiệu cho các bạn một cách đơn giản để có thể tạo ra hiệu ứng chuyển động trong Swift. .

0 0 55

- vừa được xem lúc

Một số thư viện hỗ trợ Animation cho ReactJS

Why. Bạn đang dạo quanh Internet và thi thoảng bắt gặp những giao diện website cực kì sáng tạo và mượt mà, những slider, button, animation như Mobile App vậy.

0 0 141

- vừa được xem lúc

Hướng dẫn làm mấy cái chấm bay bay và có dây nối nó với nhau và nối với chuột bằng Canvas

Mở đầu. Sau vài bài thì tôi nhận ra là mềnh hông có khiếu viết mấy bài giới thiệu, phân tích, nên là tôi lại quay lại viết mấy bài hướng dẫn làm mấy thứ làng nhàng vui vui vậy.

0 0 37

- vừa được xem lúc

7 đơn vị CSS có thể bạn không biết

Trending

Giới thiệu. Thật dễ dàng để bị kẹt khi làm việc với các kỹ thuật CSS chúng ta biết rõ, nhưng làm như vậy sẽ gây bất lợi cho chúng ta khi những vấn đề mới xuất hiện.

0 0 56

- vừa được xem lúc

Make Awesome SVG Animations with CSS // 7 Useful Techniques

Video

Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS.

0 0 107

- vừa được xem lúc

Creative Personal Portfolio Website Design using HTML CSS & JavaScript

Video

Creative Personal Portfolio Website Design using HTML CSS & JavaScript. . Boring with regular portfolios. I got the idea of a new type of portfolio when looking at the books.

0 0 42