Animations
Add animations to elements to show them by scrolling. For further plugin documentation please visit Aos docs
Standard Example
Set the data-aos attribute in the target element and specify the animation type.
<div class="col" data-aos="fade">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p1.jpg"
srcset="/assets/img/photos/p1@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div class="col" data-aos="fade">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p2.jpg"
srcset="/assets/img/photos/p2@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div class="col" data-aos="fade">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p3.jpg"
srcset="/assets/img/photos/p3@2x.jpg 2x"
alt=""
/>
</figure>
</div>[data-aos-duration]
You can set the showing time of the element. (ms)
<div
class="col"
data-aos="fade"
data-aos-duration="400"
>
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p1.jpg"
srcset="/assets/img/photos/p1@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div
class="col"
data-aos="fade"
data-aos-duration="1600"
>
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p2.jpg"
srcset="/assets/img/photos/p2@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div
class="col"
data-aos="fade"
data-aos-duration="2500"
>
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p3.jpg"
srcset="/assets/img/photos/p3@2x.jpg 2x"
alt=""
/>
</figure>
</div>
[ data-aos-delay]
You can set the showing delay time of the element. (ms)
<div class="col" data-aos="fade" data-aos-delay="400">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p1.jpg"
srcset="/assets/img/photos/p1@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div class="col" data-aos="fade" data-aos-delay="900">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p2.jpg"
srcset="/assets/img/photos/p2@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<div
class="col"
data-aos="fade"
data-aos-delay="1500"
>
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/p3.jpg"
srcset="/assets/img/photos/p3@2x.jpg 2x"
alt=""
/>
</figure>
</div>
Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs