snow – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:17:59 +0000 en-US hourly 1 Snow Falling CSS Animation https://thingography.com/css-snow/ https://thingography.com/css-snow/#respond Mon, 12 Mar 2018 14:29:59 +0000 http://thingography.com/?p=1953 .ani-box {width: 100%; height: 600px; background: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/home.jpg') no-repeat center center fixed; background-size: cover; } .layer0, .layer1, .layer2, .layer3 { width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; opacity: 1; } .layer0 { background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-0.png'); animation: snow0 10s linear infinite; } .layer1 { opacity: 0.5; background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-1.png'); animation: snow1 25s linear infinite, snow1z 40s linear; } .layer2 { background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-2.png'); animation: snow2 17s linear infinite, snow2z 40s linear; } .layer3 { background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-3.png'); animation: snow3 13s linear infinite, snow3z 40s linear; } /* Layer 0 - Base Layer Snow Falling Animation */ @keyframes snow0 { 0% {background-position: 0px 0px;} 100%{background-position: 300px 300px;} } /* Layer 1 - 1st Addition Snow Falling Animation */ @keyframes snow1 { 0% {background-position: 0px 0px;} 100%{background-position: 500px 500px;} } /* Layer 2 - 2nd Addition Snow Falling Animation */ @keyframes snow2 { 0% {background-position: 0px 0px; transform: skewY( 0deg);} 50% { transform: skewY(10deg);} 100%{background-position: 400px 400px; transform: skewY( 0deg);} } /* Layer 3 - 3rd Addition Snow Falling Animation */ @keyframes snow3 { 0% {background-position: 0px 0px;} 100%{background-position: 400px 400px;} } /* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time */ @keyframes snow1z { 0% { opacity: 0.0;} 50% { opacity: 0.7;} 100%{ opacity: 0.5;} } /* Sbow Layer 2 Addition Fade-In Animation */ @keyframes snow2z { 0% { opacity: 0;} 25% { opacity: 0;} 50% { opacity: 1;} 100%{ opacity: 1;} } /* Sbow Layer 3 Addition Fade-In Animation */ @keyframes snow3z { 0% { opacity: 0;} 50% { opacity: 0;} 75% { opacity: 1;} 100%{ opacity: 1;} }

Who does not want snow falling in their website during the Christmas Holidays while not using JavaScript? An early example of falling snow using CSS and a few PNGs.
]]> https://thingography.com/css-snow/feed/ 0 Winter Images https://thingography.com/winter/ https://thingography.com/winter/#respond Mon, 19 Feb 2018 16:14:15 +0000 http://thingography.com/my-things/?p=1591

A Collection of Winter scene photos.

]]> https://thingography.com/winter/feed/ 0