Hi there,
I came across this text animation that compresses txt left and right on hover. Does anyone know if it can be recreated in Readymag?
Thanks,
Jess
Hi there,
I came across this text animation that compresses txt left and right on hover. Does anyone know if it can be recreated in Readymag?
Thanks,
Jess
Hi Jess, I located the Jquery script on their website. I hope this helps!
<section class="custom_container">
<div class="containerdownstairs">
<img src="poodle_home_down.png" class="down" style="width: 528px;">
<img src="poodle_home_stair.png" class="stairs1" style="width: 1052px;">
</div>
<div class="containerupstairs">
<img src="poodle_home_up.png" class="up" style="width: 839px;">
<img src="poodle_home_stair.png" class="stairs2" style="width: 741px;">
</div>
</section>
$('.containerdownstairs').on("mousemove", function(event) {
$("img.down").css("width", event.pageX)
$("img.stairs1").css("width", $('.custom_container').width() - event.pageX)
})
$('.containerdownstairs').on("touchmove", function(event) {
$("img.down").css("width", event.touches[0].pageX)
$("img.stairs1").css("width", $('.custom_container').width() - event.touches[0].pageX)
})
$('.containerupstairs').on("mousemove", function(event) {
$("img.up").css("width", event.pageX)
$("img.stairs2").css("width", $('.custom_container').width() - event.pageX)
})
$('.containerupstairs').on("touchmove", function(event) {
$("img.up").css("width", event.touches[0].pageX)
$("img.stairs2").css("width", $('.custom_container').width() - event.touches[0].pageX)
})