What is the best way to add a sliding effect to this presentation?

Question

What is the best way to add a sliding effect to this presentation?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

I am attempting to create a sliding effect for image transitions instead of the typical fade in and out. However, I'm uncertain about how to approach this challenge.

My concept involves keeping all images in the same position and having one slide off the screen while the next one slides into view.

Is this the correct method, and what would be the best way to implement this using code?

PS. I aim to achieve this without relying on any JavaScript libraries

javascript html css

Answer 1

Answer №1

One simple way to achieve a fade-in effect is by using CSS animations in the existing code. Here's how you can get started:

First, make the following adjustment:

@keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}

Change it to:

@keyframes fade {
  from {transform: translateY(50vh)} 
  to {transform: translateY(0)}
}

Answer 2

One simple way to achieve a fade-in effect is by using CSS animations in the existing code. Here's how you can get started:

First, make the following adjustment:

@keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}

Change it to:

@keyframes fade {
  from {transform: translateY(50vh)} 
  to {transform: translateY(0)}
}

What is the best way to add a sliding effect to this presentation?

Answer №1

Similar questions

Issue: The THREE.GLTFLoader cannot process this asset. Only glTF versions below 2.0 are compatible

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

Try utilizing MutationObserver to monitor changes in various nodes

The Zoom-sdk functions properly on a local machine, but encounters issues when it is

An error has occurred in nodejs: headers cannot be set after they have already been sent

Hiding a related field using a designated delimiter can be achieved with JavaScript

Is there a way to adjust the placement of text in an HTML document?

The React component fails to update upon pressing the button

Changing the URI for the Apollo client instance

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

The player remains unchanged

Which callback function is best suited for handling the response in an XMLHttpRequest and rendering it on the webpage?

Can React tooltips have properties that allow for changing text styles, such as making text bold or unbold?

The inner DIV cannot be accessed using document.getElementById due to its limited scope

manage data from multiple users using node.js and socket.io

CombineReducers takes all the reducer content and unpacks it into a single reducer

Interactive preview of PDFs with pdf.js adaptation

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

Utilizing vue-chartjs to display a pair of data figures side by side

Mastering the art of implementing async/await properly within token validation scenarios