Je cherche un moyen à partir d'un menu de navigation pouvoir faire scroller ma page automatiquement en fonction de mon choix. EX: http://cogpowered.com/
Est-ce realisable en full CSS ou faut il integrer un script JS ? Si vous pouviez m'aiguillez, merci !
nop, la c'est javascript (natif ou via jQuery par exemple) qu'il te faut
Une transition/animation, imposera de donner des hauteurs et ou largeurs aux element pour s'y déplacer en modifiant de valeurs de positionnement ou de marges.
Regarde du coté des slider CSS éventuellement pour y piocher des idées de conception CSS.
tout en css: http://www.creativejuiz.fr/trytotry/css3-parallax/ ; donc aucun js de nécessaire. ça ne marche évidemment pas sous IE; mais sous IE cela reviens a de simple ancre, le passage est plus brutale mais cela marche toujours.
#slide1, #slide2, #slide3 {
/* height à adapter avec media queries */
height: 1000px;
padding-top:100px;
/* préparation des transitions */
transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
}
Cependant j'ai qqls soucis avec les selecteurs et le fonctionnement des transitions. Si vous pouviez m'expliquez brievement, merci !
Oui c'est cela, si tu veux j'ai fais une adaptation ici casper-development.be / repair / (ps j'ai volontairement cassé le lien, faut enlevé les espaces au copié/coller )
Voici mon HTML(auquel j'ai retiré volontairement le contenu pour une question de clarté)
<body>
<header>
<div class="head">
<p><img></p>
<nav>
<ul>
<li><a href="#">OPT0</a></li>
<li><a href="#">OPT1</a></li>
<li><a href="#">OPT2</li>
<li><a href="#">OPT3</li>
</ul>
</nav>
<p ><img /></p>
</div>
</header>
<div class="container">
<div class="bg1">
<div class="slide1">
<p><img /></a></p>
<section>
<h1>LOREM IPSUM</h1>
<h2>Titre</h2>
<p><img src="log.png" alt="logo"/></p>
</section>
</div>
</div>
<div class="bg2">
<div class="slide2">
<h1><img/>LOREM IPSUM <img/></h1>
<p id="quote">''Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.''</p>
<section>
<article>
<p><img/></p>
<h2>Class aptent taciti sociosque</h2>
<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
</article>
<article>
<p ><img /></p>
<h2>Aenean sollicitudin, lorem quis</h2>
<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
</article>
<article>
<p ><img /></p>
<h2>Duis sed odio puis sed</h2>
<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
</article>
</section>
</div>
</div>
<div class="bg3">
<div class="slide3">
<h1><img />LOREM IPSUM<img/></h1>
<p><img/></p>
</div>
</div>
</div>
<footer>
<div class="foot">
<p></p>
<p><img /></p>
</div>
</footer>
<body>
Pour resumer j'ai mon menu de navigation et trois grande partie avec chacune leur background et leur contenu
Mon idée et donc, à travers le menu de me rendre sur tel ou tel partie a travers une ancre avec une transition (je ne veux pas etre envoyer brutalement a l'ancre)
Merci !
PS: mes slides ne font pas forcement tous la même taille et j'aimerai avoir la possibilité de scroller normalement aussi
Tres bien , je vais étudier ce code PAr contre je me pose toujours une question. Pourquoi n'est-ce pas possiblede mettre des liens vers des ancre et appliquer une transition simplement
Tres bien , je vais étudier ce code PAr contre je me pose toujours une question. Pourquoi n'est-ce pas possiblede mettre des liens vers des ancre et appliquer une transition simplement
Merci
Parce que les styles ne gerent que la mise en forme. Via CSS tu devras t'appuyer sur des valeurs arbitraire entre les quelles tu peut basculer. Une transition CSS peut-etre alors faites entre ces deux valeurs.
Pour effectuer ce genre de transition dans un document fluide, il te faut un javascript qui va 'écouter' et récolter le infos essentiels (comme la distance de tel id par rapport au haut de la page, la position du scroll a un moment T , le declenchement d'un evenement sur un click , ...) et lancer une fonction avec ces infos(parametre) pour recalculer , par exemple , la position du scroll dans ta page.
Appliquer une transition c'est bien mais entre quoi et quoi et à quel moment? Le CSS ne peut déterminer quand un évènement se produit et ne peut "calculer" des positions.
Il faut donc passer par un langage qui le permet: javascript.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui