Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image.

Below is my snippet of HTML:

<figure>
   <img src="Assets/Images/klenet.jpg" id="clenet_picture">  
   <figcaption id="clenet_text">Clenet Series 1 from 1979.</figcaption>
</figure>

And this is my CSS section:

#clenet_picture
{
   . . .

   animation-name: image-anim;
   animation-duration: 4s;
}
@keyframes image-anim
{
   from {opacity: 0%}
   to {opacity: 100%}
}

I understand that I need to incorporate some JavaScript to achieve the desired effect, but I'm unsure of how exactly to implement it. Can anyone guide me through that process?

javascripthtmlcss

Answer №1

Use JavaScript to add an additional class to the element, such as animate

Now you can target the element with #clenet_picture.animate instead of just #clenet_picture, and the animation will only trigger once the new class is applied

Need to know if an image is within the viewport? Check out this helpful resource: How can I tell if a DOM element is visible in the current viewport?

Answer №2

After some research, I stumbled upon what appears to be a straightforward resolution.

Alas, there is one vexing obstacle standing in the way.

Behold, the code:

const marker = 750;

        window.addEventListener("scroll", () => {
            
            const currentScroll = window.pageYOffset;
            
            if (currentScroll <= marker) {
                transparency = 1 - currentScroll / marker;
            } else {
                transparency = 0;
            }
            
            document.querySelector(".toAnimate").style.opacity = transparency;
        });

The quandary lies in the fact that it now behaves contrarily... When approaching the image while scrolling, its opacity diminishes to 0 and as you move away from it, it fades back to 1...

If anyone can offer a solution, I would greatly appreciate it.

A heartfelt thank you to all those who provide answers!

Answer №3

Success! The issue has been resolved.

Check out the revised code below:

//You determine the checkpoint value
const checkpoint = 550;

window.addEventListener("scroll", () => {
    
    const currentScroll = window.pageYOffset;
    
    let opacity;
    
    if (currentScroll <= checkpoint) {
        opacity = 0 + currentScroll / checkpoint;
    } else {
        opacity = 1;
    }
    
    document.querySelector(".toAnimate").style.opacity = opacity;
});

This straightforward solution works effectively even without CSS!

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

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue. Is this a good approach or could it potential ...

javascriptvue.jsvuex

CSS animation properties

Is it possible to animate only the div container and not the "p" inside? div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 ...

htmlcss

Emphasize identical terms in AngularJS through bold formatting

I am facing a situation where I need to apply bold formatting to specific words in an HTML string (editorData) using AngularJS, based on whether they match certain keywords (data or dataArray). It is important to note that the case of the words in editorD ...

jqueryhtmlangularjs

Issue with Mouse Hover not functioning properly across various 3D objects

Trying to create a 3D line chart? Check it out Here Currently, the points and lines are working fine. However, I only want to detect mouse hover on the points (spheres) and not on the lines or grid. To achieve this, I have segregated all elements into dif ...

javascriptthree.js

How to properly center and align the width of a figcaption element within an image placed in a figure element

I've been struggling for two days now trying to fix an issue with the alignment of images and captions on my Django application. In my app, users can upload images, and I'm using figure and figcaption tags to display the image with a caption. Ho ...

cssdjangohtmlwidthcenter

What sets & and &amp; apart in HTML5?

Can you explain the distinction between & and &amp;? In the code snippet below, do both symbols function in the same way? <a href="mailto:EMAIL?subject=BLABLABLA&body=http://URL, SHORT DESCRIPTION"></a> <a href="mailto:EMAIL?su ...

htmlsharehrefmailtosubject

Is it possible to modify a portion of the zod schema object according to the value of a

My form consists of several fields and a switch component that toggles the visibility of certain parts of the form, as shown below: <Field name="field1" value={value1} /> <Field name="field2" value={value2} /> &l ...

javascriptreactjstypescriptvalidationzod

How can we make v-show reactive with each click of a checkbox or toggle in Vue.js 3?

<template> <ToggleSwitch class="right " @onChange.preventDefault="onChange" ></ToggleSwitch> <div v-show="!hidden"> <CheckBox v-if="typeof cellProps.rowData.Bra ...

javascriptvue.jsvue-componentvuejs3vue-directives

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

javascriptvariablesevents

Submit data via POST method on the modified URL

I need assistance with modifying the data of a URL and making a POST request to it. The URL in question is as follows: http://domanin.com/search-result/?start=06%2F08%2F2017&end=06%2F09%2F2017&room_num_search=1&adult_number=1&children_num= ...

javascriptphpjqueryajax

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. For example, the first button appears normal and the second one turns blue after clicking. However, this background effect disappears when clicking anywhe ...

javascripthtmlcssbuttonbootstrap-4

The navigation bar is not extending to fill the entire width of the screen

I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for ...

htmlcss

Tips for retrieving the 'Created' value in vue.js

I am currently trying to fetch API JSON data for a weather widget, but unfortunately it is returning null. While I am able to retrieve the JSON data successfully, I am struggling to handle this value. Below is my HTML code snippet: <html> <head& ...

javascriptjsonvue.js

Access the configuration of a web browser

I am in the process of creating a website where I need to prompt the user to enable JavaScript. Is there a way for me to include a link to the browser's settings page? Here is an example: <noscript> <div>Please enable JavaScript &l ...

javascripthtml

What purpose does the array.pop()!(object) syntax serve within Codemirror?

Within the Codemirror 6 documentation and at line 41 of the code, there is a snippet that reads: while (pending.length) pending.pop()!(data.updates) I'm curious about the meaning of this syntax. It appears to be TypeScript specific. How would this lo ...

javascripttypescript

Add HTML content individually to each item in the array

I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...

javascriptjqueryhtml

Retrieving the text of a selected option by its value

I need to create a menu that returns text based on a given value. For example, if the value is 0, I want it to return “zero”, and if it's 1, then “one”, and so on. I don't need to know which option is selected or auto-select anything, I j ...

javascriptjquery

Keystrokes may not consistently register in Firefox

I created a compact web application where users can interact by clicking on a button to trigger a modal dialog. Within this dialog, users have the ability to choose from various options. To enhance user experience, I implemented the utilization of the jQue ...

javascriptjqueryhtml

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...

htmlcss

Dealing with multiple ajax requests while utilizing a single fail callback

Looking for a solution: I have two arrays containing deferreds. In order to detect failures in the outer or inner 'when' statements, I currently need to use double 'fail' callbacks. Is there a way to consolidate errors from the inner &a ...

javascriptjquery