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 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 - 24 mars 2018 à 11:59
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 - 24 mars 2018 à 11:59
A voir également:
- Carousel avec du texte seulement
- Excel cellule couleur si condition texte - Guide
- Transcription audio en texte word gratuit - Guide
- Mettre un texte en majuscule - Guide
- Texte argumentatif sur les avantages et les inconvénients du téléphone portable ✓ - Forum Mobile
- Texte barré whatsapp - Guide
1 réponse
jordane45
Messages postés
38389
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 janvier 2025
4 729
24 mars 2018 à 11:59
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é :
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