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

Learning to implement a sliding effect on tab bar button click using Angular

When a user clicks on any tab button, I am using the transition effect "slide" to display the content. I have successfully implemented this in jQuery Mobile and you can see it in action in this fiddle: http://jsfiddle.net/ezanker/o9foej5L/1/. Now, I tried ...

javascriptjqueryangularjsjquery-mobile

Execute MySQL query when the content of an HTML text field changes

My goal is to check if the value entered in an input text box matches any rows in a database. I want the DB to be searched when text is typed into the input field. <input type='text' name='barcode'> I would like it to search the ...

phphtmlajaxonchange

Maximizing space efficiency in Bootstrap 5

Hello there I have a query; I am currently utilizing Bootstrap 5 for my website, and it's working well. However, I would like Bootstrap to fill the entire page instead of just 80%; (Refer to image) https://i.sstatic.net/Iswmu.jpg <head> ...

htmlcssbootstrap-5

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

htmlcsstwitter-bootstrap

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

If I need to update my UI, I can directly pass the data like this: Using HTML Template <li *ngFor="let post of posts; let i = index;"> {{i+1}}) {{post.name}} <button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</butto ...

javascriptangulartypescript

Switching images using jQuery

Issue I'm feeling overwhelmed by the abundance of JavaScript code hints and finding it difficult to determine where to begin. Any assistance would be greatly appreciated. Essentially, I have a primary full-screen background image set in the CSS on t ...

javascriptjquery

An unexpected 'undefined' value is being added to a particular Web API request

I am encountering an issue in my Angular application where the word 'Undefined' is being appended to a specific WebAPI call, causing both registerUser and login requests to fail. Here are the problematic request URLs: Request URL: http://localho ...

javascriptangularjsasp.net-web-api2

Tips for implementing a dynamic value in the ng-style based on certain conditions

Is there a way to set a background-color conditionally using ng-style when the color value can be updated from $scope? These are the variables in my scope: $scope.someone = { id: '1', name: 'John', color: '#42a1cd' }; $scope ...

javascriptcssangularjs

Photographs featuring a ripple effect in the columns of Zurb's Foundation framework

Working on a WordPress site using the Foundation 6 CSS framework, I have a design with a row containing two large-6 columns, each filled with an image featuring a wave shape. Check out the image I've linked below. View the row with 2 columns I' ...

htmlcsswordpressimagezurb-foundation

Tips on how to update the page and create a counter for a table view

I am working with an HTMLB Tableview where I need to regularly update its firstRowVisible property every 3 minutes with a dynamic value. For example, if it starts at zero, after 3 minutes it should be set to 21 and continue increasing by a certain interval ...

javascript

When using JavaScript with React, setting a value after the onBlur event can result in users having to click

In my React form, I have an input button with an onBlur event that sets the value to a useState property. However, after the onBlur event is triggered, the user has to click the button twice to focus on it properly. It seems like the page needs time to pro ...

javascriptreactjs

Tips for transforming a JSON array into a JavaScript 2D array

I am struggling to figure out how to convert the given JSON data into a JS 2D array directly from HTML. [{"fields": {"diameter": 23.0, "neighbourhood": "WEST END"}, "model": "hug.tree", "pk": 345}, {"fields": {"diameter": 14.0, "neighbourhood": "MOUNT P ...

javascriptarraysjson

When it comes to iterating through arrays in nodejs

Can someone assist me with using a for loop on an array to search for titles? I have a basic ADD TODO form input that submits and adds todos or titles to the array: todos.push({ title: req.body.add_todo_input, complete: false }); I am pushing user input ...

javascriptarrays

AngularJS: Compile a particular template

One pre tag on the page contains dynamic text that is unknown during page load. This text may include ng commands, as shown below: <pre> Hello <span ng-click="test('args')">world</span> angular-JS! </pre> Since these ...

javascriptangularjs

The Boostrap-5 carousel seems to be malfunctioning and not functioning correctly

I've been teaching myself how to construct websites using tutorials and other resources. I'm currently diving into the world of Bootstrap, but I'm having trouble with the carousel feature. No matter how much I try, the slides get stuck on th ...

htmlxcodeperformancecarouselbootstrap-5

Get rid of the paper border in Material-ui

Is there a way to remove the top border in material-ui Paper component? I've attempted the code below, but it doesn't seem to be effective. <Paper sx={{ border: 0, borderTop: 0, borderRadius: 0, ...

cssmaterial-ui

Selecting Laravel lists by month option

I'm encountering a problem here. The error message reads "Too few arguments to function App\Http\Controllers\ViewsController::OBviews(), 0 passed and exactly 1 expected" Here is my controller: public function OBviews($date) { ...

javascriptajaxlaravellaravel-controller

The art of positioning in menu - absolute versus relative

Struggling with positioning absolute divs is a common challenge for many of us. In my case, it's horizontal sub-menus with the following CSS: ul.children{ display:none; position:absolute; } ul.children li{ position:relative; height:60px; float:none; ...

htmlcss

Unable to display content within a map function

I am facing an issue with a map function in my code. The function is supposed to return a component with deconstructed properties. While the map itself is functioning correctly and I can see all the right values when I log them to the console, nothing is g ...

javascriptreactjsdictionarycomponentsjsx

Tips for getting my scripts to function properly with my components in next.js?

I am facing an issue with my script while using React and Next.js in my pages/_app.js file. The code snippet is as follows: import axios from "axios"; import { $ } from "jquery"; import App from "next/app"; import Router from ...

cssreactjssassnext.js