After downloading a slideshow for my home page, I noticed it came with 2 animated text titles (H2 and H3) that slide in from the left to center. Now, I am trying to incorporate an additional line of text (H4) that should slide in from the right with a delay of a few seconds.
I have made the necessary edits to the webpage and .css file, but I'm uncertain about handling the javascript without causing any issues.
Below is a snippet of the js file where the title animation is being managed:
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
And here's the css file after adding the extra text as 'H4':
.ei-slider{
position: relative;
width: 100%;
max-width: 1999px;
height: 500px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
...(remaining CSS rules)
}Lastly, here is the HTML/JS code on the webpage:
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
...(slider content)
</script>For the complete JavaScript file, you can refer to the link below:
View My Slider in Action!