Scrolling causes the image to blink

Question

Scrolling causes the image to blink

I have a specific task to create an effect where an image blinks three times on scrolling (like lights turning on and off consecutively with a 1-second delay), and then stays on until the user scrolls beyond 3600px.

To achieve this, I have added an event listener:

created() {
  window.addEventListener('scroll', this.scrollAnimation)
}

This event listener triggers the method scrollAnimation:

methods: {
  scrollAnimation() {
    let currentPos = window.pageYOffset
    if (currentPos > 3000 && currentPos < 3600) {
      this.$refs.supportOff.style.display = 'none'
      this.$refs.supportOn.style.display = 'block'
    } else {
      this.$refs.supportOff.style.display = 'block'
      this.$refs.supportOn.style.display = 'none'
    }
  }
}

Below is the HTML template for the images:

<div class="support__image-wrapper">
  <img ref="supportOff" class="support__image support__image_on" src="../../assets/images/247-off.png">
  <img ref="supportOn" class="support__image support__image_off" src="../../assets/images/247-on.png">
</div>

The code currently works when scrolling between 3000 and 3600 pixels, showing the appropriate images. However, there is an issue with creating the blinking effect using setInterval as it triggers every time the user scrolls within that range. What would be the best approach to implement the desired blinking effect?

javascript vue.js

Answer 1

Answer №1

Here are a couple of suggestions to consider...

Avoid manipulating the dom directly using $ref

Instead, create a variable that triggers changes in the dom structure

methods: {
  toggleAnimation() {
    this.toggleVisibility = window.pageYOffset > 2000 && window.pageYOffset < 2500
  }
}

<div>
  <img v-if="toggleVisibility" class="animated" src="../../assets/images/on.png">
  <img v-else src="../../assets/images/off.png">
</div>

Animating Consider using CSS animations (@keyframes). This method allows you to control the animation timing without script intervention. The animation will automatically start when it becomes visible on the page.

.animated {
  animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {opacity: 0}
    50%{opacity: 0}
    100% {opacity: 1}
}

I hope these tips prove helpful for your project.

Answer 2

Here are a couple of suggestions to consider...

Avoid manipulating the dom directly using $ref

Instead, create a variable that triggers changes in the dom structure

methods: {
  toggleAnimation() {
    this.toggleVisibility = window.pageYOffset > 2000 && window.pageYOffset < 2500
  }
}

<div>
  <img v-if="toggleVisibility" class="animated" src="../../assets/images/on.png">
  <img v-else src="../../assets/images/off.png">
</div>

Animating Consider using CSS animations (@keyframes). This method allows you to control the animation timing without script intervention. The animation will automatically start when it becomes visible on the page.

.animated {
  animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {opacity: 0}
    50%{opacity: 0}
    100% {opacity: 1}
}

I hope these tips prove helpful for your project.

Answer 3

Answer №2

Let me showcase a brief demonstration for any upcoming readers, inspired by j4n3l's feedback on the potential performance impact caused by unoptimized/debounced scroll events; and also Smithy's excellent suggestion regarding the usage of CSS @keyframes for creating blinking animations:

new Vue({
  el: '#root',

  data() {
    return {
      blinkSpeed: 800,
      blinkFrequency: 4,
      isBlinking: false,
      blinkTimeoutId: -1,

      isActive: false,
      currentPosition: window.pageYOffset
    }
  },

  mounted() {
    window.addEventListener('scroll', _.debounce(() => {
      this.currentPosition = window.pageYOffset;

      if (this.currentPosition > 2500 && this.currentPosition < 3200) {
        this.isActive = true;
      } 
      else {
        this.isActive = false;
      }
    }), 150);
  },

  methods: {
    initiateBlink() {
      if (this.blinkTimeoutId > -1) {
        clearTimeout(this.blinkTimeoutId);
      }

      this.isBlinking = true;

      this.blinkTimeoutId = setTimeout(() => {
        this.isBlinking = false;

      }, 1000 * this.blinkFrequency);
    }
  },

  watch: {
    isActive() {
      this.initiateBlink();
    }
  }
});

#root {
  background-color: lightgray;
  height: 1500vh;
  padding: 15px;
}

.scroll-position {
  position: fixed;
  top: 10px;
  right: 10px;
}

.blink-effect > div {
  border-radius: 50%;
  border: 2px solid white;
  color: white;
  font-weight: bold;
  height: 30px;
  left: 10px;
  line-height: 30px;
  padding: 5px;
  position: fixed;
  text-align: center;
  top: 10px;
  vertical-align: middle;
  width: 30px;
}

.blink-effect.animate > div {
  animation: blinker 1s infinite;
}

.blink-effect .active {
  background-color: blue;
}

.blink-effect .inactive {
  background-color: red;
}

@keyframes blinker {
  0% {
    opacity: 0
  }
  49% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="root">
  <div :class="['blink-effect', { 'animate': isBlinking } ]">
    <div class="active" v-if="isActive">ACTIVE</div>
    <div class="inactive" v-else>INACTIVE</div>
  </div>

  <code class="scroll-position">pageYOffset: {{Math.floor(currentPosition)}}</code>
</div>

Answer 4

Let me showcase a brief demonstration for any upcoming readers, inspired by j4n3l's feedback on the potential performance impact caused by unoptimized/debounced scroll events; and also Smithy's excellent suggestion regarding the usage of CSS @keyframes for creating blinking animations:

new Vue({
  el: '#root',

  data() {
    return {
      blinkSpeed: 800,
      blinkFrequency: 4,
      isBlinking: false,
      blinkTimeoutId: -1,

      isActive: false,
      currentPosition: window.pageYOffset
    }
  },

  mounted() {
    window.addEventListener('scroll', _.debounce(() => {
      this.currentPosition = window.pageYOffset;

      if (this.currentPosition > 2500 && this.currentPosition < 3200) {
        this.isActive = true;
      } 
      else {
        this.isActive = false;
      }
    }), 150);
  },

  methods: {
    initiateBlink() {
      if (this.blinkTimeoutId > -1) {
        clearTimeout(this.blinkTimeoutId);
      }

      this.isBlinking = true;

      this.blinkTimeoutId = setTimeout(() => {
        this.isBlinking = false;

      }, 1000 * this.blinkFrequency);
    }
  },

  watch: {
    isActive() {
      this.initiateBlink();
    }
  }
});

#root {
  background-color: lightgray;
  height: 1500vh;
  padding: 15px;
}

.scroll-position {
  position: fixed;
  top: 10px;
  right: 10px;
}

.blink-effect > div {
  border-radius: 50%;
  border: 2px solid white;
  color: white;
  font-weight: bold;
  height: 30px;
  left: 10px;
  line-height: 30px;
  padding: 5px;
  position: fixed;
  text-align: center;
  top: 10px;
  vertical-align: middle;
  width: 30px;
}

.blink-effect.animate > div {
  animation: blinker 1s infinite;
}

.blink-effect .active {
  background-color: blue;
}

.blink-effect .inactive {
  background-color: red;
}

@keyframes blinker {
  0% {
    opacity: 0
  }
  49% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="root">
  <div :class="['blink-effect', { 'animate': isBlinking } ]">
    <div class="active" v-if="isActive">ACTIVE</div>
    <div class="inactive" v-else>INACTIVE</div>
  </div>

  <code class="scroll-position">pageYOffset: {{Math.floor(currentPosition)}}</code>
</div>

Scrolling causes the image to blink

Answer №1

Answer №2

Similar questions

When the second history.push is triggered in react-router-dom, it may result in returning an

Add a slot to each element within Vue.js

Ensuring a dependable detection of WebSocket connection status

Is there a way to access and troubleshoot the complete source code within .vue files?

Extracting and retrieving data using JavaScript from a URL

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

Why do my posts appear twice on the page after submitting a new post? When I refresh the page, the posts seem to duplicate

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?

Click on a link to open it in the current tab with customized headers

It appears that the JavaScript array is able to modify itself autonomously

Failure when running npm start command in Nest js

Tips on personalizing the default html template in nuxt

v-autocomplete no selected option

The output type of a function given an input

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

Tips for styling text in a mailto function

Maximizing the Potential of SSJS ContinueRequest

Encountered Minified React error #418 and #423 while using Next.js v12.3.1 and React v18.2.0

The PDF document appears quite different from the original HTML page it was created from

Is there a way to adjust a simple program using Discord.js where the setTimeout within a for-loop can print values sequentially instead of simultaneously?