css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Having some fun with carousels! Use the sliding carousels to enter the super secret code.

This demo was made with:

Comments

  1. This is great. We're so afraid of audio these days…

  2. This is amazing.

  3. Really nice! Somehow reminiscent of an element from the old Myst game.

  4. Love the sound effects!

  5. Awesome! I am new to JavaScript and I have been playing around with your code to make some changes. (unsuccessfully) Do you have any suggestions on how to make a button appear when the lock is unlocked? This would be a great login page, but it needs a button/link to another page once unlocked. Thanks in advance.

  6. @pailwriter Thanks Aubrey! That sounds like a cool idea.

    For that, you could have a button in the DOM already, style it with CSS, and have it set to display: none;. Then, once the .verified class gets added to the container when the correct code is entered, you could reveal that button. Something like:

    .button {
        display: none;
        /* other button styles here */
    }
    
    .verified .button {
        display: block;
    }
    

    The relevant lines of code to watch out for are 28-40. That's where the check for verification happens.

  7. I know it’s been a while since this post was listed and since I asked about adding the “button/link”. I followed your advice and added a basic button on the “Index.htm” page, added the “.button” and “.verified .button” code you have listed in your response to the “CSS” page, then I added “this.verified.button();” to the “index.js” page just after line 32 on your script here. But, still it will not display the button when the correct “secret code” is selected. Am I missing some javascript reference? Thanks.

  8. @pailwriter Hey, I might be able to better assist if I could see the entirety of your code. Do you have it hosted somewhere, or is it on CodePen? I'm not sure what this.verified.button(); is doing in the context of your code, so seeing the whole thing would help.

  9. Okay, I think your right in keeping it simple. I just added a basic button on the “index.htm” page like so:

    { button class="button2">Enter

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...