Ways to bypass a transition using JavaScript

Hello everyone,

I would like to start by apologizing for any mistakes in my English.

I have been working on a website, which is currently available here:

As you scroll down, the height of the image below the menu decreases. I am trying to make the navigation arrows for the slideshow disappear by transitioning their opacity to 0.

However, I have encountered an issue where if you quickly scroll up after scrolling down, the arrows still appear with some opacity (e.g., 0.6). My goal is to have the arrows completely hidden when they are out of view without a transition. When you scroll back up to see the image again, the arrows should reappear with a smooth transition.

Thank you all for your assistance!

Javascript (focusing on arrows 1 and 2):

function yScroll(){
    arrow1 = document.getElementById('arrow1');
    arrow2 = document.getElementById('arrow2');
    yPos = window.pageYOffset;

    if(yPos > 100 && yPos < 370){
        arrow1.style.opacity = "0.8";
        arrow2.style.opacity = "0.8";
    } else if(yPos > 370){
        arrow1.style.opacity = "0.0";
        arrow2.style.opacity = "0.0";
    } 
}
var animateInterval = setInterval(yScroll,10);

CSS:

#mainbox #photo #arrow1 {
    transition: opacity 1s ease-in 1.3s;
}
#mainbox #photo #arrow2 {
    transition: opacity 1s ease-in 1.3s;
}
javascripthtmlcsscss-transitions

Answer №1

In order to achieve the desired effect, I propose using a tri-state setup.

The first state is the visible (normal) one. The second state is the fading state, where the opacity is set to 0 and a transition effect is applied. The third state is the out state, where the opacity is immediately set to 0.

To implement this setup, we create three classes and assign each one based on the scroll level.

For better visualization, here is a demo with extended timings:

function yScroll(){
    ele = document.getElementById('test');
    yPos = window.pageYOffset;

    if(yPos > 200){
        ele.className = "out";
    } else if(yPos > 100){
        ele.className = "fading";
    } else {
        ele.className = "normal";
    } 
}
var animateInterval = setInterval(yScroll,10);
#test {
  height: 50px;
  width: 100px;
  margin-top: 300px;
  background-color: green;
}


.pusher {
  margin: 3000px;
}

.out {
  opacity: 0.1;
  transition: opacity 0.1s;
}

.fading {
  opacity: 0.2;
  transition: opacity 20s;
}

.normal {
  opacity: 1;
  transition: opacity 20s;
}
<div id="test"></div>
<div class="pusher"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

phphtmlmysql

The content within the flex box element is making the flex box element grow in size

I have set up a flex box container with 3 child divs inside, and I would like to maintain the same size ratio for all 3 (1:1:1). However, when I add text to the child divs, the ratios change to accommodate the overflow of text. For example: ...

htmlcssflexbox

A guide to displaying numerous notifications using notistack in a React environment

I'm currently experimenting with React's 'notistack' module to showcase multiple notifications as a stack. However, it seems like I might be making an error since every time I encounter a warning: react_devtools_backend.js:3973 Warning ...

javascriptreactjsmaterial-uinotistack

Guide on integrating Select2 with webpack

I recently acquired the select2 node module with this command: npm install select2 After adding it to my app.js: require('select2')($); Although no errors appear when I use webpack, upon opening the application, I encounter: Uncaught TypeEr ...

javascriptnpmwebpackjquery-select2

Different techniques for retrieving elements generated by ng-repeat from their containing parent

Let's keep it simple - imagine we have a directive called headSlides. This directive's template includes an image that is being repeated using ng-repeat: <img class="bg" ng-repeat="image in images" ng-src="{{image.src}}"> I need to access ...

javascriptjqueryangularjs

What are effective ways to eliminate cross-origin request restrictions in Chrome?

Just starting out with angular and trying to incorporate a templateUrl in an angular directive. However, when attempting to view the local html file in the browser, I encounter the following errors --> XMLHttpRequest cannot load file:///Users/suparnadey/D ...

javascriptangularjs

Enhancing Time Precision in CakePHP: Introducing Quarter-Accurate Time Input

I'm currently implementing time inputs using the following code snippet: $form->input("time") However, the select boxes generated have minute-accuracy, which is unnecessary for my project. Is there a way to restrict the options in the select lis ...

htmlformscakephptime

Unable to open modal using a button in PHP

<?php $result = mysqli_query($con, $sql); while ($row = mysqli_fetch_array($result)) { echo '<tr><td>'; echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5> ...

javascriptphphtml

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Adjust the size of the iframe image to fit seamlessly within the design

Is there a way to adjust the size of the image on the right without altering the layout design? The current GIF is 500x500px, but it is only displaying as 100x100px. Any assistance would be greatly appreciated! To see what I currently have (Demo with code ...

javascripthtmlcsslayoutresponsive

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

htmlcssfrontend

The Twitch API is providing inaccurate channel information

Currently facing an issue while working with the Twitch API. When making a GET request to /api.twitch.tv/helix/search/channels?query=[STREAMER_NAME], it seems to be returning the wrong streamer/user. For instance: /api.twitch.tv/helix/search/channels?quer ...

javascriptnode.jsapitwitchtwitch-api

Setting up dynamic routing in AngularJS for links

I am facing some confusion regarding routing in AngularJS. Normally, we can configure routes in angular.config() when the angular module is loaded. At that time, we define static information such as routePath, templateUrl, and controller. However, I am u ...

javascriptangularjs

Calculating the sum of all words that have been successfully finished

My spelling game includes words of different sizes ranging from 3 to 6 letters. Once a certain number of words are completed in the grid, the remaining grid fades away. Instead of only considering one word size at a time, I want the game to calculate the t ...

javascriptjquery

The destination where data is transmitted via POST to a PHP file using the HTTPRequestObject.send method

Can anyone help me figure out where the HTTPRequestObject stores strings that I have sent using the "POST" method to a PHP file? I have checked both the $_POST and $_REQUEST arrays but cannot find them. This is how I am sending the data from JavaScript: ...

phpjavascriptajax

Unable to locate a type definition file for module 'vue-xxx'

I keep encountering an error whenever I attempt to add a 3rd party Vue.js library to my project: Could not find a declaration file for module 'vue-xxx' Libraries like 'vue-treeselect', 'vue-select', and 'vue-multiselect ...

javascriptnode.jstypescriptvue.js

Select elements in jQuery using both a specific selector and a negative selector

I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...

javascriptjqueryhtmlcss

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

I have successfully developed a Google App Script that links to a Google Sheet serving as a database. The application iterates through each row, and I showcase each column as part of an employee bio page entry. ex. Picture | Name | Title | Phone | Email ...

htmlcssarraysbootstrap-4

Trouble with installing Enmap due to better-sqlite3 error

For a while now, I've been struggling to get enmap installed. Despite searching the web exhaustively, I haven't come across any solutions that work for me. Every time I try npm i enmap, I consistently encounter this frustrating error: One part o ...

javascriptnode.jsnpm