Carousel avec du texte seulement

Résolu
iamlouky Messages postés 15 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour, je sais déjà fait un carousel mais j'aimerais juste avec du texte comme sur le site suivant https://www.pcloud.com//eu . Comment faire pour que dans une phrase, qu'il y ait des mots qui défilent?

Merci de m'aider

1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,
Il te suffit de regarder le code source du site que tu nous montres pour en récupérer le code html / javascript / css utile à ce que tu souhaites faire.

Pour le Javascript, par exemple, il a utilisé :
<script>
	$(function() {
		login_callback = function() {
			window.location = myPcloudURL;
		};

		function homePageJS() {
			if (!detectedMobile) {
				var transitionEnd = animationEndEvent();
				var wordAnimationTime = 2500;
				var wordsWrap = $('.animated-h1 .files');

				function animateH1() {
					var current = wordsWrap.find('.active');
					var next = current.next().length ? current.next() : wordsWrap.find('span').first();

					current.off(transitionEnd).addClass('slide-right').on(transitionEnd, function() {
						current.removeClass('active slide-right');
					});

					wordsWrap.css({'width': next.outerWidth()});

					next.off(transitionEnd).addClass('active slide-left').on(transitionEnd, function() {
						next.removeClass('slide-left');

						setTimeout(function() {
							animateH1();
						}, wordAnimationTime);
					});
				};

				wordsWrap.css({'width': wordsWrap.find('.active').outerWidth()}).addClass('animated').removeClass('min-width');

				setTimeout(function() {
					animateH1();
				}, wordAnimationTime);

				insertForm('register', $('.form_holder'), false, false);
			} else {
				var imageTarget;
				var imageSource;
				var shortOS = detectOS(false, true);

				function resizeSection() {
					var sectionTwoWidth = ($(window).width() - 45) - $('.section.top .box_holder.bottom img').outerWidth();

					$('.section.top .box_holder.bottom .txt, .section.top .box_holder.bottom .headline').css({'max-width': sectionTwoWidth});
				};

				resizeSection();

				if (shortOS == 'ios') {
					imageTarget = $('.app_box .for_ios img');
					imageSource = 'images/p_mob/appstore_badge.png';
				} else if (shortOS == 'windows phone') {
					imageTarget = $('.app_box .for_windowsphone img');
					imageSource = 'images/p_mob/microsoft_badge.png';
				} else {
					imageTarget = $('.app_box .for_android.g_badge img');
					imageSource = 'images/p_mob/googleplay_badge.png';
				}

				imageTarget.on('load', function() {
					imageTarget.off('load');

					if (shortOS == 'android') {
						$('.apk_badge img').on('load', function() {
							var badgeWidth = $('.g_badge img').outerWidth() + $('.apk_badge img').outerWidth() + 10;
							var leftMargin = $('.app_box').width() - badgeWidth;

							setTimeout(function() {
								$('.app_box .g_badge').css({'margin-left': leftMargin / 2});
							}, 1);

							$('.app_box .for_android').addClass('animate_show');

						}).attr('src', 'images/p_mob/apk_badge.png');
					} else {
						imageTarget.parent().addClass('animate_show');
					}
				}).attr('src', imageSource);

				onResizeFunctions['section_resize'] = function() {
					resizeSection();
				};
			}
		};

		homePageJS();
	});


Pour le HTML
<h1 class="animated-h1 for_desktop">
Tous vos 
<div class="files min-width">
<span  class="active">Photos</span>
<span>Documents</span>
<span>musique</span>
</div> avec <br> vous, où que vous alliez !						
</h1>
						



Et pour le CSS .. il te faut récupérer ce qu'il te faut dedans :
https://www.pcloud.com/ZA9/css/home.css
0