Carousel avec du texte seulement
Résolu/Fermé
iamlouky
Messages postés
14
Date d'inscription
mardi 26 décembre 2017
Statut
Membre
Dernière intervention
22 avril 2018
-
24 mars 2018 à 07:31
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 24 mars 2018 à 11:59
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 24 mars 2018 à 11:59
A voir également:
- Carousel avec du texte seulement
- Dans le texte, un seul mot a réellement été écrit en lettres capitales (majuscules). quel est ce mot ? ✓ - Forum Word
- Formule excel si contient texte alors texte ✓ - Forum Excel
- Mettre un texte en majuscule - Guide
- Recherchev texte ✓ - Forum Excel
- Transcription audio en texte - Guide
1 réponse
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
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