» »

Красивый эффект при прокрутке страницы CSS

Красивый эффект при прокрутке страницы CSS

В данном материале узнаете как правильно создать оригинальный эффект при прокрутке в низ, где будет присутствовать красивая анимация. В сети интернет есть много плагинов, которые можно подключить под разные эффекты, что не исключение является страница сайта, и на ней добавить уникальную анимацию, где для гостей и пользователей будет отличным видом, да просто удивление. Во первых все отлично читабельно идет, также все можно разбить на блоки, вообще это делается на реальном сайте, если вы решили создать оформленную страницу под какую то тему. Где здесь аналогично можно сделать, но уже сама подача информации будет совершенно отличатся от стандартной.

Одна из многих тенденция веб дизайна, которая оказывается актуальной и безусловно уникальной, это прокрутка параллакса. При этом каркас интернет сайта видит, что фон веб страницы перемещается с меньшей скоростью на передний план, создавая просто ошеломительный эффект при прокрутке. Иногда это может быть подавляющим, но при экономном использовании он может обеспечить приятный, тонкий элемент глубины, что приводит к созданию уникального и запоминающегося портала.

Если взять одно направление, как обложка с описанием, то после подключение обложка должна быть уникальна по своим эффектом, которые автоматически можно подключить. Радужный спектр цвета и сложная компоновка могут выглядеть датированными и дешевыми, но сбалансированные, сильные заголовки и подзаголовки, объединенные с простыми графическими знаками, могут привлечь внимание более тонким способом.

Проверял на работоспособность, все отлично работает:

Создать страницу с эффектом прокрутки

Приступаем к установке:

HTML

Код
<div class="stwaqenulin">
  <h1>ZORNET.RU</h1>

  <h2>ZorNet.Ru: Портал Вебмастера</h2>
  <p>Описание на страницы</p>

  <h2>ZorNet.Ru: Скрипты для сайта</h2>
  <p>Продолжаем описывать</p>

  <h2>ZorNet.Ru: Шаблоны для сайтаа</h2>
  <p>Здесь также можно добавить картинку</p>

  <h2>ZorNet.Ru: Дизайн сайта</h2>
  <p>Или написать мануал</p>

  <h2>Стилистика CSS</h2>
  <p>Как как по знакам очень много на странице можно разместить.</p>
</div>
<canvas id="otresazen"></canvas>
<canvas id="aderzikolan"></canvas>

CSS

Код
body {
  margin: 0 10%;
  color: #fbf8f8;
  background-color: #171616;
  background: linear-gradient(to bottom right, #10231e, #28223a, #182631);
  font: 1.25rem/1.5 'Roboto', sans-serif;
}

.stwaqenulin {
  max-width: 798px;
  margin: 39px auto;
  padding: 18px;
  background-color: rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

h1, h2 {
  margin: 0;
  color: #bea6ff;
  background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
}

h1::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 20px;
  background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);
}

h2 {
  margin-top: 40px;
  font-size: 1.5rem;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

#botresazen {
  z-index: -1;
  filter: blur(1px);
}

#aderzikolan {
  z-index: -2;
  filter: blur(10px);
}

@media screen and (min-width: 500px) {
  h1 {
  font-size: 4rem;
  }
  h2 {
  font-size: 2rem;
  }
}

JavaScript

Код
Matter.use('matter-wrap');
let hexBokeh = {
  options: {
  canvasSelector: '',  
  radiusRange: [30, 60],  
  xVarianceRange: [0.1, 0.3],  
  yVarianceRange: [0.5, 1.5],  
  airFriction: 0.03,  
  opacity: 0.5,  
  collisions: false,  
  scrollVelocity: 0.025,  
  pixelsPerBody: 40000,  

  colors: ['#7ef2cf', '#bea6ff', '#8ccdff']
  },

  scrollDelay: 100,
  resizeDelay: 400,

  lastOffset: undefined,
  scrollTimeout: undefined,
  resizeTimeout: undefined,

  engine: undefined,
  render: undefined,
  runner: undefined,
  bodies: undefined,

  init(options) {
  this.options = Object.assign({}, this.options, options);

  let viewportWidth = document.documentElement.clientWidth;
  let viewportHeight = document.documentElement.clientHeight;

  this.lastOffset = window.pageYOffset;
  this.scrollTimeout = null;
  this.resizeTimeout = null;
   
  // engine
  this.engine = Matter.Engine.create();
  this.engine.world.gravity.y = 0;
   
  // render
  this.render = Matter.Render.create({
  canvas: document.querySelector(this.options.canvasSelector),
  engine: this.engine,
  options: {
  width: viewportWidth,
  height: viewportHeight,
  wireframes: false,
  background: 'transparent'
  }
  });
  Matter.Render.run(this.render);
   
  // runner
  this.runner = Matter.Runner.create();
  Matter.Runner.run(this.runner, this.engine);
   
  // bodies
  this.bodies = [];
  let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody);
  for (let i = 0; i <= totalBodies; i++) {
  let body = this.createBody(viewportWidth, viewportHeight);
  this.bodies.push(body);
  }
  Matter.World.add(this.engine.world, this.bodies);

  window.addEventListener('scroll', this.onScrollThrottled.bind(this));
  window.addEventListener('resize', this.onResizeThrottled.bind(this));
  },
   
  shutdown() {
  Matter.Engine.clear(this.engine);
  Matter.Render.stop(this.render);
  Matter.Runner.stop(this.runner);

  window.removeEventListener('scroll', this.onScrollThrottled);
  window.removeEventListener('resize', this.onResizeThrottled);
  },
   
  randomize(range) {
  let [min, max] = range;
  return Math.random() * (max - min) + min;
  },
   
  createBody(viewportWidth, viewportHeight) {
  let x = this.randomize([0, viewportWidth]);
  let y = this.randomize([0, viewportHeight]);
  let radius = this.randomize(this.options.radiusRange);
  let color = this.options.colors[this.bodies.length % this.options.colors.length];
   
  return Matter.Bodies.polygon(x, y, 6, radius, {
  render: {
  fillStyle: color,
  opacity: this.options.opacity
  },
  frictionAir: this.options.airFriction,
  collisionFilter: {
  group: this.options.collisions ? 1 : -1
  },
  plugin: {
  wrap: {
  min: { x: 0, y: 0 },
  max: { x: viewportWidth, y: viewportHeight }
  }
  }
  });
  },
   
  onScrollThrottled() {
  if (!this.scrollTimeout) {
  this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
  }
  },
   
  onScroll() {
  this.scrollTimeout = null;
   
  let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity;
  this.bodies.forEach((body) => {
  Matter.Body.setVelocity(body, {
  x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange),
  y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange)
  });
  });
   
  this.lastOffset = window.pageYOffset;
  },
   
  onResizeThrottled() {
  if (!this.resizeTimeout) {
  this.resizeTimeout = setTimeout(this.onResize.bind(this), this.resizeDelay);
  }
  },
   
  onResize() {
  this.shutdown();
  this.init();
  }
};

window.addEventListener('DOMContentLoaded', () => {
  Object.create(hexBokeh).init({
  canvasSelector: '#otresazen'
  });

  Object.create(hexBokeh).init({
  canvasSelector: '#aderzikolan',
  radiusRange: [99, 198],
  pixelsPerBody: 70000
  });
});

Также в сфере бизнес или услуги подойдет такой формат страницы сайта, что отлично послужит для страницы продаж, которая помогает вам приобретать более высокие объемы продаж и конверсии.

В качестве предпринимателя необходимо выбрать подходящую тему, которая будет эффективно продвигать ваши продукты и услуги и повышать ваши продажи и прибыль.

Демонстрация
12.06.2018 Просмотров: 258 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar