Carousel avec du texte seulement

Résolu/Fermé
iamlouky Messages postés 15 Date d'inscription mardi 26 décembre 2017 Statut Membre Dernière intervention 23 janvier 2024 - 24 mars 2018 à 07:31
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 24 mars 2018 à 11:59
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
24 mars 2018 à 11:59
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