Scroll Schatten mit jQuery
geschrieben von Felix Beuster amDein Browser ist zu klein für den eingebetteten Player. Du kannst das Video hier auf YouTube ansehen.
Mit jQuery und CSS3 lassen sich durchaus einige Effekte relaisieren. Wie ihr einen Schatten unter z.B. einer Titelfläche animiert, und dabei noch das Scrollen mit der Maus beachtet, seht ihr im Video.
1<!DOCTYPE html>2<html>3 <head>4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">5 <title>Scroll-Schatten</title>6 <style>7 html, body {8 height: 100%;9 margin: 0;10 padding: 0 10px;11 background: #efefef;12 font-family: Calibri, Arial, Tahoma, sans-serif;}13 .titlebar {14 position: fixed;15 top: 0;16 left: 0;17 width: 100%;18 height: 34px;19 border-bottom: 1px solid #444444;20 background: #1d83e2;21 color: #ffffff;}22 .titlebar h1 {23 clear: both;24 margin: 2px 15px;25 font-size: 25px;26 color: #ffffff;}27 .content {28 max-width: 960px;29 min-height: 100%;30 box-sizing: content-box;31 padding: 40px 19px 0 19px;32 border-left: 1px solid #aaaaaa;33 border-right: 1px solid #aaaaaa;34 background: #f9f9f9;}35 br.clear {36 display:block;37 height:1px;38 margin:-1px 0 0 0;}39 #sprung:before {40 content:"";41 display:block;42 height:50px;43 margin:-30px 0 0;}44 45 .titlebar.scrollShadow {46 box-shadow: 0 0 10px #444444;}47 </style>48 <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>49 <script type="text/javascript">50 $(document).ready(function(){51 if($(document).scrollTop() == 0) {52 $('.titlebar').removeClass('scrollShadow');53 } else {54 $('.titlebar').addClass('scrollShadow');55 }56 $(document).scroll(function(){57 if($(document).scrollTop() == 0) {58 $('.titlebar').removeClass('scrollShadow');59 } else {60 $('.titlebar').addClass('scrollShadow');61 }62 });63 });64 </script>65 </head>66 <body>67 <div class="titlebar">68 <h1>Scroll-Schatten</h1>69 </div>70 <div class="content">71 <p>72 <a href="#sprung">Spring!</a><br>73 Lorem ipsum ...74 </p>75 <p>...</p>76 <h2 id="sprung">Sprungwert</h2>77 <p>78 Lorem ipsum ...79 </p>80 <p>...</p>81 <br class="clear">82 </div>83 </body>84</html>Ein parr mehr Artikel
Kommentare
Bisher keine Kommentare.Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.