Sortir du texte
Bonjour,
Je vous explique mon probleme, voila je suis entrain de faire un site internet (www.societesbartolo.com) le probleme est le suivant: en haut de ce site il y a un bandeau avec du texte qui defile a l'interieur jaimerai que le texte defile a l'interieur puis qui continu a ce defiler a l'exterieur du bandeau et qui sort de l'ecran?
Merci pour ce qui vont m'aidez :)
Je vous explique mon probleme, voila je suis entrain de faire un site internet (www.societesbartolo.com) le probleme est le suivant: en haut de ce site il y a un bandeau avec du texte qui defile a l'interieur jaimerai que le texte defile a l'interieur puis qui continu a ce defiler a l'exterieur du bandeau et qui sort de l'ecran?
Merci pour ce qui vont m'aidez :)
4 réponses
-
j'ai oublier de dire que j'aimerai le faire ou avec du CSS ou avec JQUERY merci
-
Comme ça jverrais bien faire défiler ton texte dans une div très large, et mettre ton fond (bandeau) sur une autre div (en dessous).
Sinon je sais pas, ptetre regarder au niveau des overflow ?
-
j'essai justement d'agrandir mon div mais j'arrive pas j'ai essayé avec width marche toujours pas. Je l'aurai bien fait à ma maniere mais c'est pour un client est il veut que l'affichage soit comme ça
Pour le overflow j'ai deja essayé sa donne rien -
Mon code sa done sa
HTML
<div id="words-banner2">
<div class="word1 first-word" style="left:0px">Construction</div>
<div class="word2" style="left:262px">Rénovation</div>
<div class="word3" style="left:492px">Location</div>
<div class="word4" style="left:668px">Achat</div>
<div class="word5" style="left:788px">Vente</div>
</div>
CSS
.word1{ font-size: 46px; }
.word2{ font-size: 40px; }
.word3{ font-size: 34px; }
.word4{ font-size: 28px; }
.word5{ font-size: 22px; }
#words-banner2 { color: #FFF;margin: 0;position:relative;overflow:hidden;height:82px;}
#words-banner2 div {position:absolute;bottom:10px}
JAVASCRIPT
var banner = {
speed:750, timeoutdelay: 100,
padding: 0, elements: new Array(), selector: '#words-banner2'
};
banner.getPadding = function () {
// Animate items
banner.elements = $(banner.selector).children();
var totalWidth = 0;
banner.elements.each(function () {
totalWidth += parseInt($(this).outerWidth());
});
banner.padding = (900 - totalWidth) / (banner.elements.size() + 1);
}
banner.handle = function (init) {
banner.getPadding();
var currentLeft = banner.padding;
banner.elements.each(function (index) {
if (init) {
$(this).css('left', currentLeft).css('opacity', (1 - (index / parseInt(banner.elements.size()))));
/*} else if (index == 0) {
$(this).animate({'opacity': 0}, banner.speed, function () {
newElement = $('<div>' + $(this).html() + '</div>');
$(this).remove();
newElement.css('opacity', 0);
newElement.appendTo($(banner.selector));
newElement.css('fontSize', '22px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px');
newElement.animate({'opacity': 1}, banner.speed);
});*/
} else {
$(this).animate({'left': currentLeft, 'fontSize': '+=6px', 'opacity': (1 - (index / parseInt(banner.elements.size())))}, banner.speed, function () {
// Strip the ' / ' chars
//$(this).children('span').hide();
});
//console.log($(this).html() + ': opacity=' + (index / parseInt(banner.elements.size())));
}
if (index == 0) {
// Add 'first-word' CSS class to the first element
$(this).addClass('first-word');
// Strip the ' / ' chars
//$(this).children('span').hide();
//$(this).html($(this).html().substr(2));
}
currentLeft += $(this).outerWidth() + banner.padding;
});
// Set run timeout
if (!init) {
window.setTimeout('banner.start()', banner.timeoutdelay);
}
}
banner.startAnimation = function() {
// Init items
banner.handle(true);
// Set start timeout
window.setTimeout('banner.start()', banner.timeoutdelay)
}
banner.start = function () {
//console.log('start');
$(banner.selector + ' div.first-word').animate({'opacity': 0}, banner.speed, function () {
newElement = $('<div>' + $(this).html() + '</div>');
$(this).remove();
newElement.css('opacity', 0);
newElement.appendTo($(banner.selector));
newElement.css('fontSize', '16px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px');
newElement.addClass('word5');
// add " / " chars to the new element
//newElement.html(' / ' + newElement.html());
// Animate other elements
banner.handle();
});
}
