Scroll Schatten mit jQuery

geschrieben von Felix Beuster am 11.12.2012

Dein 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>

< Zurück zu HTML5 jQuery CSS3 < Zurück zu HTML5 jQuery CSS3

Kommentare

Bisher keine Kommentare.

Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.

< Zurück zu HTML5 jQuery CSS3

Ein parr mehr Artikel

Besserer Ton in Videos - Meine Vorgehensweise

Hier klicken, um das Video zu sehen.Wie kann man den Ton in seinen Videos verbessern? In diesem Video erkläre ich in 3 Tipps meine Vorgehensweise für einen besseren Klang. Hier...

Google AdSense Zeitzone ändern - Sinnvoll und wie geht es?

Ein tagesaktueller Überblick über die Anzeigenimpressionen und Werbeklicks in Google AdSense kann Gold wert sein. Lange Zeit war es aber so, dass die täglichen Berichte immer um 9 Uhr morgens...

Ich putz hier nur

Man könnte meinen, hier tut sich nichts mehr, immerhin ist der letzte Artikel doch schon einen Monat her. Aber nein, weder ich noch der Blog ist tot. Ich zeige euch mal kurz, was gerade so los ist. Thema ganz oben auf der Agenda sind derzeit die...

Rückblick 2016 - Ziele 2017 - Briefe von Felix

Da ist er wieder, der Jahresanfang, jene Zeit des Jahres, in dem man einen Blick auf das vergangene und einen in die Zukunft wirft, genau so, wie ich es auch 2015...

< Zurück zu HTML5 jQuery CSS3