How To Slide Images & Text At The Same Time Using Jquery

I have a background image, a logo, and some text. The logo and text need to fade in and slide (in opposite directions), just like the video here: Here is a video that does somethi

Solution 1:

Try this:

HTML:

<!--Background image here -->
<div class="centre">
    <div id="image">
        <!--Logo Here-->
        <img src="http://placehold.it/350x150" id="myImage"/>
    </div>
    <span id="border"></span>
    <div id="text">
        <p id="first">The original SheerWeave fabric</p>
        <p id="second">Infused with Microban</p>
        <p id="third">GREENGUARD Certified</p>
        <p id="fourth">Available in 10 colors</p>
    </div>
</div>

CSS:

.centre {
  display: table; 
  margin:0 auto;
}

#image {
  opacity: 0;
  display: table-cell;
  position: relative;
  margin-left: 0px;
  float:left;
}

#border {
border: 1px solid black;
  position: absolute;
  height: 150px;
  margin-left: -10px; 
  opacity: 0; 
}

#text {
  opacity: 0;
  position: relative;
  float: left;
  vertical-alignment: middle;
  display: table-cell; 
  margin-left: -220px;
}

JS:

$(window).load(function() {
  $( "#image" ).animate({
    opacity: 1,
    marginRight: "0.3in"
  }, 1500 );

  $( "#text" ).animate({
    opacity: 1,
    marginLeft: "0.1in"
  }, 1500 );

    $( "#border" ).animate({
      opacity: 1
  }, 5500 );
});

See Example.

Solution 2:

You could also work with covers above the image and the text with different z-index values.

There are two overlays (covers) that are hiding the text and the image. You can check-out how it works if you're setting the opacity values of the covers to a lower alpha, then you can see how they hide the elements.

Have a look at the demo below and here at jsFiddle.

I think there's one thing to improve in the code and that's the vertical alignment of the text. It's not centered.

$(document).ready(function () {

    $('.text>p').each(function (index, item) {
        //console.log(item, this);
        $(this).delay(100 + index * 200).animate({
            'left': '100%'
        },
        600 + index * 100,
            'easeInQuad');
    });
    $('.logo').animate({
        'left': '0',
        'opacity': '1.0'
    }, 800);
    //$('.coverLeft').delay(1600).animate({'opacity': '0.0'}, 1000); // not required because z-index is below image and above text
    $('.coverRight').delay(600).animate({
        'opacity': '0.0'
    }, 1000);


});

.logo {

    /*reveal from right to left*/

    position: absolute;

    left: 50%;

    width: 50%;

    text-align: right;

    opacity: 0.0;

    z-index: 7;

}

.wrapper {

    padding-top: 10px;

    margin: 0 auto;

    width: 100%;

    height: 100%;

}

body {

    overflow: hidden;

}

.text {

    /* reveal right */

    position: absolute;

    left: 0;

    width: 50%;

    /*display:table-cell;
    vertical-align:middle;*/

    opacity: 1.0;

    white-space: nowrap;

    z-index: 4;

    padding-left: 10px;

}

.text p {

    font-family: sans-serif;

    position: relative;

    /*line-height: 20px;*/

}

.coverLeft {

    position: absolute;

    background-color: #fff;

    left: 0;

    height: 100%;

    width: 50%;

    opacity: 1.0;

    z-index: 6;

}

.coverRight {

    position:absolute;

    right: 0;

    width: 50%;

    height: 100%;

    background-color: #fff;

    opacity: 1.0;

    z-index: 8;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="coverLeft"></div>
<div class="coverRight"></div>

<div class="wrapper">
    <div class="logo">
        <img src="http://lorempixel.com/200/200/fashion/9/" />
    </div>
    <div class="text">
        <p id="first">The original SheerWeave fabric</p>
        <p id="second">Infused with Microban</p>
        <p id="third">GREENGUARD Certified</p>
        <p id="fourth">Available in 10 colors</p>
    </div>
</div>
<!--Background image here -->
<!--<img src="path" width="some width" height="some height"/>-->
<!-- <div class="centre">
            <div style="float: left;">
-->
<!--Logo Here-->
<!-- <img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
    <p id="first">The original SheerWeave fabric</p>
    <p id="second">Infused with Microban</p>
    <p id="third">GREENGUARD Certified</p>
    <p id="fourth">Available in 10 colors</p>
</div>
</div>-->