Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


Seeking help on landing page design

  • Please log in to reply
1 reply to this topic

#1 Windyy91


  • Members
  • 83 posts
  • Local time:10:15 PM

Posted 09 February 2018 - 05:39 AM

Hi everyone, I am currently stuck on designing animations on a landing page.


I really it to happen like this:


I have two different images (Grey on the left, Maroon on the right)


I want them to slide left/right when the mouse hovers across the screen.

I also have an "enter" button smack right at the center of these two images, which I want them to open like a door after hitting the enter button.


Reference: https://css-tricks.com/creating-css-sliding-door-effect/


One problem with this reference is I will have a problem if the end-user double clicks on it. I want this action to be irreversible, because its like a transition effect to the main page from the landing page and I certainly don't want to reverse anything by double clicking.


Can anyone offer me some tips or tricks in regards to this problem?


BC AdBot (Login to Remove)




  • Members
  • 43 posts
  • Local time:03:15 AM

Posted 23 February 2018 - 02:58 AM

Add a javascript function to the click event of the button that changes the css classes of the button.


<input type='button' onclick='changeClass()' id="myButtonName" ... other button code here />


and in javascript section (before the buttons code)



function changeClass()


   document.getElementById("myButtonName").classList.remove('MyClassName'); // remove the transition class

   document.getElementById("myButtonName").classList.add('MyClass');  // add a class name that doesn't do transitions and shows the open door




This code is off the cuff so mileage may vary but the theory is correct.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users