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 -
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
Merci de m'aider
A voir également:
- Carousel avec du texte seulement
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Corinne copie un texte sur le web et le colle dans un document avec l'option "texte non formaté" (aussi appelée "texte sans mise en forme"). qu'est-ce qui est conservé ? - Forum Bureautique
1 réponse
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é :
Pour le HTML
Et pour le CSS .. il te faut récupérer ce qu'il te faut dedans :
https://www.pcloud.com/ZA9/css/home.css
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