I spotted a small bug in my site that is also present in your demo - fullscreen slider, Dance Room slide - the text is too long for the effect (screenshot). And it's more obvious on mobile.
Is there a way for us to add longer text, so this doesn't happen? As a workaround, on my site, I added a BR tag to split the line into 2.
I've been experimenting with clip-path settings and I've managed to work it out. So just a heads-up in case you want to fix your demo (for the letters 'D' and 'm').
Hi ClaPat. Thanks for another great theme!
I spotted a small bug in my site that is also present in your demo - fullscreen slider, Dance Room slide - the text is too long for the effect (screenshot). And it's more obvious on mobile.
Is there a way for us to add longer text, so this doesn't happen? As a workaround, on my site, I added a BR tag to split the line into 2.
Thanks. :-)
Hi yes, the text is stroked on the sides by design. Do you want to eliminate the effect?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thanks for your quick reply. :-)
I've been experimenting with clip-path settings and I've managed to work it out. So just a heads-up in case you want to fix your demo (for the letters 'D' and 'm').
#showcase-slider-holder .move-caption{
clip-path: inset(0% 50% 0% 50%);}
#showcase-slider-holder .move-caption:select {
clip-path: inset(0px 10% 0px 10%);}
.light-content .move-caption.stroked .move-title {color: rgba(255,255,255,0.5);}
Ok, thanks for the insight
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi ClaPat. Related questions. :-)
1) Is there a way to add a simple hover effect to the fullscreen slider text? (Maybe a text color change or shadow).
2) When the magic 'ball' cursor option is disabled, is there a way to enable only the 'View Project' circle that appears under the cursor?
Hi,
01. Hover effect can not be added becuase the url is in the slide and the title is not inside it.
02. In scripts.js at Function Showcase(), find and replace the hover ball effect:
$("#showcase-carousel-holder .stroked .move-title").mouseenter(function(e) {
$('#magic-cursor').addClass('visible');
var $this = $(this);
TweenMax.to('#ball', 0.3,{borderWidth: '2px', scale: 1.2, borderColor:'#fff', backgroundColor:'#fff'});
TweenMax.to('#ball-loader', 0.2,{borderWidth: '2px', top: 2, left: 2});
$( "#ball" ).append( '<p class="first">' + $this.data("firstline") + '</p>' + '<p>' + $this.data("secondline") + '</p>' );
});
$("#showcase-carousel-holder .stroked .move-title").mouseleave(function(e) {
$('#magic-cursor').removeClass('visible');
TweenMax.to('#ball', 0.2,{borderWidth: '4px', scale:0.5, borderColor:'#999999', backgroundColor:'transparent'});
TweenMax.to('#ball-loader', 0.2,{borderWidth: '4px', top: 0, left: 0});
$('#ball p').remove();
});
Also add in Aditional CSS:
.disable-cursor.visible {
display:block;
}
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Great, thanks again ClaPat.