wpengine

wpengine

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Animate It!
Questions
Help with text slider

TOPIC: Help with text slider

Help with text slider 8 years 10 months ago #385

  • Björn
  • Björn's Avatar
  • Offline
  • New Member
  • Posts: 10
  • Thank you received: 3
  • Karma: -2
Hi, I'm using a custom HTML module and I am trying to create 4 blocks of text that slides in one by one. I can't see to get it right, everything keeps sliding in at the same time. I followed the instructions here, www.downloads.eleopard.in/forum/questions-ai/119-slider.html

My setup looks like this:
<div class="slideshow-wrapper">{edsanimate_animated_fadeInRight_infinite_delay1_duration10}
	<div class="item active">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-content animation fadeInLeft">
						<div class="slider-title">
							<h1 class="sp-smart-title">Make a Difference</h1>
							<p class="sp-smart-posttitle">Help those in need</p>
						</div>
						<div class="slider-text">A serious and committed volunteer can contribute an incredible number of positive things to the projects and communities they work in.</div>
						<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Start Here</a></div>
					</div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {edsanimate_animated_fadeInRight_infinite_delay20_duration10}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-content animation fadeInLeft">
						<div class="slider-title">
							<h1 class="sp-smart-title">Get Life Experience</h1>
							<p class="sp-smart-posttitle">Do new and exciting things</p>
						</div>
						<div class="slider-text">Besides various altruistic or self-improvement reasons for volunteering, it&rsquo;s a fantastic way for people on a budget to see exotic countries and truly become immersed in the culture and environment.</div>
						<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Your Journey Starts Here</a></div>
					</div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {edsanimate_animated_fadeInRight_infinite_delay30_duration10}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-content animation fadeInLeft">
						<div class="slider-title">
							<h1 class="sp-smart-title">Visit Exotic Places</h1>
							<p class="sp-smart-posttitle">While helping people in need!</p>
						</div>
						<div class="slider-text">Instead of staying in overpriced hotels and spending your hard-earned money visiting all the bright-and-shiny tourist traps, volunteers get to know the real people of the country and their real lives, and channel money and other resources to the people who need them most.</div>
						<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Start Here, Now!</a></div>
					</div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {edsanimate_animated_fadeInRight_infinite_delay40_duration10}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-content animation fadeInLeft">
						<div class="slider-title">
							<h1 class="sp-smart-title">Learn New Cultures</h1>
							<p class="sp-smart-posttitle">Experience new things</p>
						</div>
						<div class="slider-text">You also get to stay with like-minded people from all over the world who share your views on life, not to mention local people and experienced volunteers who really know the city or town you are in.</div>
						<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Take Me There!</a></div>
					</div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate}</div>

Please could you show me what I am doing wrong?
The administrator has disabled public write access.

Help with text slider 8 years 10 months ago #386

  • Björn
  • Björn's Avatar
  • Offline
  • New Member
  • Posts: 10
  • Thank you received: 3
  • Karma: -2
As soon as I posted that I saw I had classes in that HMTL from a previous slideshow I tested. I've removed that now.
The administrator has disabled public write access.

Help with text slider 8 years 10 months ago #387

  • Björn
  • Björn's Avatar
  • Offline
  • New Member
  • Posts: 10
  • Thank you received: 3
  • Karma: -2
Ok, so I've ended up with this. I'm sure you can see what I am trying to accomplish. I want the text to come in one by one and fade out again, infinitely. I've also added classes to my stylesheet for the longer delays.
<p>{edsanimate_animated_fadeOutLeft_delay80_duration2} {edsanimate_animated_fadeInRight_delay2_duration2}</p>
<div class="slideshow-wrapper">{edsanimate_animated_fadeOutLeft_delay20_duration2} {edsanimate_animated_fadeInRight_delay2_duration2}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-title">
						<h1 class="sp-smart-title">Make a Difference</h1>
						<p class="sp-smart-posttitle">Help those in need</p>
					</div>
					<div class="slider-text">A serious and committed volunteer can contribute an incredible number of positive things to the projects and communities they work in.</div>
					<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Start Here</a></div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {/edsanimate} {edsanimate_animated_fadeOutLeft_delay40_duration2} {edsanimate_animated_fadeInRight_delay20_duration2}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-title">
						<h1 class="sp-smart-title">Get Life Experience</h1>
						<p class="sp-smart-posttitle">Do new and exciting things</p>
					</div>
					<div class="slider-text">Besides various altruistic or self-improvement reasons for volunteering, it&rsquo;s a fantastic way for people on a budget to see exotic countries and truly become immersed in the culture and environment.</div>
					<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Your Journey Starts Here</a></div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {/edsanimate} {edsanimate_animated_fadeOutLeft_delay60_duration2} {edsanimate_animated_fadeInRight_delay40_duration2}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-title">
						<h1 class="sp-smart-title">Visit Exotic Places</h1>
						<p class="sp-smart-posttitle">While helping people in need!</p>
					</div>
					<div class="slider-text">Instead of staying in overpriced hotels and spending your hard-earned money visiting all the bright-and-shiny tourist traps, volunteers get to know the real people of the country and their real lives, and channel money and other resources to the people who need them most.</div>
					<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Start Here, Now!</a></div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {/edsanimate} {edsanimate_animated_fadeOutLeft_delay80_duration2} {edsanimate_animated_fadeInRight_delay60_duration2}
	<div class="item">
		<div class="container">
			<div class="row-fluid">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
					<div class="slider-title">
						<h1 class="sp-smart-title">Learn New Cultures</h1>
						<p class="sp-smart-posttitle">Experience new things</p>
					</div>
					<div class="slider-text">You also get to stay with like-minded people from all over the world who share your views on life, not to mention local people and experienced volunteers who really know the city or town you are in.</div>
					<div class="slider-button"><a href="#" class="btn btn-primary btn-large appico-content-more">Take Me There!</a></div>
				</div>
			</div>
			<div class="clearfix">&nbsp;</div>
		</div>
	</div>
	{/edsanimate} {/edsanimate}</div>
<p>{/edsanimate} {/edsanimate}</p>

The classes I added:
.delay20 {
    -webkit-animation-delay: 10s;
      -moz-animation-delay: 10s;
        -ms-animation-delay: 10s;
          -o-animation-delay: 10s;
}
.delay40 {
    -webkit-animation-delay: 20s;
      -moz-animation-delay: 20s;
        -ms-animation-delay: 20s;
          -o-animation-delay: 20s;
}
.delay60 {
    -webkit-animation-delay: 30s;
      -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
          -o-animation-delay: 30s;
}
.delay80 {
    -webkit-animation-delay: 40s;
      -moz-animation-delay: 40s;
        -ms-animation-delay: 40s;
          -o-animation-delay: 40s;
}

My attempt to get it to start over again does not work though. When I add 'infinite', it simply keeps fading in the whole time. How can I loop it from the beginning again? Or maybe add a button to start it over or something like that?
The administrator has disabled public write access.

Help with text slider 8 years 10 months ago #389

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

Thanks a lot for using Animate it!

i have tested your code, and came to the following solution:

1. Use DIVs instead of Shortcodes while adding custom delays. You can generate the desired animation classes from here:
http://www.downloads.eleopard.in/class-generator
2. I have added some extra CSS and a wrapper DIV to make all the slides appear in one place (right now they are appearing one below the other)

You can see this code live in action here:
http://animateit-joomla.cloudaccess.host/index.php/bjoern-s-test

Your modified HTML code:
<div class="my-awesome-slideshow">
	<div class=" animated fadeOutLeft delay20 duration2">
		<div class=" animated fadeInRight delay2 duration2">
			<div class="slideshow-wrapper">
				<div class="item">
					<div class="container">
						<div class="row-fluid">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
								<div class="slider-title">
									<h1 class="sp-smart-title">Make a Difference</h1>
									<p class="sp-smart-posttitle">Help those in need</p>
								</div>
								<div class="slider-text">A serious and committed volunteer can contribute an incredible number of positive things to the projects and communities they work in.</div>
									<div class="slider-button"><a class="btn btn-primary btn-large appico-content-more" href="#">Start Here</a></div>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
				</div>
			</div>
		</div>
	</div>

	<div class=" animated fadeOutLeft delay40 duration2">
		<div class=" animated fadeInRight delay20 duration2">
			<div class="item">
				<div class="container">
					<div class="row-fluid">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
							<div class="slider-title">
								<h1 class="sp-smart-title">Get Life Experience</h1>
								<p class="sp-smart-posttitle">Do new and exciting things</p>
							</div>
							<div class="slider-text">Besides various altruistic or self-improvement reasons for volunteering, it’s a fantastic way for people on a budget to see exotic countries and truly become immersed in the culture and environment.</div>
							<div class="slider-button"><a class="btn btn-primary btn-large appico-content-more" href="#">Your Journey Starts Here</a></div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>

	<div class=" animated fadeOutLeft delay60 duration2">
		<div class=" animated fadeInRight delay40 duration2">
			<div class="item">
				<div class="container">
					<div class="row-fluid">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
							<div class="slider-title">
								<h1 class="sp-smart-title">Visit Exotic Places</h1>
								<p class="sp-smart-posttitle">While helping people in need!</p>
							</div>
							<div class="slider-text">Instead of staying in overpriced hotels and spending your hard-earned money visiting all the bright-and-shiny tourist traps, volunteers get to know the real people of the country and their real lives, and channel money and other resources to the people who need them most.</div>
							<div class="slider-button"><a class="btn btn-primary btn-large appico-content-more" href="#">Start Here, Now!</a></div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>

	<div class=" animated fadeOutLeft delay80 duration2">
		<div class=" animated fadeInRight delay60 duration2">
			<div class="item">
				<div class="container">
					<div class="row-fluid">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
							<div class="slider-title">
								<h1 class="sp-smart-title">Learn New Cultures</h1>
								<p class="sp-smart-posttitle">Experience new things</p>
							</div>
							<div class="slider-text">You also get to stay with like-minded people from all over the world who share your views on life, not to mention local people and experienced volunteers who really know the city or town you are in.</div>
							<div class="slider-button"><a class="btn btn-primary btn-large appico-content-more" href="#">Take Me There!</a></div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
</div>

New CSS rules to be added:
.my-awesome-slideshow{
	position: relative;
	min-height: 220px;
}

.my-awesome-slideshow .animated{
	position: absolute;
	top: 0;
	left: 0;
}

About repeating Slide1, I am afraid but it won't be currently possible to bring back the first slide after the last slide is passed.
If we do that, the delay won't work.

Please feel free to let me know if you have any other queries.
if you find the plugin useful, please take some time to provide a good review :)
http://extensions.joomla.org/extension/animate-it
The administrator has disabled public write access.
The following user(s) said Thank You: Björn

Help with text slider 8 years 10 months ago #390

  • Björn
  • Björn's Avatar
  • Offline
  • New Member
  • Posts: 10
  • Thank you received: 3
  • Karma: -2
Hi, thanks for getting back to me. I have made some slight changes again since that last post. I think I have it working quite nicely here, khaya.blackalsatian.co.za

Just a pity I can't get it to run again.

Thanks for a great plugin. This is really handy. I searched all over for a slider that will allow me to only have text instead of images, etc and I think I can use your plugin in many other places too now that I know about it! Will definitely give you a review.
The administrator has disabled public write access.
The following user(s) said Thank You: eLEOPARD

Help with text slider 8 years 10 months ago #391

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Yup. Looking nice!
I was about to suggest to leave the last slide in, so that the slider stops after it's finished. But I see that you have already done that.

By the way, good job on the website as well. It's a treat to look at :)
The administrator has disabled public write access.
Forum
Animate It!
Questions
Help with text slider
Time to create page: 0.232 seconds

Need Customization? Feel free to...

Contact Us

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