Skip to content

Instantly share code, notes, and snippets.

@FeipingHunag

FeipingHunag/Four Seasons (playing with filters).markdown

Created December 24, 2015 04:03
Show Gist options
  • Save FeipingHunag/7c3bfd369f057c655b9e to your computer and use it in GitHub Desktop.
Save FeipingHunag/7c3bfd369f057c655b9e to your computer and use it in GitHub Desktop.
Download ZIP
Four Seasons (playing with filters)
Raw
index.html
<div class="seasonsContainer">
<span class="cloud cloud1"></span>
<span class="cloud cloud2"></span>
<a href="#" id="spring" class="season spring"></a>
<a href="#" id="summer" class="season summer"></a>
<a href="#" id="fall" class="season fall"></a>
<a href="#" id="winter" class="season winter"></a>
<span class="grass"></span>
</div>
Raw
script.js
;(function($) {
var $seasons = $('.season');
$seasons.on('click', function(e) {
e.preventDefault();
var $this = $(this);
if($this.hasClass('active')) {
$seasons.removeClass('active inactive');
} else {
$seasons.removeClass('active').addClass('inactive');
$(this).removeClass('inactive').addClass('active');
}
});
})(jQuery);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import 'compass';
$blue: #0063a6;
$cyan: #2fdbf5;
$white: #fff;
$yellow: #f3d891;
$darkBlue: #4494d3;
$armyGreen: #3b490b;
$darkOrange: #fe5302;
$gray: #eee;
html, body {
height: 100%;
}
body {
font-family: 'Balqis', serif;
}
.seasonsContainer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
@include background-image(linear-gradient(top, $blue 0%, lighten($blue, 5%) 15%, lighten($blue, 70%) 100%));
}
.grass {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 5vmin;
max-height: 62px;
background: transparent url(http://dodozhang21.github.io/svg/fourSeasons/grassBk.png) repeat-x;
background-size: contain;
z-index: 1;
}
.cloud {
position: absolute;
background: $white;
width: 30vw;
height: 10vw;
top: 15%;
left: 10%;
border-radius: 5vw;
&:before, &:after {
content: '';
position: absolute;
background: $white;
border-radius: 50%;
}
&:before {
width: 25%;
height: 75%;
top: -35%;
left: 15%;
}
&:after {
width: 50%;
height: 150%;
top: -60%;
left: 33%;
}
}
.cloud2 {
width: 21vw;
height: 7vw;
top: 8%;
left: 67%;
}
.season {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
display: block;
z-index: 20;
background-repeat: no-repeat;
background-size: contain;
background-position: center bottom;
@include transition(all 1s ease-out, opacity 0.5s ease-out);
&:before,&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.active {
width: 100%;
left: 0;
z-index: 100;
}
&.inactive {
opacity: 0;
}
}
.spring {
background-image: url(http://dodozhang21.github.io/svg/fourSeasons/springTree.svg);
&:after {
background: linear-gradient(top, rgba($cyan, .5) 0%, rgba($white, .2) 100%);
@include filter(saturate(1));
}
}
.summer {
left: 25%;
background-image: url(http://dodozhang21.github.io/svg/fourSeasons/summerTree.svg);
&:before {
background: url(http://dodozhang21.github.io/svg/fourSeasons/bird.svg) no-repeat center center;
background-size: 10% 10%;
}
&:after {
background-image: linear-gradient(top, rgba($darkBlue, .7) 0%, rgba($yellow, .5) 60%, rgba($yellow, 0.3) 70%, rgba($yellow, 0.3) 80%, rgba(darken($yellow, 50%), .3) 100%);
@include filter(brightness(1));
}
}
.fall {
left: 50%;
background-image: url(http://dodozhang21.github.io/svg/fourSeasons/fallTree.svg);
&:before {
background: url(http://dodozhang21.github.io/svg/fourSeasons/leaves.svg) no-repeat center center;
background-size: contain;
}
&:after {
background: rgba($darkOrange, .4);
@include filter(saturate(1));
}
}
.winter {
left: 75%;
background-image: url(http://dodozhang21.github.io/svg/fourSeasons/winterTree.svg);
background-position: center 95%;
&:before {
background-image: url(http://dodozhang21.github.io/svg/fourSeasons/snow.svg), linear-gradient(top, rgba($white, .05) 0%, $white 20%, $white 100%);
@include filter(grayscale(1));
background-repeat: no-repeat;
background-size: 50% 50%, 100% 6%;
background-position: center 140%, center bottom;
@include transition(all 0.3s ease-out);
}
&:after {
background-image: linear-gradient(top, rgba($gray, .7) 0%, rgba($white, .1) 100%);
@include filter(grayscale(1));
}
&.active {
&:before {
background-size:50% 25%, 100% 6%;
background-position: center 112%, center bottom;
}
}
}
Raw
styles
<link href="http://codepen.io/dodozhang21/pen/mVEqNE.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment