Блюр картинки при скроллинге вниз [закрыт]

255

15 июня 2018, 15:20

не могу понять, как реализовать такое, как на картинке в header. уже перерыл множество инфы, подтолкните плз пример

Answer 1

На том сайте применён не один эффект а несколько

1) blur...

2) parallax...

3) sticky для среднего элемента (в моём случае main)

Этот пример в песочнице на весь экран codepen.io здесь как всегда не так отображается

я попытался реализовать все эффекты которые там увидел смотри на полный экран

var elem = $(".blur"); 
var elem1 = $("header").height(); 
var elem3 = $(".noblur"); 
var elem4 = $("main"); 
var elem5 = $(".container"); 
var elem6 = $("main").height(); 
 
$(document).ready(function($) { 
  $(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= elem1) { 
      $(elem4).css({ 
        "position": "fixed", 
        "top": "0", 
        "left": "0", 
        "width": "100vw", 
        "z-index": 50 
      }); 
      $(elem5).css({ 
        "position": "relative", 
        "margin-top": elem1 + '10vh', 
        "z-index": 100, 
        "width": "100vw", 
        "transition": "0.5s" 
      }) 
      $(elem).css({ 
        "filter": "blur(20px)" 
      }); 
      $(elem3).css({ 
        "opacity": "1", 
        "transform": "translate(0,-200px)", 
        "transition": "1s" 
      }); 
    } else { 
      $("html,body").css({ 
        "padding-top": 0 
      }); 
      $(elem4).css({ 
        "position": "relative" 
      }) 
      $(elem).css({ 
        "filter": "blur(0)" 
      }); 
      $(elem3).css({ 
        "opacity": "0", 
        "transform": "translate(0,0)" 
      }) 
    } 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
  max-width: 100%; 
  box-sizing: border-box; 
} 
 
header { 
  width: 100%; 
  height: 20vh; 
  background: lightgreen; 
} 
 
main { 
  width: 100%; 
  height: 80vh; 
  position: relative; 
} 
 
.blur { 
  width: inherit; 
  height: inherit; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-wrap: wrap; 
  transition: .5s; 
} 
 
.noblur { 
  position: absolute; 
  top: 100%; 
  width: inherit; 
  height: auto; 
  opacity: 0; 
  transition: .5s; 
} 
 
.noblur ul { 
  padding: 20px 40px; 
} 
 
.noblur a { 
  font-size: 2em; 
  text-transform: capitalize; 
} 
 
.color:first-child { 
  width: 10vw; 
  height: 10vw; 
  background: violet; 
} 
 
.color:nth-child(2) { 
  width: 30vw; 
  height: 30vw; 
  background: lightblue; 
} 
 
.color:nth-child(3) { 
  width: 20vw; 
  height: 20vw; 
  background: yellow; 
} 
 
.container { 
  width: 100vw; 
  background: #fff; 
  min-height: 50vh; 
  padding: 20px; 
} 
 
.container p { 
  width: 90%; 
  margin: 30px auto; 
  font-size: 1.4em; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<header></header> 
<main> 
  <section class="blur"> 
    <div class="color"></div> 
    <div class="color"></div> 
    <div class="color"></div> 
    <div class="color"></div> 
  </section> 
  <section class="noblur"> 
    <ul> 
      <li><a href="#">blog</a></li> 
      <li><a href="#">contacts</a></li> 
      <li><a href="#">portfolio</a></li> 
    </ul> 
  </section> 
</main> 
<div class="container"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ipsum. Tempore recusandae tempora laboriosam soluta maiores dolores tenetur iusto quas culpa. Recusandae reprehenderit animi veniam voluptates tempora unde. Qui assumenda reprehenderit 
    provident delectus natus illum eos accusamus perspiciatis. Reiciendis culpa debitis consequatur dignissimos aliquid laborum! Eaque cupiditate soluta voluptate eius!</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ipsum. Tempore recusandae tempora laboriosam soluta maiores dolores tenetur iusto quas culpa. Recusandae reprehenderit animi veniam voluptates tempora unde. Qui assumenda reprehenderit 
    provident delectus natus illum eos accusamus perspiciatis. Reiciendis culpa debitis consequatur dignissimos aliquid laborum! Eaque cupiditate soluta voluptate eius!</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ipsum. Tempore recusandae tempora laboriosam soluta maiores dolores tenetur iusto quas culpa. Recusandae reprehenderit animi veniam voluptates tempora unde. Qui assumenda reprehenderit 
    provident delectus natus illum eos accusamus perspiciatis. Reiciendis culpa debitis consequatur dignissimos aliquid laborum! Eaque cupiditate soluta voluptate eius!</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ipsum. Tempore recusandae tempora laboriosam soluta maiores dolores tenetur iusto quas culpa. Recusandae reprehenderit animi veniam voluptates tempora unde. Qui assumenda reprehenderit 
    provident delectus natus illum eos accusamus perspiciatis. Reiciendis culpa debitis consequatur dignissimos aliquid laborum! Eaque cupiditate soluta voluptate eius!</p> 
</div>