Is there a way to disable the splash screen when logging out?

Currently, I am facing an issue with my login and logout page that includes a splash screen. The splash screen works perfectly on the load page without using any jQuery or JavaScript functionalities. It is created using CSS3 animations. However, when I click on the logout button, the same splash screen animation repeats itself. I do not want the splash screen to appear again when the logout button is clicked. I only want it to be displayed on the onload page and then removed when the logout button is clicked. I have tried using .hide() and .remove(), but they do not seem to work. Can someone please assist me in modifying the code so that the splash screen is only shown on load and removed on logout? CSS3 animation:


/* SPLASH SCREEN */
#splash {
    background-color: #fc9204 !important;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    transition-property: top;
    -webkit-animation: slide-out-fwd-center  7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-out-fwd-center  7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-out-fwd-center {
    0% {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(600px);
        transform: translateZ(600px);
        opacity: 0;
    }
}
@keyframes slide-out-fwd-center {
    0% {
        -webkit-transform: translateZ(1);
        transform: translateZ(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(600px);
        transform: translateZ(600px);
        opacity: 0;
    }
}

#splash img {
    display: block;
    margin: 200px auto;
    width: 100px;
    height: 200px;
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-fwd-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translateZ(160px);
        transform: translateZ(160px);
    }
}
@keyframes slide-fwd-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translateZ(160px);
        transform: translateZ(160px);
    }
}

Answer №1

Check out this link to a previous question on Stack Overflow.

Can I have an onclick effect in CSS?

This post demonstrates how to detect a click using CSS, but I suggest utilizing JavaScript for this task instead. JavaScript is more versatile and powerful, allowing you to do much more. It's beneficial to have a basic understanding of it to create exceptional webpages.

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

Error message encountered: "Forbidden - CSRF cookie is not set while attempting a POST request with Django

In my Django 3 application, I have implemented jQuery Ajax posts on bootstrap modals. There are several buttons that do not belong to any form but trigger a post request to specific URLs. All Django methods follow the guidelines mentioned here: https://do ...

create the text with double bold - adjusted pages

Is there a method to enhance the boldness of the text without adjusting the font size? Currently, the following styling is applied: numbers: { fontSize: 30, color: '#31C283', fontWeight: 'bold', }, Is there a way to m ...

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

As I work on developing a custom component using StencilJS, I find myself needing to adjust the outline behavior when users navigate through it with either a keyboard or mouse. My component employs ShadowDOM and I aim to extract an HTML tag attribute from ...

Looking for a way to implement a vertical autoscroll <ul> list that responds to mouse movement using JavaScript and jQuery

Could you assist me in enabling the list items to be moved using mouse movement? When the user moves the mouse cursor vertically upward over the list, the list should scroll downward. If the user moves the mouse cursor downward over the list, the list shou ...

Updating the Highcharts chart when new data is available

Utilizing Highcharts, I am looking to have this chart update every second. Here's my current setup: JSFiddle I've implemented a timer with window.setInterval(updateChart, 1000); which successfully updates data each second. However, I'm uns ...

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

Adjust the background shade of specific characters within an input text field

When a user inputs a string into a standard HTML input field (type="text"), such as "2013/13/29", and validation reveals that the number 13 is invalid in this context, I would like to visually highlight it by changing its background color to red while tu ...

The Troubles of Top Margins in CSS

Hey there, I'm a bit stumped on this issue. I've been trying to apply a 10px top margin to a paragraph inside a div, but instead of creating the space I want between elements, it just seems to push the whole containing div down by 10px. Here are ...

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...

Adaptive icon menu with submenus

I'm looking to create an icon menu with a submenu that expands upon click using HTML and CSS. Here's the design I have in mind I want the submenu to appear on the next row of the responsive div, as shown in the image above. However, the issue I& ...

Ensuring the accuracy of user input

Can someone assist me with comparing two dates in JSP? I need validation that alerts the user when a future date is entered. The start date or end date should not be in the future. The date format is 12-5-2011 10:51:49. Any help would be greatly apprecia ...

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

A guide to troubleshoot and resolve the 500 (Internal Server Error) encountered during an Ajax post request in Laravel

I am facing an issue in my project where I am trying to store data into a database using ajax. However, when I submit the post request, I get an error (500 Internal Server Error). I have tried searching on Google multiple times but the issue remains unreso ...

Changing the class of an element using CSS when hovering over another

Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have: ul.menu .menulink { padding ...

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

An issue occurred while attempting to execute a function in AngularJS

Currently, I am in the process of developing a cross-platform application using AngularJS, Monaca, and Onsen UI. My current challenge involves calling a function in my controller from an ng-click() event on my view. However, upon clicking the button that ...

Send information to PHP controller using DataTables Ajax functionality

Utilizing the DataTables library for Jquery, I am attempting to POST some basic data to a controller that contains a SQL query. The query will retrieve JSON data that I can manipulate as needed. When I use standard jQuery AJAX, everything functions proper ...

Troubleshooting IE compatibility for $.trim() jQuery functionality

Having trouble with $.trim() not working in IE but works fine in Firefox. Any ideas why this might be happening? Thanks. $('#GuestEmailAddress').on('blur', function () { var $inputValue = $(this).val(); ...

Exploring the application of styles within the shadow DOM

I'm experimenting with applying styles to the shadow DOM. Consider the following example: const element = document.getElementById("bar"); const shadowRoot = element.attachShadow({ mode: "open" }); const greeting = document.createElement("p"); gree ...