okkur / syna

Highly customizable open source theme for Hugo based static websites

Home Page:https://syna.okkur.org/demo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add support for background images and simple parallax scrolling

Rado-1 opened this issue · comments

Is this a BUG REPORT or FEATURE REQUEST?:
feature

What you expected to happen:

It would be nice to support the following features:

  1. To use image for background of a fragment. This would be a generic feature used for any kind of fragment; content, items, portfolio, graph, etc. Something similar to what we can in the hero fragment. The solution would be, e.g., to use asset.image for background and to specify it in a special property, e.g., asset.use_as_background.
  2. If there is a background image set for a fragment, there should be a way how to set a simple parallax scrolling effect and the ratio how fast/slow the background image is moving - from static to some percentage of scrolling the page. E.g. asset.parallax = 0 for background image not moving by vertical scrolling, asset.parallax = 50 for background image moving by 50% of scrolling, or asset.parallax = 100 (default) for background image moving with the same speed as scrolled page. Also values more than 100 could be allowed.

Example of a simple parallax scrolling effect: https://codepen.io/tribex/pen/mWNWdz

Sidenote: Codepen does not work with Firefox it seems.