Created
June 16, 2015 13:54
-
-
Save admench/5979e6bab74135a81595 to your computer and use it in GitHub Desktop.
Flexslider animate text over the top.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(window).load(function() { | |
$('.flexslider').flexslider({ | |
start: function(slider) { | |
$(slider).find(".flex-active-slide .slide-copy").slideToggle(400); | |
}, | |
after: function(slider) { | |
$(slider).find(".flex-active-slide .slide-copy").slideToggle(400); | |
}, | |
end: function(slider) { | |
$(slider).find(".slide-copy").css('display', 'none'); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.flexslider { | |
border: none; | |
border-radius: 0; | |
} | |
.slide-wrapper { | |
position: relative; | |
.slide-copy { | |
display: none; | |
> * { | |
margin: 0; | |
} | |
margin: 0; | |
background: white; | |
background: rgba(255, 255, 255, 0.5); | |
padding: 1rem; | |
color: $purple; | |
@include media ($phablet-up) { | |
position: absolute; | |
bottom: 2rem; | |
left: 2rem; | |
margin-right: 2rem; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="flexslider"> | |
<ul class="slides"> | |
<li> | |
<div class="slide-wrapper"> | |
<img src="images/image1.jpg" /> | |
<div class="slide-copy"> | |
<h2>Furniture Safety & Design</h2> | |
<p class="script">We strive to provide a great service, We strive to provide a great service, We strive to provide a great service</p> | |
<a href="#" class="button">Read more</a> | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="slide-wrapper"> | |
<img src="images/image2.jpg" /> | |
<div class="slide-copy"> | |
<h2>Leading Class Comfort testing</h2> | |
<p class="script">We strive to provide a great service, We strive to provide a great service, We strive to provide a great service</p> | |
<a href="#" class="button">Read more</a> | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="slide-wrapper"> | |
<img src="images/image3.jpg" /> | |
<div class="slide-copy"> | |
<h2>Safety in numbers</h2> | |
<p class="script">We strive to provide a great service, We strive to provide a great service, We strive to provide a great service</p> | |
<a href="#" class="button">Read more</a> | |
</div> | |
</div> | |
</li> | |
</ul> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment