Enhance your Vue app by incorporating animate effects or classes when entering a div

Question

Enhance your Vue app by incorporating animate effects or classes when entering a div

Currently, I am working on a Vue project and I am looking to implement an effect or add a class to a specific div when the user scrolls to it. This functionality is similar to what can be achieved with ScrollReveal.

Has anyone encountered this scenario before while working with Vue?

Below is the CSS code that I have, which needs to be triggered when the specified div comes into view:

The title effect on h2 should take place when it becomes visible on the screen.

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

h1 {
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

h2 {
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

<h1>
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>
World Hello!
</h2>

javascript html css vue.js

Answer 1

Answer №1

To create the scroll to reveal effect, you can implement the use of the CSS class slide with animation properties set. This effect will trigger when the user scrolls to a specific position on the page. Here is an example code snippet:

new Vue({
  data: {
    el: document.getElementById('target-element')
  },
  methods: {
    isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      var elemTop = rect.top;
      var elemBottom = rect.bottom;
      isVisible = elemTop < window.innerHeight && elemBottom >= 0;
      return isVisible;
    },
    handleScroll() {
      /* check if element is scrolled into view */
      if(this.isScrolledIntoView(this.el))
        this.el.classList.add('slide');
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
});

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide {
  animation: slideInFromLeft 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<h1 class="slide">
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="target-element">
World Hello!
</h2>

Answer 2

To create the scroll to reveal effect, you can implement the use of the CSS class slide with animation properties set. This effect will trigger when the user scrolls to a specific position on the page. Here is an example code snippet:

new Vue({
  data: {
    el: document.getElementById('target-element')
  },
  methods: {
    isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      var elemTop = rect.top;
      var elemBottom = rect.bottom;
      isVisible = elemTop < window.innerHeight && elemBottom >= 0;
      return isVisible;
    },
    handleScroll() {
      /* check if element is scrolled into view */
      if(this.isScrolledIntoView(this.el))
        this.el.classList.add('slide');
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
});

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide {
  animation: slideInFromLeft 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<h1 class="slide">
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="target-element">
World Hello!
</h2>

Enhance your Vue app by incorporating animate effects or classes when entering a div

Answer №1

Similar questions

Is there a way to prevent my menu from switching to mobile view if it can fully fit within the menu area on the device?

Extend the center of the image horizontally

First attempt at creating a website and experimenting with adding a secondary color background using CSS

The process of updating a session using jQuery

Can the @keyframes in CSS3 be modified?

Struggling to display Firestore data in a React component - useRef() does not trigger re-render and useState() throws an error

Is it possible to embed HTML code within JavaScript strings?

Iterating through elements to set the width of a container

What is the best way to ensure that messages stay saved in my app for an extended

Directional Div CSS Transition

Latest Version of Joomla includes Jquery 3.4.3 Files

Error: jwt_decode function has not been declared

Using javascript, how can you fill in the missing dates within an array of objects?

Utilizing the selected option value from a drop-down menu in an input field

Issue retrieving WebElement inside iFrame using Selenium

I am dynamically populating two select dropdowns with data from two separate arrays

Ways to implement multi-file loading on a website using separate HTML segments

Creating a Full-Width Form Using Bootstrap

What are the best ways to integrate markdown into my Vue.js projects?

Smartphone screen cluttered with overlapping paragraphs