css: body { height: 2000px; background-image: linear-gradient(black, silver, black, silver, black, silver, black, silver, black); } #reklama { position: relative; margin: auto; padding: 10px; font-size: 18px; background: rgb(255,255,255); width: 140px; height: 240px; border-radius: 6px; box-shadow: 2px 2px 4px 2px black; }
script: $(document).ready(function(){ $(function () { $(window).scroll(function () { var scroll = $(window).scrollTop(); if ( 100 < scroll ) { $('#reklama').stop().animate({ "top" : + scroll +100 }, 1400, 'linear'); } else if (scroll < 100 ) { $('#reklama').stop().animate({ "top" : "100" }, 1400, 'linear'); } }); }); });
Nezapomenout napojit knihovnu jQuery.
98.
UkĂĄzka elektronickĂŠ knihy, UID: KOS225509
Příklad použití:
27. Jedná se o celý pravý panel s kontakty, který bude vždy viditelný, pokud máte vhodnou velikost obrazovky. K vidění na servispc.cz/opravy_pc.html
Animované menu Další zajímavou vychytávkou může být už zmíněné fixní menu, pokud je necháte i animovat. Takové menu však zatím není vhodné pro eshopy a možná ani jiné bankovní portály. Jak již bylo řečeno, může být rušivé, ale pro značné procento lidí bude určitě dalším vítaným zpestřením. Převážně při návštěvě běžných informačních webových stránek. html: <!doctype html> <html lang="cs"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/script.js"></script> </head> <body> <div id="menu"> <a href="#">Úvod</a> <a href="#">Strana</a> <a href="#">Strana</a> <a href="#">Strana</a> <a href="#">Kontakt</a> </div> <div id="obsah"> <h1>Nadpis</h1> <p> … text … </p>
99.
Ukázka elektronické knihy, UID: KOS225509
<div> </body> </html>
css: html, body { margin: 0; padding: 0; font-size: 20px; font-family: arial; } #menu { position: absolute; top: 0; background: rgb(50,50,50); background: rgba(50,50,50,0.8); width: 100%; min-height: 30px; padding: 14px 0; text-align: center; box-shadow: 0px 0px 4px 2px black; } #menu a { margin: 10px; color: black; background: grey; background: linear-gradient(#fff, grey); border-radius: 6px; box-shadow: 1px 1px 0 black; padding: 3px 12px; text-decoration: none; } #obsah { margin: 70px auto; padding: 10px; width: 600px; }
script: $(document).ready(function(){ $(function () { $(window).scroll(function () { var scroll = $(window).scrollTop(); if ( 50 < scroll ) { $('#menu').stop().animate({ "top" : + scroll -1 }, 200, 'linear'); } else if (scroll < 45 ) { $('#menu').stop().animate({ "top" : "0" }, 200, 'linear'); } }); }); });
Jen nezapomínat napojit knihovnu javascriptu jQuery.
100.
Ukázka elektronické knihy, UID: KOS225509