Menü
Home
CSS einbinden
Bilder/CSS/JavaScript auf den Sever laden
Objekt-ID
Quelltext einfügen
CSS im Text-Editor
Test
Container-Hintergrund
Startseite2
StartseiteTest
code
Test-MatchMedia
Font Awesome
Material Icons
test22
Animate-CSS
Bildwechsel
Button-Grafik
Schriftgröße
hover
blur
test33
Grid System
Grid 2 Spalten C6
Grid 3 Spalten C4
Grid 4 Spalten C3
Text
speed2
nur diesen Artikel ansprechen
AniHead
Seitennavi 1
Lightbox2
Header Rund
Arrows
Full Page Fenster 1
Konfi
Modal
test
Full Page Fenster 2
menu
nobi
3D-Text
pagepeel test
Umleitung
Umleitung1
Shining Text Animation
Informationen CSS und Script Zeta Producer
Hover
Border
Transform
Opacity
Kombiniert
Hover Bild&Text
Zirkel
Social Media
social 1
social 2
social 3
social 4
social 5
social 6
social 7
FB-PagePlugin
2 Klick Social
Menu
CSS-Filter
Hover 14
Hover 04/16
Hover04/16-2
Hover04/16-3
Hover04/16-3-B
Hover04/16-4
Hover09-16-1
Hover09-16-2
Vinyl
Pagepeel
Pagepeel Bottom
Hover03/17
Hover03/17-1
Hover03/17-2
Hover03/17-3
test
Hover07/17
Hover07/17-2
Hover07/17-2
CSS-Fenster
CSS-Fenster nach dem laden
CSS-Fenster nach dem laden 2
Externe Seite Fancybox
Externe Seite Fancybox-test
CSS-Fenster LINK
Test
CSS-Fenster einfliegen
CSS-Fenster bem laden
CSS-Fenster ab Position
Hinweisleiste am Bildschirmrand
Youtube in Lightbox1
Slide Out
Info Fenster
Menü
Menü ab Position
Menü ab Position links
Menü-Button Position Hover
Slide-Menü am Browserende
Full Page Menu
Mehr
Text
Text über Bild
Text Hover
Textbox
Textbox1
Textbox2
Text & Schatten
Bilder frei positionieren
Smooth Scroll
Video Responsive
Hintergrund Responsive
Hintergrund wechseln
iFrame Responsive
Externer Header
Header Video
ray
ray3
ray4
ray5
ray6
ray2
Hintergrund Video
Video Header Hintergrund
schwebende Bilder
Artikel mit Hintergrundbild
Tooltip
Tooltip Responsive
ImageMap Responsive
Nach Oben scrollen V2
OnePage
Accordion
Accordion reines CSS
Accordion Single
Accordion Multiple
OnePage2
Pfeile
Pfeile2
Translate Flag
Translate Select
Bild-Lupe
Bild-Zoom
Flexisel
Box Sortierbar
Linkbox
Snow
Charts
Chart-Diagramm1
Chart-Diagramm-Rund1
Chart-Prozent-Rund1
Chart-Prozent-Rund2
Counter animiert
Shop Warenkorb Icon
Scroll-Hinweis Tabellarische Daten
Layout
Bilder-Hover
Producer Responsive
Poster Responsive
Button
Externe Inhalte im Header
Externe Inhalte im Header2
Slider als Header
Weiter scrollen unter Header
Weiter scrollen im Header
Container 100% höhe
Slider 100% Höhe
Parallax
Logo skalieren
Button-Icon
Button-Icon V2
Parallax einzelner Container
Scroll Animation
Scroll Animation 2
Animierter Header
LogoTrans
Resize Menu on Scroll
Header Animation 1
Header Animation 2
Header Animation 3
Header Animation 4
Preisboxen
Seitenfenster
Fixed Footer
full width footer
Button Logobereich
Topbar
Headerbild
Headerbild 1
Headerbild 2
Headerbild 3
Headerbild 4
Headerbild 5
Headerbild 6
Vorlagen
Youtube in Lightbox
Externe Seite in Fancybox
Container mit Hintergrund
OnePage
Widgets
Logo beim scrollen skalieren
Wir haben hier ein Logo in die Seite eingebunden welches scrollen verkleinert wird.
Zuerst blendet ihr das originale Logo im Zeta Producer aus.
Anschließend ladet ihr euer Logo wie
HIER
beschrieben auf den Server.
Nun fügt ihr den untenstehenden Code in eure Seite ein und passt ihn entsprechend an.
CSS-Code
Diesen Code per Einstellungen > CSS einfügen und anpassen.
<style> .zp-logo-block { position: fixed; top: 0px; z-index: 6100; transition: top 0.2s ease 0s; } a#zp-logo { display: block; height: 74px; width: 80px; margin: 0 auto; background: rgba(0, 0, 0, 0) url("https://www.zella.de/code/bilder/logoscal2.png") no-repeat scroll 50% 0 !important; transition: all 0.3s ease 0s; } </style>
Quellcode markieren & kopieren
Quelltext
Diesen Code per Widget > Quelltext einfügen und anpassen.
<div class="zp-logo-block"> <a id="zp-logo" href="https://www.zella.de/code/"></a> </div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>=50){ jQuery('#zp-logo').attr('style','background-size:60% !important;'); jQuery('.zp-logo-block').attr('style','top:0px;'); } else if (jQuery(this).scrollTop()<50) { jQuery('#zp-logo').attr('style','background-size:100% !important') jQuery('.zp-logo-block').attr('style','top:50;'); } }) }) </script>
Quellcode markieren & kopieren
code