Animate page transitions with CSS when a button is clicked in different directions - right, left, up, or down

I'm designing a website on Wordpress that will feature navigation arrows positioned at the top, right, bottom, and left of the screen. When a user clicks on one of these buttons, they will transition to the next page with an animation relevant to the direction of the button clicked.

In summary: Clicking on the "right arrow" will cause the next page to slide in from the right // Clicking on the "down arrow" will make the next page slide in from the bottom ...

Since pages can appear in various directions, it's important for the button clicked to indicate the direction the page should slide. How can I achieve this using CSS?

Or perhaps the current page should slide out to the right, left, top, or bottom upon clicking?

I came across something similar here: https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ However, in this example, all content is within one HTML file, so it doesn't truly capture the essence of page transitions... Thank you

csscss-transitionspage-transition

Answer №1

$('.btnRight').click(function() {
   $('.rightPage').toggleClass("activeRight");
});
$('.btnLeft').click(function() {
   $('.leftPage').toggleClass("activeLeft");
});
$('.btnBottom').click(function() {
   $('.bottomPage').toggleClass("activeBottom");
});
$('.btnTop').click(function() {
   $('.topPage').toggleClass("activeTop");
});
.btn {
  background-color: lightgray;
  border: none;
  color: white;
  padding: 3px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 2rem;
  outline: none;
}


.rightPage
{
   height:600px;
   position:absolute;
   top:0;
   right:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeRight
{
   right:0;
}

.leftPage
{
   height:600px;
   position:absolute;
   top:0;
   left:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeLeft
{
   left:0;
}

.bottomPage
{
   height:600px;
   position:absolute;
   bottom:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeBottom
{
   bottom:0;
}

.topPage
{
   height:600px;
   position:absolute;
   top:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeTop
{
   top:0;
}
<body style="width:100%;text-align:center;overflow: hidden;">
<div>
<div class="rightPage">
   <button type="button" class="btn btnRight">close</button> 
</div>
<div class="leftPage">
   <button type="button" class="btn btnLeft">close</button> 
</div>

<div class="bottomPage">
   <button type="button" class="btn btnBottom">close</button> 
</div>
<div class="topPage">
   <button type="button" class="btn btnTop">close</button> 
</div>

</div>



<button type="button" class="btn btnRight">Show Right</button>
<button type="button" class="btn btnLeft">Show Left</button>
<button type="button" class="btn btnBottom">Show Bottom</button>
<button type="button" class="btn btnTop">Show Top</button>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

In an ideal scenario, I wish for the text on a label to change color when the input value is considered invalid. For instance: <form> <label> Enter your name: <input type="text"> </label> </form> Ideall ...

htmlcsscss-selectors

Maintain the collapsing of links in the navbar with the help of Bootstrap

Currently, I am designing a responsive navigation bar utilizing Bootstrap. The current layout displays as follows: https://i.sstatic.net/KglsX.png in expanded view, and: https://i.sstatic.net/DKvex.png in collapsed view. While the design appears satis ...

csstwitter-bootstrapnavbar

The overflow issue arising from the off-canvas menu is causing a clash with the par

I am currently working on a website project and have encountered a peculiar issue. I am using parallax for background images in two sections of the site. The parallax effect works fine without setting an overflow rule, but when I add it, the parallax effec ...

jqueryhtmlcss

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

htmlcssflexbox

What is the preferred method of compiling Sass: utilizing the Live Sass Compiler extension in VS Code, or setting up and running Sass through npm? (Including guidance on transitioning from node-sass to dart-sass)

As I delve into an online course focused on Advanced CSS and Sass, I have noticed that the techniques being taught seem a bit outdated. The course heavily relies on node-sass in its dependencies, which is now considered deprecated. An alternative solution ...

cssnode.jsnpmsasslive-sass-compiler

Challenge with the contrast of text color on dark mode with a backdrop of light color texture (image)

Currently, I am using Bootstrap 4 and I have set a light coloured .png image as the background for the navbar and body. The footer area has a dark background with off-white text colour. By default, the text colour is black to complement the light-coloured ...

cssbootstrap-4browseraccessibilitydarkmode

Aligning rotated text in a bootstrap 4 table header

In my Bootstrap 4 project, I'm having difficulties with positioning rotated text within a table header. My goal is to align all the rotated text at the bottom of the cell and centered horizontally. Despite trying different transform-origins, it seems ...

htmlcssbootstrap-4

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

Display unique data-id values for each list item when hovering with Jquery

I am designing a menu for my website where it will appear on the left side of the web. The menu will consist of X <li> items, each with an icon. When I hover over each <li>, I want to display X data-id associated with that item along with the i ...

javascriptjquerycss

Combine a variable and a string to create a new variable

@color-purple: "#ffffff" @colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey; .ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array @color: extract(@colors, @i); //extract the ic ...

cssless

Is there a way to align two canvases perfectly on top of each other?

My current challenge involves the need to position one HTML5 canvas on top of another. So far, I have successfully accomplished this using the following method: <canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-i ...

javascriptcsshtmlcanvas

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...

htmlcssangulartypescript

Most efficient method for dynamically changing HTML content with JavaScript

Can anyone provide guidance on how to switch HTML content using JavaScript? For example: if($sid == 0) {insert one HTML code} else {insert another HTML code} Which method is preferable - LESS, jQuery, CSS3, etc? ...

javascriptjqueryhtmlcss

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

I must negate the impact of the parent CSS file without directly countering it

Currently, I am developing web pages with "rtl" directionality. Within my shop.html template, I am utilizing a bootstrap component known as "breadcrumbs". As a result, I need the breadcrumbs to display from right to left. <div class="breadcrumb"> ...

htmlcssbootstrap-4css-float

Combining child elements under a parent in CSS

Can we prevent repeating the same CSS declaration? Is there a way to combine table th and table td under a single weather-component? weather-component table th, weather-component table td { text-align: center !important; } Could it be done like thi ...

csscss-selectors

Adjusting the dimensions of a button: What to expect

I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimens ...

htmlcss