Lost item phenomenon: conceal information below until it emerges

I'm attempting to create a garage door effect on my website, where upon loading the page, a garage door is displayed. Upon hovering over the door, it lifts up to reveal the content behind it. The challenge I'm facing is keeping the content hidden until the door lifts. Any suggestions or ideas would be greatly appreciated. You can view the site here:

If you need the code, I can provide that as well.

<div id="wrapper">
    <div id="container">
        <img src="./images/Logo_door.png" class="top">

        <section id="main">
        <!-- main content here -->
        </section>

        <footer id="footer">
        <!-- video and map section -->
            <div id="video">
                <iframe class="hidden" width="363" height="187" src="http://www.youtube.com/embed/Pd00CAw15-E?wmode=transparent" frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="map">
            </div>
        </footer>
    </div>  
</div>

Here is the CSS for the design:

body {
    background:url('../images/background1.jpg');
    background-repeat:repeat-y repeat-x;
}

#wrapper {
    background:url('../images/background2.gif');
    display:block;
    height:600px;
    width:900px;
    padding:10px 0 10px 0;
    margin:auto;
    border-radius:15px;
}

footer {
    margin:auto;
    width:800px;
    height:200px;
}
#main {
    height:350px;
    margin:0px 50px 50px 50px;
    width:800px;
    border-radius:15px;
    padding:0;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
}

#video {
    background:black;
    padding:0;
    margin:0px 0px 0px 25px;
    float:right;
    width:375px;
    height:200px;
    border-radius:10px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
}

#video iframe {
    margin:6px 0 0 6px;
}

#map {
    padding:0;
    margin:0px 25px 0px 0px;
    border-radius:10px;
    float:left;
    width:375px;
    height: 200px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
}

.top {
    margin:auto;
    height:700px;
    width:900px;
    padding:0;
    position:absolute;
}

Below is the jQuery code I am using:

$(function() {

    $('#wrapper').hover(function() {
    $('img.top', $(this)).stop().animate({top: '-900px'}, 1000); 
        },function() {
    $('img.top', $(this)).stop().animate({top: '10px'}, 1000);
    })
});
javascriptjqueryhtmlcss

Answer №1

To hide content during the initial page load, set its opacity to opacity: 0. Then, once document.ready or window.ready is triggered, change the opacity to opacity: 1.

Answer №3

This code will ensure that your main content appears once the animation is complete

Jquery section 

  $(function() {

    $('#wrapper').hover(function() {
    $('img.top', $(this)).stop().animate({top: '-900px'}, 1000 , function(){$('.hidden').css('display' , 'block');}); 
        },function() {
        $('.hidden').css('display' , 'none');
    $('img.top', $(this)).stop().animate({top: '10px'}, 1000);
    })
});

CSS section 

body {
    background:url('../images/background1.jpg');
    background-repeat:repeat-y repeat-x;
    }

#wrapper {
    background:url('../images/background2.gif');
    display:block;
    height:600px;
    width:900px;
    padding:10px 0 10px 0;
    margin:auto;
    border-radius:15px;
    }

footer {
    margin:auto;
    width:800px;
    height:200px;
    }

#main {
    height:350px;
    margin:0px 50px 50px 50px;
    width:800px;
    border-radius:15px;
    padding:0;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video {
    background:black;
    padding:0;
    margin:0px 0px 0px 25px;
    float:right;
    width:375px;
    height:200px;
    border-radius:10px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video iframe {
    margin:6px 0 0 6px;
    }

#map {
    padding:0;
    margin:0px 25px 0px 0px;
    border-radius:10px;
    float:left;
    width:375px;
    height: 200px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

.top {
    margin:auto;
    height:700px;
    width:900px;
    padding:0;
    position:absolute;
    }
.hidden{
    display : none;
}

I have also corrected the HTML part where your embed was not correct

<div id="wrapper">
    <div id="container">
        <img src="./images/Logo_door.png" class="top">

        <section id="main" class="hidden">
        <!-- main content here -->
        </section>

        <footer id="footer" class="hidden">
        <!-- where video and map will go -->
            <div id="video">
                <iframe class="hidden" width="363" height="187" src="http://www.youtube.com/embed/Pd00CAw15-E?wmode=transparent" frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="map">
            </div>
        </footer>
    </div>  
</div>

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

Removing a row from a table seamlessly without the need to reload the page

I am having an issue with my page that displays a list of orders. When a user clicks on a button to delete a row from the table, it only removes the first row successfully. However, when attempting to delete the second or third row, it does not work. Can s ...

javascriptjqueryajaxasp.net-mvc

Issues with Angular's *ngIf directive not functioning correctly

Within my template, I have a block of HTML that controls the visibility of a div. <div *ngIf="csvVisible"> <p>Paragraph works</p> </div> This particular code snippet belongs to my component. export class SettingsComponent imple ...

htmlangular

Disable page scrolling after making changes to the DOM

When my JavaScript function executes on page load and at set intervals, it cycles through images supplied by another PHP script. However, every time the function manipulates the DOM, the page scrolls back to the top of the containing div, which is quite fr ...

javascripthtmldomscroll

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

Updating the image source URL dynamically inside a division within a script using JavaScript

I'm attempting to insert a dynamic URL within an img src tag. Below is my HTML and Script code. When a tab is clicked, a GET HTTP Method is called, which responds with an image URL. I want to use this image URL in the img src field. HTML Code ...

javascripthtmlajax

Using the index of a v-for loop as the value for v-model

I am facing a challenge in setting the index of a v-for loop to a dynamic v-model. I have tried a method that works, but it is not elegant and results in errors in the console: Here is my template section: <div v-for="(ob, index) in $v.especifications ...

javascriptvue.jsvue-cliv-forv-model

"Send the response in ExpressJS before making a request to loop through the

I am currently working with a postgres database that contains records with a column format in JSON, which refers to other similar records. The challenge I am facing is retrieving linked records through asynchronous methods due to the nested structure and ...

javascriptnode.jspostgresqlexpressasynchronous

The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...

htmlcss

Strategies for creating a dynamic progress bar using jQuery and JavaScript

I'm currently working on a project that involves increasing a percentage number while filling up the background color inside it based on the percentage value. The current setup is functional in terms of animating the background, but I need it to dynam ...

javascripthtmlcssjquery-animate

Extract reference value from an HTML element

Is there a way to access the ref prop from an HTML element using Testing Library React? My current code snippet is as follows: it('element container ref should be null if prop noSwipe is passed', () => { const onCloseMock = jest.fn() ...

javascriptreactjsjestjstesting-library

Handling AJAX Events - pre-sending, encountering failure and successfully completing

I am attempting to add an "on begin" handler to an AJAX call, but I keep running into the following error message: TypeError: request.beforeSend is not a function According to the information on the JQuery documentation site, the code snippet below should ...

jqueryajaxasp.net-mvc-3

Is a JS-Native Bridge that works across all platforms?

Currently, I am developing an app that heavily utilizes webviews on both iOS and Android to display content with native chrome around it. I am looking for a way to manipulate this chrome using JavaScript methods. On Android WebView, there is a feature cal ...

javascriptandroidiosmobile-website

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

How can I change a div element in a click event handler, while ensuring that PHP code inside the element remains intact and does not get moved into an HTML comment? You can find my code snippet below: $("#replaceCat1").click(function(){ $("div.boxconte ...

javascriptphpjqueryhtml

What is the best way to retrieve all records from a MongoDB collection?

I am currently delving into the realm of JavaScript and MongoDB while attempting to construct a basic blog engine. My goal is to retrieve all blog posts stored in MongoDB so that I can utilize this data to populate an EJS template. Although I successfully ...

javascriptmongodbmongoose

Order of execution for setImmediate() and setTimeout() callbacks compared to I/O callbacks

In the world of Node.js, the event loop powered by libuv is divided into specific phases. The poll phase is where we wait for I/O tasks to complete before running their associated callbacks. The length of this waiting period is determined by timers, timeou ...

javascriptnode.js

Using an action code to retrieve the current user from firebase: A step-by-step guide

I am in the process of designing 2 registration pages for users. The initial page prompts the user to input their email address only. After they submit this information, the following code is executed: await createUserWithEmailAndPassword(auth, email.value ...

javascripttypescriptfirebase

Combining various fields to showcase in autocomplete with AJAX on cakephp

I am currently facing an issue with my autocomplete functionality, as it only displays the first name of the user. I would like to concatenate the first name, last name, and other details. How can I modify the code below to achieve this? <script type=" ...

ajaxcakephpjquery

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Problems with the bottom section

Is there a way to make the middle section extend downwards when the window is resized, keeping the footer at the bottom without overlapping with the content? If anyone has suggestions on how to achieve this, please share! I'm hoping there's a b ...

csspositionfooterextendfixed

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

javascriptjqueryhtmljinja2