28172 sujets

CSS et mise en forme, CSS3

Changement du Background au défilement de la page.

Bonjour,
sur une page j'ai une image de fond fixe en bas a droite.
J’aimerai que lorsque je fait défilé ma page, lorsque j'arrive a un titre changer le background qui est en fond.
Savez-vous si c'est possible ?
J'ai regardé du coté du parallaxe mais sa n'a pas l'air de correspondre a se que je souhaite.
Merci de votre aide.

<div  style="background: url('monfond1.jpg') no-repeat bottom right fixed;">
<h1>titre</h1> --> monfond1.jpg
<p>.....<p>
<p>.....<p>
....
<h2>titre</h2> --> monfond2.jpg
<p>.....<p>
<p>.....<p>
....
<h3>titre</h3> --> monfond3.jpg
<p>.....<p>
<p>.....<p>
....
<h4>titre</h4> --> monfond4.jpg
<p>.....<p>
<p>.....<p>
....
</div>

Modifié par fabrice88 (12 Jul 2019 - 09:04)
Merci mais sa ne correspond pas car je souhaiterais que le background soit des images qui changent et pas une couleur.
Bonjour, je reviens vers vous pour savoir si qq aurait une idée de comment faire car je n'a toujours pas de solution à mon problème.
Merci de votre retour.
Salut

En JQUERY/JAVASCRIPT c'est possible, d'ailleurs tu n'a pas trop le choix Smiley smile

en gros

en gros sur l'évenement scroll tu test si l'element titre est visible si oui tu change le background.

$(window).scroll(function(){
    if( $("TITRE 1").is(":visible") ) {
        $('DIV 1').css( "background-image", "MA NOUVELLE IMAGE"  );
    }
    if( $("TITRE 2").is(":visible") ) {
        $('DIV 2").css( "background-image", "MA NOUVELLE IMAGE"  );
    }
//etc...
});
Merci pour cette piste JANCAL.
j'essai de mettre en place mais je n'ai aucun de mes fonds qui s'affichent... je dois mal m'y prendre...

<!DOCTYPE html>
<html lang="fr" >

<head>
    <meta charset="UTF-8">
    <title>TESTDF</title>
    <meta name="description" content="">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function()){
    if( $("titre1").is(":visible") ) {
        $('backimg').css( "background-image", "monfond1.jpg"  );
    }
    if( $("titre2").is(":visible") ) {
        $('backimg').css( "background-image", "monfond2.jpg"  );
    }
    if( $("titre3").is(":visible") ) {
        $('backimg').css( "background-image", "monfond3.jpg"  );
    }
    if( $("titre4").is(":visible") ) {
        $('backimg').css( "background-image", "monfond4.jpg"  );
    }
}); 

</script>


<style type="text/css">
<!--
h2 {color: #99CC00}
-->
</style>
</head>

<body>
<div id="backimg" >

<h2 id='titre1'>Lorem ipsum</h2> --> monfond1.jpg
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. <span class="Style1">Duis in gravida</span> quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>

<h2 id='titre2'>Lorem ipsum</h2> --> monfond2.jpg
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>

<h2 id='titre3'>Lorem ipsum</h2> --> monfond3.jpg
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>

<h2 id='titre4'>Lorem ipsum</h2> --> monfond4.jpg
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc   massa, lobortis non rhoncus a, imperdiet nec magna. Sed enim libero,   sagittis in dignissim eu, molestie eget massa. Integer vulputate lacinia   elit nec interdum. Nullam vulputate pharetra ex ac viverra. Donec eros   arcu, venenatis at malesuada eu, mollis ut enim. Nullam a rhoncus neque,   in porttitor lorem. Cras nec orci sed nisl molestie sollicitudin.   Suspendisse placerat vel ipsum nec mollis. Sed non posuere erat. Donec   tincidunt nisi felis, quis venenatis velit auctor at. Curabitur eleifend   accumsan est quis convallis. Duis in gravida quam, vel porttitor nibh.   Integer non leo facilisis, bibendum nisi vel, sagittis enim. Aliquam   nulla felis, scelerisque in mi malesuada, lobortis tincidunt velit.  
<p> Cras ante neque, dictum sit amet turpis in, malesuada ultrices enim.   Duis mollis ligula non elit blandit mollis. Quisque rutrum rutrum metus   sed tincidunt. Praesent sed mi in nulla consequat pretium venenatis vel   neque. Ut et eros nec urna viverra accumsan. Vivamus tincidunt sem nunc,   vel pellentesque quam commodo ac. Vestibulum rutrum efficitur laoreet.   Duis tincidunt vitae sem eu tristique. </p>
</div>
</body>
</html>
Bonjour,
je stagne sur cette animation des background. Savez vous si il existe un autre moyen car je n'arrive pas à faire fonctionner.
Sujet clos
Aller à