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.

Photo

Seeking help on landing page design


  • Please log in to reply
1 reply to this topic

#1 Windyy91

Windyy91

  • Members
  • 83 posts
  • OFFLINE
  •  
  • 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)

 


#2 VBCONZ

VBCONZ

  • Members
  • 43 posts
  • OFFLINE
  •  
  • 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)

 

<script>

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

}

</script>

 

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