5+ Anime Js 使い方 For You

anime.js Evernote.Design from www.evernote.design

Anime JS Guide: How to Use Anime JS in 2023 Are you looking for an easy way to create stunning animations for your website? Look no further than Anime JS! This lightweight JavaScript animation library is easy to use and allows you to create impressive animations quickly. In this guide, we will walk you through the basics of using Anime JS and provide helpful tips to get you started. Getting Started with Anime JS Before we dive into the details of using Anime JS, let's first cover the basics. Anime JS is a lightweight JavaScript animation library that allows you to create animations with ease. It is easy to install and can be used on any website. To get started, download the Anime JS library and add it to your website's code. Creating Simple Animations Now that you have Anime JS installed, it's time to start creating animations. With Anime JS, you can animate any HTML element on your website. You can change the element's position, size, color, and more. Let's start with a simple example. In this example, we will animate a box's position. To create the animation, we first need to define the box's starting position. We can do this by using CSS. We will set the box's position to absolute and define its starting position using the top and left properties. Here's the CSS code: .box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: red; } Now that we have defined the box's starting position, we can create the animation using Anime JS. Here's the code: anime({ targets: '.box', translateX: 250, duration: 2000, loop: true }); In this code, we define the target element as ".box", which is the class we gave to our box. We then set the translateX property to 250, which will move the box 250 pixels to the right. We set the duration to 2000, which means the animation will last for two seconds. Finally, we set the loop property to true, which means the animation will repeat indefinitely. Creating Complex Animations While the previous example was relatively simple, Anime JS can be used to create much more complex animations. Let's take a look at an example that uses multiple animations to create a more complex effect. In this example, we will create an animation that fades in a box, scales it up, and then fades it out. Here's the code: anime({ targets: '.box', opacity: [0, 1], scale: [0.1, 1], easing: 'easeInOutQuad', duration: 1000, delay: 500, direction: 'alternate', loop: true }); In this code, we first define the target element as ".box". We then set the opacity property to [0, 1], which means the box will fade in from invisible to fully visible. We set the scale property to [0.1, 1], which means the box will scale up from 10% of its original size to its full size. We set the easing property to 'easeInOutQuad', which will create a smooth animation curve. We set the duration to 1000, which means the animation will last for one second. We set the delay to 500, which means the animation will start after a half-second delay. Finally, we set the direction to 'alternate', which means the animation will alternate between fading in and out. Tips for Using Anime JS Now that you know the basics of using Anime JS, here are a few tips to help you get the most out of this powerful animation library: 1. Use easing functions: Anime JS comes with a variety of built-in easing functions that can be used to create smooth, natural animations. Experiment with different easing functions to find the one that works best for your animation. 2. Use keyframes: Keyframes allow you to create more complex animations by defining multiple steps. With Anime JS, you can define keyframes using an array of values. 3. Use delays: Delays can be used to create more interesting animations by adding pauses between different steps. With Anime JS, you can add delays using the delay property. 4. Use loops: Loops can be used to create repeating animations that run indefinitely. With Anime JS, you can set the loop property to true to create a looping animation. Conclusion In conclusion, Anime JS is a powerful and easy-to-use animation library that can help you create stunning animations for your website. With its simple syntax and built-in easing functions, Anime JS is a great choice for both beginners and experienced developers. So why not give it a try and see what you can create?