CN layout 2

cn-layout-2.markdown

CN layout 2

This is a secret project, starting today 2016/07/31 I am gonna build my girlfriends first website, it's a total secret.

She likes to cook, so Im gonna put photos of her cooking on here, kind of like a menu.

A Pen by Aled Wassell on CodePen.

License.

index.jade

#js-parallax-window.parallax-window
  .parallax-static-content    
    nav: ul
      li natty
        ul(class="drop-menu menu-1")
          li about
          li contact
      li cooking
        ul(class="drop-menu menu-2")
          li item1
          li item2
          li item3
      li inspiration
        ul(class="drop-menu menu-4")
          li item1
          li item2
          li item3
  #js-parallax-background.parallax-background



div.nat
  h1 Caf&#233 NaTTY 
    i(class="fa fa-cutlery fa-1x")

  div.image

.about
  h1 Natsuko Kashiwazaki
  p lorum ipsum
  
.contact
  h1 contact me at natsukokashiwa@gmail.com
    
   
     

layout-practice.markdown

layout practice

This is a secret project, starting today 2016/07/31 I am gonna build my girlfriends first website, it's a total secret.

She likes to cook, so Im gonna put photos of her cooking on here, kind of like a menu.

A Pen by Aled Wassell on CodePen.

License.

script.js

$(document).ready(function() {
  $('nav .cake').on('click', function(){
    $(".image").css("background-image", "url(http://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/easy_chocolate_cake_31070_16x9.jpg)");
  });
  $('nav .puding').click(function() {
    $(".image").css("background-image", "url(http://nasyamikids.besaba.com/wp-content/uploads/2013/04/puding.jpg)");
  });
  $('nav .sponge').click(function() {
    $(".image").css("background-image", "url(http://ganachepatisserie.com.au/wp-content/uploads/2016/02/tips-to-make-the-perfect-sponge-cake.jpg)");  
  });
  $('.about').click(function() {
    $('.nat').css('.contact');
  });
});

$(document).ready(function() {
  if ($("#js-parallax-window").length) {
    parallax();
  }
});

$(window).scroll(function(e) {
  if ($("#js-parallax-window").length) {
    parallax();
  }
});

function parallax(){
  if( $("#js-parallax-window").length > 0 ) {
    var plxBackground = $("#js-parallax-background");
    var plxWindow = $("#js-parallax-window");

    var plxWindowTopToPageTop = $(plxWindow).offset().top;
    var windowTopToPageTop = $(window).scrollTop();
    var plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;

    var plxBackgroundTopToPageTop = $(plxBackground).offset().top;
    var windowInnerHeight = window.innerHeight;
    var plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
    var plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
    var plxSpeed = 0.50;

    plxBackground.css('top', - (plxWindowTopToWindowTop * plxSpeed) + 'px');
  }
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

//pallet from lolcolors.com
$pink: #fab1ce
$purple: #C89EC4
$lightblue: #67D5B5
$darkblue: #84B1ED
$brown: #754F44

//ul and main colors
$lightblue: #67D5B5

//standard white
$white: #fff

//li colors
$li: $purple
$li-hover: darken($purple, 20%)

//logo color
$logo: #C89EC4

//background
$pink: #ee7785

//border radius
$box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.19), 0px 6px 6px -5px rgba(0,0,0,0.23)

//fonts
@import url(https://fonts.googleapis.com/css?family=Lobster)

//  Natsuko web revisited, this time im gonna 
/*Looking at navigation and making it work for the first time, understanding that the div height effects how the nav bar is displayed*/

/*P.S. I know the colors are horrible!!*/

body
  margin: 0
  font-family: Helvetica
  background-color: $white
  color: $brown

nav
  padding: 0 0 220px 0
  text-align: center
  
  > ul
    list-style: none
    padding: 0
    margin: 0
    display: inline-block
    background: $darkblue
    border-radius: 0px 0px 5px 5px
    box-shadow: $box-shadow
    
    > li
      float: left
      width: 150px
      height: 65px
      line-height: 65px
      position: relative
      text-transform: uppercase
      font-size: 14px
      font-weight: 600
      color: $brown
      cursor: pointer
      
      &:first-child
        //font-family: 'Lobster'
        //font-size: 2em
      
      &:hover
        color: $white
        background:  $li-hover
            

ul.drop-menu
  position: absolute
  top: 100%
  left: 0%
  width: 100%
  padding: 0
  
  li
    background: $li
    color: $white
    box-shadow: $box-shadow
    
    &:hover
      color: $white
      background: $li-hover
    
    &:last-child
      border-radius: 0px 0px 5px 5px


// Default Trigger    

ul.drop-menu li
  display: none // HIDE

li:hover > ul.drop-menu li
  display: block // SHOW
    
// ANIMATION menu 1

li:hover > ul.drop-menu.menu-1 
  perspective: 1000px
  
  li
    opacity: 0
  
    @for $i from 1 through 2
      &:nth-child(#{$i})
        animation:
          name: menu1
          duration: 300ms * $i
          delay: (150ms * $i) - 300
          timeing-function: ease-in-out
          fill-mode: forwards  

  @keyframes menu1
    0%
      opacity: 0
      transform: rotateY(-90deg) translateY(30px)
    100%
      opacity: 1
      transform: rotateY(0deg) translateY(0px)
  
// ANIMATION menu 2

li:hover > ul.drop-menu.menu-2 
  perspective: 1000px
  
  li
    opacity: 0
    transform-origin: top center
  
    @for $i from 1 through 3
      &:nth-child(#{$i})
        animation:
          name: menu2
          duration: 300ms * $i
          delay: (150ms * $i) - 300
          timeing-function: ease-in-out
          fill-mode: forwards  

  @keyframes menu2
    0%
      opacity: 0
      transform: rotateX(-90deg)
  
    30%
      transform: rotateX(50deg)
  
    100%
      opacity: 1
      transform: rotateX(0deg)
  
// // ANIMATION menu 3

// li:hover > ul.drop-menu.menu-3
//   perspective: 1000px
  
//   li
//     opacity: 0
  
//     @for $i from 1 through 3
//       &:nth-child(#{$i})
//         animation:
//           name: menu3
//           duration: 300ms * $i
//           delay: (150ms * $i) - 300
//           timeing-function: ease-in-out
//           fill-mode: forwards  

//   @keyframes menu3
//     0%
//       opacity: 0
//       transform: rotateY(-90deg) translateY(-30px)
  
//     30%
//       opacity: 1
  
//     100%
//       opacity: 1
//       transform: rotateY(0deg) translateY(0px)
  
// ANIMATION menu 4

li:hover > ul.drop-menu.menu-4 
  perspective: 1000px
  
  li
    opacity: 0
  
    @for $i from 1 through 3
      &:nth-child(#{$i})
        animation:
          name: menu4
          duration: 300ms * $i
          delay: (150ms * $i) - 300
          timeing-function: ease-in-out
          fill-mode: forwards  

  @keyframes menu4
    0%
      opacity: 0
      transform: rotate(-30deg) translateY(-60px)
  
    80%
      transform: scale(1.2) translateY(10px)   
  
    100%
      opacity: 1
      transform: scale(1) translateY(0px)

// parallax
$parallax-window-height: 25em
$parallax-background-height: $parallax-window-height * 2

.parallax-window 
  max-height: $parallax-window-height
  overflow: hidden
  position: relative
  text-align: center
  width: 100%

.parallax-static-content 
  color: #9A9A8A
  padding: 0
  position: relative
  z-index: 9

.parallax-background 
  background: url("https://c2.staticflickr.com/2/1614/23685361974_e838b70e52_b.jpg") repeat
  background-position: top
  background-size: cover
  background-color: beige
  height: $parallax-background-height
  left: 0
  position: absolute
  top: - $parallax-window-height / 3
  width: 100%

// Based on http://codepen.io/skeurentjes/


h1 
  text-align: center
    
.image
  display: block
  background-image: url("http://placehold.it/550x350")
  background-repeat: no-repeat
  height: 350px
  width: 550px
  margin: 20px auto 20px auto
  box-shadow: $box-shadow
  
.nat 
  background-color: $darkblue
  height: 30%
  padding: 10px 10px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />