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 something similar. I just want them to animate in and stop. i don't need it to be as detailed as in the video.
For some reason I cannot get my image to do anything. It does not slide anywhere. When the animation is done, I want it to sit next to the text.
Also, my text slides to the right like I want, but after it moves right, it automatically sends itself back left in an ugly way. I just want it to slide right and stay there. Thanks for the help.
HTML & jQuery:
<!--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>
<script>
$(document).ready(function() {
$('#myImage').animate({ 'right': '250'}, 16000);
$('#first').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#second').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#third').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#fourth').animate({ 'left': '50', 'opacity': 1 }, 1600);
});
</script>
CSS:
#first, #second, #third, #fourth{
opacity: 0;
}
.centre {
min-width: 500px;
margin: auto;
top: 125px;
left: 350px;
bottom: 0;
right: 0;
position: absolute;
z-index: 999;
}
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.
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>-->
