wpengine

wpengine

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Animate It!
Questions
Text slider on homepage
  • Page:
  • 1
  • 2

TOPIC: Text slider on homepage

Text slider on homepage 7 years 10 months ago #568

Hi,

I am trying to add a text slider on my homepage like on this website : frichti.co/
I want to have one sentence with 3 parts :
- one part that does not change : "We want to"
- one part that changes : "help" / "coach" / "challenge" / "uplift" -> the changing part would fade in / fade out
- one part that does not change : "your employees"
Do you see what I mean ?

Your plugin is great! but I don't understand what to do in order to achieve that.
I have read those 2 threads below but I still don't know how to do it...
www.downloads.eleopard.in/forum/question...ith-text-slider.html
www.downloads.eleopard.in/forum/questions-ai/119-slider.html

Thank you for your help!
The administrator has disabled public write access.

Text slider on homepage 7 years 10 months ago #569

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Patrick,

Thanks a lot for using the Animate It! plugin.
The example you showed can be done using the plugin. But I am afraid it cannot be repeated.
The best we can do here is, Fadein and out all the texts, and finally fade in and keep "uplift".

I have created a demo for you here: http://animateitdemo.wpdevcloud.com/test-for-patrick/

Now, here's the HTML and CSS for the demo.
However, based on your theme, the structure might break (your website might have different fonts, font-sizes etc.).

So once you add this code to your website, please send me the link, so that I can modify the CSS and send you updated one accordingly.

HTML: paste this in your Post/Page/Module
Note: Remember to paste it using Test mode



<div class="text-slider-wrapper">
	<div class="side-by-side">We want to</div>
	<div class="text-sliders side-by-side">
		[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0.5" entry_duration= "1" entry_timing= "linear" exit_animation_type= "fadeOut" exit_delay= "3" exit_duration= "1" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
			help
		[edsanimate_end]
		[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "5.5" entry_duration= "1" entry_timing= "linear" exit_animation_type= "fadeOut" exit_delay= "3" exit_duration= "1" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
			coach
		[edsanimate_end]
		[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "10.5" entry_duration= "1" entry_timing= "linear" exit_animation_type= "fadeOut" exit_delay= "3" exit_duration= "1" exit_timing= "linear" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
			challenge
		[edsanimate_end]
		[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "15.5" entry_duration= "1" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
			uplift
		[edsanimate_end]
	</div>
	<div class="side-by-side">your employees</div>
</div>

CSS: Paste the following CSS in Settings > Animate It! > Custom CSS Tab
.text-slider-wrapper{
	display: block;
	margin-left: auto;
	max-width: 410px;
	margin-right: auto;
}

.side-by-side{
	display: inline-block;
	padding: 15px;
	vertical-align: top;
}

.text-sliders{
	position: relative;
	width: 90px;
	height: 30px;
	padding: 0;
	margin: 15px 0;
}

.text-sliders .animated{
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 90px;
}

.side-by-side p{
	margin: 0;
}

Please let me know once you have set up this code.
Last Edit: 7 years 10 months ago by eLEOPARD.
The administrator has disabled public write access.

Text slider on homepage 7 years 10 months ago #570

Thank you for your help. But there are some issues with the CSS as you expected : www.delivreurs.com/index.php/slideshow/
Is there also a way to reduce the 2 spaces between the parts that do not change (we want to / your employees) and the changing part in the middle ?
Thanks again.
The administrator has disabled public write access.

Text slider on homepage 7 years 10 months ago #571

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Patrick,

Please remove the previous CSS and paste this updated one.
I have added font size, margin etc. as well to make it look better.

Regarding the space between (we want to / your employees), I have changed the CSS to match the width of "challenge".

.text-slider-wrapper{
	display: block;
	max-width: 360px;
	font-size: 18px;
	padding: 15px;
	margin: 15px auto;
}

.side-by-side{
	display: inline-block;
	padding: 15px 0;
	vertical-align: top;
}

.text-sliders{
	position: relative;
	width: 90px;
	height: 30px;
	padding: 0;
	margin: 15px 0;
}

.text-sliders .animated{
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 90px;
}

.side-by-side p{
	margin: 0;
}

.side-by-side br{
	display: none;
}

Please let me know if this resolves the CSS issues.
The administrator has disabled public write access.

Text slider on homepage 7 years 10 months ago #572

Thanks for the quick reply!
It seems like the changing part in the middle is still a bit above the other parts : do you see it? What should I change to have it a bit lower (aligned with the non-changing parts)?
The administrator has disabled public write access.

Text slider on homepage 7 years 10 months ago #573

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
I just checked and the whole text aligns perfectly.

Could you send me a screenshot of what you see on your end? That would help me get to know the issue better.
Last Edit: 7 years 10 months ago by eLEOPARD.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Forum
Animate It!
Questions
Text slider on homepage
Time to create page: 0.249 seconds

Need Customization? Feel free to...

Contact Us

If you like these extensions, help us buy Yoga Mats :)