Carousel avec du texte seulement

Résolu
iamlouky Messages postés 29 Statut Membre -  
jordane45 Messages postés 30427 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

  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    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