commit 581ac57d1b0ab083ed614f70e368da2cdc6e5210
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2016-06-03T16:09:28Z |
|---|
| subject | Changed the background |
|---|
commit 581ac57d1b0ab083ed614f70e368da2cdc6e5210
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2016-06-03T16:09:28Z
Changed the background
---
botanjs/src/Astro/Blog/Layout/MainFrame.css | 17 ++++++++++++++++
botanjs/src/Astro/Blog/Layout/MainFrame.js | 24 ++++++++++++++++------
botanjs/src/Astro/Starfall/Element/Header.css | 29 +--------------------------
3 files changed, 36 insertions(+), 34 deletions(-)
diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.css b/botanjs/src/Astro/Blog/Layout/MainFrame.css
index 1d6b6e7..9f00137 100644
--- a/botanjs/src/Astro/Blog/Layout/MainFrame.css
+++ b/botanjs/src/Astro/Blog/Layout/MainFrame.css
@@ -37,3 +37,20 @@ div#header, div#mbody, div#contact, div#horizon {
}
.cw { animation-name: spin; }
+
+.mbody {
+ padding: 0 0.25em;
+ background-color: rgba( 255, 255, 255, 0.5 );
+}
+
+#menu {
+ padding: 0 0.5em;
+ background-color: rgba( 255, 255, 255, 0.5 );
+}
+
+.begin-wrapper {
+ background-image: url(/assets/layout-images/home.png);
+ background-position: 50% 0%;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js
index 35da26d..33c1881 100644
--- a/botanjs/src/Astro/Blog/Layout/MainFrame.js
+++ b/botanjs/src/Astro/Blog/Layout/MainFrame.js
@@ -208,15 +208,16 @@
, cCloudSymbol = ["\u25CF", "\u25CF", "\u25CF", "\u25CB", "\u25CB"]
, cCloudSymbol2 = ["\u25CC" ]
- , colors = ["FF1D25", "662D91", "3FA9F5", "7AC943", "FF7BAC", "603813", "FF931E"]
+ // , colors = ["FF1D25", "662D91", "3FA9F5", "7AC943", "FF7BAC", "603813", "FF931E"]
+ , colors = ["FF1D25", "662D91", "7AC943", "FF7BAC", "603813", "FF931E"]
, i = new Date().getDay()
- , cCloud_1 = CharacterCloud.create( cCloudSymbol2, null, 10, cloudRange_1 )
+ , cCloud_1 = CharacterCloud.create( cCloudSymbol2, "spin", 5, cloudRange_1 )
, cCloud_2a = CharacterCloud.create( cCloudSymbol, null, 10, cloudRange_2a )
, cCloud_2b = CharacterCloud.create( cCloudSymbol, null, 20, cloudRange_2b, 10 )
- , cCloud_2c = CharacterCloud.create( cCloudSymbol, null, 40, cloudRange_2c, 5 )
- , cCloud_3 = CharacterCloud.create( cCloudSymbol2, "spin", 0, cloudRange_3 )
- , cCloud_4 = CharacterCloud.create( cCloudSymbol2, "spin cw", 0, cloudRange_4 );
+ , cCloud_2c = CharacterCloud.create( cCloudSymbol, null, 30, cloudRange_2c, 5 )
+ , cCloud_3 = CharacterCloud.create( cCloudSymbol2, "spin cw", 5, cloudRange_3 )
+ , cCloud_4 = CharacterCloud.create( cCloudSymbol, null, 5, cloudRange_4 );
bg.appendChild( Parallax.cssSlide( cCloud_1, 0, slide_1 ) );
bg.appendChild( Parallax.cssSlide( cCloud_2a, 1, slide_2a ) );
@@ -231,7 +232,18 @@
if (colors.length < i) i = 0;
});
- Parallax.attach( window, wsupp, 0.2 );
+ Parallax.attach( window, wsupp, 0.5 );
+
+ var bWrapper = Dand.id( "begin-wrapper" );
+ Cycle.perma(
+ "MainBackground"
+ , function()
+ {
+ var p = wsupp.scrollTop / ( wsupp.scrollHeight - wsupp.clientHeight );
+ bWrapper.style.backgroundPositionY = ( p * 100 ) + "%";
+ }
+ , 15
+ );
};
Bootstrap.regInit( init );
diff --git a/botanjs/src/Astro/Starfall/Element/Header.css b/botanjs/src/Astro/Starfall/Element/Header.css
index 1f04978..2d001e0 100644
--- a/botanjs/src/Astro/Starfall/Element/Header.css
+++ b/botanjs/src/Astro/Starfall/Element/Header.css
@@ -54,39 +54,12 @@ header {
-webkit-box-shadow: inset 0 0 10px 0 black;
box-shadow: inset 0 0 10px 0 black;
- background-image: url(/assets/layout-images/home.png);
- background-position: 50% 90%;
- position: absolute;
overflow: hidden;
+ position: absolute;
text-align: center;
}
-.contact:before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: rgba( 255, 255, 255, 0.6 );
-}
-/*
-.begin-wrapper:before {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- width: 100%;
-
- background-image: url(/assets/layout-images/home-blur.png);
- background-position: 50% 0;
- background-repeat: no-repeat;
-
- opacity: 0.6;
-}
-*/
.contact-wrapper {
text-align: center;
position: relative;